This guide will give you tips and ideas on how to improve your website by choosing the best format for your images. Applying these guidelines to this website resulted in:
Windows Games graphics folder: going from 2.52MB to 462KB
Cybiko graphics folder : from 91.5KB to 48.8KB
Cybiko Video graphics folder : from 17.3KB to 10.1KB
This reduction means less space used on the webserver and a faster site for the users.
For more general web site tips, click here.
A quick overview of the the main image formats used on the web:
GIF - 256 colours, used mainly for graphics such as icons. Image compression is usually not as good as PNG/WebP. Can also be used for animations.
JPG - Used for photo images, supported by everything. Lossy format, the higher the compression, the more detail is lost.
PNG - Lossless format, good for archiving photos but not for putting them on a website due to size. For lower colour images, it can offer better compression than GIF.
WEBP - Has both lossy and lossless modes so good for photos and graphics. Excellent compression in both modes. Its main negative is the lack of browser support, it is currently only supported in Chrome and the latest Firefox.
The image below is 320x240 and has 12 colours, as an uncompressed bitmap it is 1201KB in size. This kind of image is an average screenshot for this site.
The following are the sizes when resaved in the different formats:
GIF Size : 10.7KB
PNG Size : 6.92KB (Using IrfanView)
PNG Size : 3.57KB (Using OptiPNG)
WEBP Size : 3.45KB
The WEBP image is the smallest image,the only downside is the lack of browser support. What this means is that your site could have 3 times as many PNG/WEBP images in the space that the GIF's take up, the download for a single image would also be around 3 times faster!
A JPEG is not the best choice for the above type of image due to its lossy nature. For purposes of comparison though, saving as a JPEG at 80% quality resulted in a 47KB file.
After deciding on the correct format to use, the next important task is to resize your image. Putting a large image on your website and letting the browser resize it means you are transferring a large image when a smaller one would be better.
If you have a gallery on your website, display smaller thumbnails which links to the larger image. You could also provide download options:
Note that in the above instance, the PNG larger image has smaller size than the WEBP...