Whilst web designers do not have control over their visitor’s internet connection speed (or possible sluggish speed during peak times), optimizing images for the web is an essential step to ensure that web pages load at a reasonable speed for most of their visitors. This will always be a question of trade-off between quality and file size.
Whilst there are plenty of image formats, only a few of them can be used safely (compatibility or speed) for the web. The three most used format used to save images for websites, which we are going to compare here, are called “JPEG”, “GIF” and “PNG”.
What does “lossy” and “lossless” image compression mean?
Image formats can be divided into2 categories: lossy and lossless.
With lossy compression, the image data is compressed so it means that your image won’t match the original image quality. However, with the appropriate compression parameters, images can still look reasonably good enough on a screen while using a relatively small amount of memory.
On the otherside, lossless means that, once the image is decompressed, you get the same image as the original, without any loss of quality. The drawback is that the file will usually be bigger than with lossy compression so it may take longer to load on your web page.
What determines the best way to optimize images for the web?
The main factors which determine how to properly optimize your images for the web are:
– the dimensions of the final image: regardless of the format used, the larger an image is, the bigger the file size will be, which means increased loading times.
– the amount of details required. This largely depends on your web pages objectives and the technology used by your visitors. For example, if most if your visitors are technologically minded or live in an area where the internet infrastructure is excellent, you may decide to have a less conservative approach than if some of your users have a slow connection or still use old technology: a tool such as Google Analytics can give you some clues about these aspects and much more.
– the quality of your web host: if your web host is slow (in which case, it may be as well to contact them to ask them why it is the case and, if that fails, to change your web hosting company), you will need to make sure that your images are well optimized so that they load at an acceptable speed.
– the web hosting costs: web hosting bandwidth costs money, so if your website is large and has lot of traffic, it may actually save you money to optimize your images the best you can.
– the image placement: images near the top of the site are more visible than images near the footer so you may decide to compress the less visible ones more, because, viewed or not, they all still need to load on your page!
JPEG (pronounced jay-peg) is the most common image format for the web. It was created by the Joint Photographic Experts Group and its extension is.jpg.
JPEG uses lossy compression but its degree is selectable. It is usually best for complex or “realistic” pictures, such as photographs, with lots of continuous tones (where adjacent pixels often have very similar colours, like a blue sky with many shades of blue). It is possible to finely tune the degree of compression in order to get the best balance between the image size (expressed in kilobytes or kB) and image quality. Good images editors will allow you to compare original and optimized images side by side and finely tune the image compression using a slider, for example. If the compression is set too high, you will start noticing artefacts so it means you will need to slowly decrease the compression until you’re happy with the results.
The lossy compression has an advantage though: for photographic images, JPG file sizes are almost always smaller than PNG’s, which means that JPEG works well in terms of best compromise between photo quality and file size. So, if you’re putting up a photographic image on a web page, JPG is almost always the best choice.
With graphics though, JPG is usually best avoided as artefacts are often created in the hard edges of graphics or text, which is not pretty, so you will be better off using either the GIF or the PNG formats.
One warning when working with JPEG images, however: because the format is lossy, every time you save a jpeg image, you will lose some quality, so it is good practice to always work on a copy of your original as what is lost in successive savings cannot be restored.