No website is complete without stunning imagery. After all, an image says a thousand words and images, whether it be photos, icons, illustrations or backgrounds are a central part of our website design. (By the way if you're looking for the best sources for free images you should check out The Design Vault)
But could your images be slowing your website down? If you have an image heavy website (like a regularly updated blog) and do not save your images optimised for web then chances are the answer is yes. This is not good because slow loading is a major reason for people leaving a website.
However, now that you're here, you will no longer have one of those websites. In this post I'm going to show you exactly how to optimise your images and increase the speed of your website.
Reduce Image File Size
The main reason why your images are slowing your website down is because the file sizes are too big. A larger file is going to take longer to load than a smaller file.
File sizes are measured in bytes. You have probably already heard of the most common denominations, Kilobytes (KB), Megabytes (MB), Gigabytes (GB) and Terabytes (TB). Remember when you were in primary school and were learning to count in units, tens and hundreds? Bytes are similar to that with KB being the smallest denomination (units), followed by MB (tens), GB (hundreds) TB (thousands). Bytes are broken down as follows:
1 024 KB = 1 MB
1 024 MB = 1 GB
1 024 GB = 1 TB
Ideally when saving images for our websites we want to keep the image in the low KB range. I recommend trying to keep the images on your website at 100KB or lower. For blog post images it's pretty easy to keep them around the 50KB mark. For website banner images you may need to go a bit higher than 100KB but try to get it as small as possible while preserving the quality of the image.
TAKEAWAY: keep image file size at 100KB or under
Use Correct Resolution
That brings me to the next component which affects image quality and file size which is resolution. The resolution of web images is measured in pixels. Pixels are basically tiny dots of colour that make up the whole picture. When you zoom right into a photo you can see the pixels that make up the image as shown below.
The number of pixels in an image corresponds to the image quality. Generally speaking, the more pixels the, higher the resolution and the clearer the image. Having said that different outputs have different pixel requirements. For a good quality print 300 dpi (dots per inch) is the standard while a screen only needs 72 ppi (pixels per inch) to create a clear, high quality image.
The number of pixels is also going to affect the file size of the image. As you can imagine a 300 ppi image is going to be a lot larger than a 72 ppi image. There is no need to save your image at 300 ppi for web. It will only make your file bigger and slow your website down.
TAKEAWAY: Keep you website images at 72ppi.
Know Your Image Dimensions
The dimensions of an image is another factor that affects the file size. The larger the dimensions of an image the larger the file size. In web design the standard unit of measurement is not cm or inches, but pixels (px).
Ensuring that the images on your website are the correct number of pixels wide and high for the space available not only helps save unnecessary image data which accumulates and slows your website down, but it also optimises the quality of your images.
Often internet browsers will resize images to fit the space. If an image is larger than the dimensions of the space it needs to fit then the browser will shrink it down. This will not affect the images' resolution, however the image file will be larger and take up more space than it needs, slowing the website down.
If the dimensions of the image are smaller than the dimensions of the space on the web page then, depending on the exact application and styling rules applied then the image will either be enlarged (e.g. website banner image) causing the image to lose resolution, becoming blurry and/or get stretched and distorted, or it will remain the same size but it will look out of place with too much space around the image.
Unfortunately there are no standard website image dimensions. Essentially there is no limit to how long a web image can be as there is no limit to how far a web page can scroll down. The most important measurement is therefore width but the width of the content area is different for each website.
On this website the width of the blog content area, is 700px and so my photos are also 700px wide except for the blog post feature image which I like to have a bit narrower at 500px wide. Banner images that span the full width of a web page are going to be larger from 1200px and higher.
TAKEAWAY: Save images at the correct width (px) and if applicable height
Use The Right File Format
There are number of different image file formats but the three most common image files used on websites are GIF (.gif), JPEG (.jpg) and PNG (.png). These file formats differ in the way they are compressed, support different features and consequently result in different file sizes. It is therefore important to know when and where to use each file format.
GIF files compress the image into a 256-colour colour pallet which makes the file size smaller but it reduces the quality of the image as any colour outside of the colour pallet will be replaced with the closest colour within the colour pallet. The main feature of GIF files is that they allow for animation, which JPEG and PNG do not.
JPEG files are the most compressed and produce the smallest file size. This comes at the expense of image quality. While at normal size a JPEG image looks fine, when zoomed in the loss of quality is noticeable. When using JPEG files it is important that it is saved in the correct dimensions so that it does not get enlarged by the internet browser. A JPEG file format is perfect for images where you don't need to preserve fine detail at high resolution and the image has no areas that require a transparent background. A JPEG image would for example be perfect for blog post images.
PNG files are compressed in such a way that doesn't affect the quality of the image meaning that it will look as sharp as the original image. PNG files also allow for transparent backgrounds. Unfortunately all this makes PNG files much larger. However you can keep PNG files smaller by using PNG-8 which, like GIF files, restricts the image to a 256 colour pallet. If true colour is required then PNG-24 is best but it will produce the largest file size. On your website PNG images are perfect for when you need a transparent background such in logos and outlined icons and images.
To make it easier for you to choose the right image format I have created this infographic.
TAKEAWAY: Save your images in the format that best suits your needs. JPG and PNG-8 are best to keep file sizes low.
If your website has become a bit sluggish lately I recommend that you take a look at your images and take some time to reduce their file size by following the tips above. If you have lots of images on your website, don't fret, you don't have to do it all in one go, and even optimising some of them will help. And going forward always make sure that your images are the right size and format.
