Image Formats
File Types • Benefits • Compression • WebP • Summary
Choosing the right file type, and optimising your images for the web is important for good web design. Far too many websites have huge images that take so long to download that any users without high-speed broadband will soon go elsewhere. It is not just a simple trade-off between image quality and file size. If you make you right choices, you can have both. For a more thorough explanation take a look at Digital Image File Types.
If you need a transparent background it has to be PNG or GIF. If you also need photographic quality 24-bit colour then PNG is the only option. Portable Networks Graphic format (PNG) was specifically designed with the needs of the web in mind, so it is the obvious choice.
You should have no problem with using PNG format for screen shots of dialog boxes, but images with transparent backgrounds like that on the right will be rendered with a grey background in version 6 of Internet Explorer or earlier.
This PNG image is 330 x 298 pixels. The file size is (127,107 bytes). It contains 40,095 unique colours.
Where PNG is best is with images containing large areas of uniform colour. dialog boxes and screen shots of software interfaces are ideally suited to saving in PNG format. FastStone Capture can be used to save PNG images and offers good compression. To compress PNG images even more try PNG Crush.
Another time not to use JPG format is for pictures with sharp contrast, which includes nearly all pictures with text. The way that JPG compression works means that sharp edges become blurred with artefacts introduced in the compression process.
Repeated compression of a JPG image, opening and saving it several times, magnifies this effect. Compare the PNG image on the right (26,842 bytes) with the JPG image displayed on mouse-over (42,576 bytes) saved only once at a high quality setting of 75.
The PNG image has to be saved directly from the screen shot. If you open a JPG image and save it as PNG, it will get bigger because compression modifies pixels in the original image, adding grey pixels on the borders of black and white, for example. Zoom in at least 200% to see the artefacts introduce by JPG compression. Mouse over and mouse down (click) to compare PNG, JPG, and GIF.
As a rule, screen shots of dialog boxes will be smaller and sharper if saved as PNG images or GIF images than if saved as JPG, whether the JPG image is saved at high, medium, or low quality settings.
The same dialog box saved as GIF (which can be seen on holding the mouse down) is 37,727 bytes. Because the PNG file contains 2580 unique colours, the 256 colour GIF image contains less colour information than the PNG image, but the PNG image is still much smaller. You might notice a loss of colour quality on some screen shots, but often a PNG image can be reduced to 256 colours to reduce the file size a bit more.
The same image saved as a medium quality JPG image is just (14,305 bytes, about 11.25% the size of the PNG image. IrfanView has a range of settings for saving JPG images from 100 (best) to 1 (lowest). For small images where quality is not paramount, one can safely use a setting as low as 25 for most images. Using a moderately high setting of 75 it looks almost as good as the original PNG image. The same image in 32-bit WebP format at the same high quality is just 13,970 bytes or about 11% the size of the PNG image.
I find that a save setting of 50 provides adequate compression while not compromising quality too much.
Using higher settings than 75 gives ever diminishing improvements in quality for rapid increases in file size (see the chart below). It is debatable whether one should ever use a higher quality than this on the web. WebP images at a setting as low as 20% may become slightly blurred, but in my opinion they are quite good enough for the web and much better than a JPG image compressed to a similar size, which requires a very high compression setting.
JPG images can also be saved as "progressive" so that the image loads quickly with less detail, and then detail is filled in later. This is useful with larger images and slower Internet connections. With images less than 100 K and broadband connections, one will hardly be able to notice whether the images are "progressive" or not.
Compression vs Quality
The best quality is always the original image. Cameras will save images at a high quality, which can only degrade with repeated saving and compression. This sunset seascape image started life as a high quality image from the Premium Image collection. IrfanView estimates that it was saved with a save quality of 98. The image has been resampled to one eighth of the original dimensions using the best Lanczos filter to make it a suitable size for this web page. It was then saved at different save quality settings. Mouse-over the image to compare the default version saved at a quality setting of 50 (8,715 bytes), with one saved at a quality setting of 75 (13,661 bytes). Hold the mouse down to see the same image saved with the setting “Try to save with original JPG quality (estimated).” This version is the best quality that one could get, but is significantly larger (77,402 bytes) than either of the other versions. Can you tell the difference? You may think that it’s not a rollover because it doesn’t seem to change at all. However, if you zoom in to 500% the difference is just detectable.
Someone browsing a website is very unlikely to notice the very subtle difference in quality between the lowest quality of the three images and the highest original quality image. However, they are very likely to notice if the page takes 8.88 times longer to load. That is how much difference there is in the file sizes. The one with a save quality of 75 is 5.66 times smaller than the original quality version, so it is still a significant benefit for site users if the image quality is reduced only slightly.
If you want to provide a high quality image for your site visitors do it by providing a link to one. That will not then be loaded when the page loads. Use a higher resolution version that shows more detail. Click to see a full sized version (219,745 bytes) compressed with a save quality of 50. Even at this medium quality setting, the artefacts are not obvious. The image is not as sharp as the original camera image at a save quality of 98 (5,021,056 bytes), but I think it is still pretty good.
The optimal compression/quality trade off depends on the original image data. Photographs of landscapes and people are usually quite acceptable at a save quality of 50 or even lower. However, photographs of buildings or machinery may need a higher save quality to give acceptable results.
This image from the Professional Images Collection was resized by one eighth to make it small enough for this web page.
- Saved at original quality it is (162,110 bytes)
- Saved at a quality of 75 is (58,340 bytes), while
- Saved at a quality of 50 is (39,508 bytes)
In this case, the file size of the highest quality version is only about four times the size of the one saved at a quality of fifty, while it is only 2.78 times the size of the one saved at a quality of 75. However, with this image, the difference is just about noticeable on mouse-over or mouse down.
To get the same file size reduction as for the first image, one would need to use a save quality of 15 and accept very low quality.
There is no need to optimise every single image on a web site to perfection, but if you’re aware of these significant differences between file size and quality you can find a value to use in a batch operation for most images that will be acceptable to you and your site’s visitors. Wherever you want to show an image at its very best without making your site too heavy for those on slow connections or expensive for those who pay for bandwidth, you can try a slightly higher save quality than the one that you use for other images.
From the chart you can see that the “sweet spot” where the curve begins to level off, and where reducing the quality further doesn’t give very much reduction in the file size, is about 75 for the Building image (the Window) or about 90 for the Seascape. Images of faces come between the two.
The quality remains reasonable all the way down to a save quality of 25 for most images. If you want a low bandwidth site for mobiles, such images will be fine, unless they have fine details and areas of sharply contrasting colours.
The orange line shows the file sizes for this Line Chart, which is much smaller as a 256 colour PNG image than as a very low quality JPG image. There is no benefit at all in using the JPG format for images of this type, i.e. mostly text or vectors.
Note: Also remember to strip EXIF data as this adds a lot of bytes to small images. The data is of no use to the average user. Only if your site is for photographers will they be interested in which camera was used, who took the photo, or what camera settings were used. IPTC data can be retained or added to record copyright data without taking too many bytes. Retaining the EXIF data may double the size of small images.
Using the same 75 quality setting, the file size of the Chindit image can be reduced to just 8,616 bytes with no noticeable loss of quality – about 7% of the file size. Rollover the graphic to compare screen shots of JPG and WebP versions zoomed in to 1000%
A WebP image is smoother than the equivalent JPG image, with fewer artefacts in spite of its slightly smaller file size. Only time will tell if the WebP format is widely adopted — it may be as it is promoted by Google.
For the majority of photographic images, JPG is best due to its efficient compression. Just be aware that for some images with large areas of the same colour, or with text or sharp lines, either PNG or GIF will prove much better.
Use PNG for dialog boxes, JPG for photographs, and GIF for clip-art images with transparent backgrounds. For photographs with transparent backgrounds use PNG, or composed JPG images, laying the cutout on the intended background. To reduce PNG file sizes further install the PNGOUT plugin for IrfanView. Results vary widely, but on average images can be reduced by about 10-20%. The chart PNG could be reduced from 10,907 bytes to 8,530 bytes, about 12%.
Page last updated on 14 August 2022