This guide explains the differences between the many popular image formats you may come across and when to use them.
As images and how the formats work vary, you may find your experience contradicts what is written below e.g. a JPEG file that is better quality than a WebP or that a GIF is smaller than a PNG. This is normal and is a good reason to check the options available!
Usage also factors in when choosing a file format, for example for a web page image, the smallest file possible is best but you must also consider loading speed and browser support (Safari is slow to support new formats). Emailing an image no one can open is not ideal but if you are archiving for your own use, this is not as much of an issue.
This is not an exhaustive list of formats, just the most popular or, in the case of JPEG XL, one that should be more popular.
This is a 256 colour (8 bit) image format, they offer pretty good compression and being an old format they can be viewed / edited on almost everything. They are still good for icons and other low colour uses but in general a PNG is better. They also offer transparency and an animated version. GIF animations are probably the main reason they are still used.
✔️ Good for icons / buttons.
✔️ Well supported.
✔️ Transparency.
➖ Animations are supported but usually where an MP4 would make more sense...
❌ Not good for photographs as only 256 colour.
❌ Compression is generally beaten by PNG which is also well supported.
Bonus tip: Sometimes you can reduce an image to 256 colours without any real difference. Saving as a GIF or 256 colour PNG can then result in a much smaller file than a 24bit PNG.
JPEG's are most commonly used to hold 24bit / true colour photographic images. They are lossy which means that some detail does get lost when saving to this format. Most JPEG tools offer a choice between quality / detail and file size. In general the higher the quality the larger the image. As they lose detail when saving, they are not suitable for certain tasks. Like GIF's, the JPEG format has been around for decades and can be viewed and edited by most programs.
✔️ Good for photographs on websites.
✔️ Well supported.
❌ Loss of detail due to compression means not good as a final / archive format.
❌ Compression is generally beaten WebP and JPG XL.
This is a recent format that aims to improved on JPEG's. It offers better quality lossy images, an option to recompress a JPEG without quality loss and even an (up to) 32bit lossless mode with great compression. Despite all this, it is not supported by browsers which means that it will likely not gain much general popularity.
I think JPEG XL will be more used as an archival format. Converting a JPEG to XL using the correct tool can save around 20% of the space used without any damage to the original image and the lossless mode beats PNG.
✔️ Lossless mode means good for archive use
✔️ Lossless test beat both PNG and WebP!
✔️ Transoding JPEG's to XL saves space without detail loss.
✔️ Lossy compression better than JPEG's.
❌ Slower compressing / decompressing compared to JPEG / PNG.
❌ No browser support limits it's usefulness.
QOI is a simple lossless method for storing 24bit images. The compression level is not great compared to the other methods listed on this page but it has two major advantages, QOI is simple to implement and is very very fast to decode. Its main use would be anywhere an uncompressed bitmap is being currently used, suggested uses have been in games for streaming textures.
✔️ Easy to implement so great for personal projects.
✔️ Very fast encoding and decoding compared to PNG.
❌ Compression is not as good as PNG.
PNG was made as an improved replacement for GIF. It supports up to 32bit / true colour images and saves them losslessly with good compression, transparency is also supported. They are supported by most applications. The main things against them is that compression can be (comparatively) slow, though this is not really an issue given hardware speeds. Also newer formats like WebP and JPEG XL can offer better compression.
✔️ Excellent support in applications.
✔️ True colour lossless support.
❌ Slow Compression / Decompression speed.
❌ Compression is beaten by newer formats such as WebP and JPEG XL.
Bonus tip: Run any saved PNG through OptiPNG, through a variety of methods it can make PNG's much smaller. For low colour PNG's, the difference can be huge!
Bonus tip 2: Sometimes you can reduce an image to 256 colours without any real difference. Saving as a GIF or 256 colour PNG can then result in a much smaller file than a 24bit PNG.
WebP is Google's attempt of a JPEG/PNG replacement. It can offer better compression in both lossy and lossless images compared to both JPEG and PNG.
✔️ Great compression. My simple tests show 20% better than PNG!
✔️ As it's from Google, it has good browser support.
➖ Loses a mark for no 32bit Windows version listed on their page...
❌ Decompression is slower compared to PNG and JPG.
The table below shows a test image (kodim23.qoi from the QOI test images) saved in a variety of formats. Load time is taken from IrfanView, other applications may be faster or slower loading. As with all statistics, your results may vary!
| Format | File Size (KB) | Load Time (ms) |
|---|---|---|
| JPEG XL | 374 | 562 |
| QOI | 660 | 31 |
| PNG | 545 | 32* |
| WebP | 415 | 156 |
* This is close to the QOI in part due to the small image size, tests on a larger (1080p) image show QOI is 3x faster loading.
The table lists JXL as the smallest and QOI as the fastest, yet neither would be suitable for a web page! For a web page and looking at the table, WebP seems like the best option but depending on your visitors, you may need to offer PNG as a fall back to support older browsers. At that point you may need to also consider the space / cost required to store two of each image...
Created
(11/08/2024)