The Most Efficient Web Image Formats. Use Cases For Different Types Of Images.

TL;DR

The article compares the most commonly used web image formats, including AVIF, WEBP, SVG, JPG XL, JPG2000, GIF, PNG, and JPG, based on factors such as resolution, image quality, file size, and cross-browser compatibility.

Through our research and testing of different image formats, we provide readers with insights into the most efficient image formats for various use cases, such as displaying photographs and complicated graphics, not-optimized vector illustrations, vector illustrations, and icons.
It also explains the advantages and disadvantages of each format and offers tips on choosing the most effective format for web imagery.

Introduction

When it comes to displaying images on the web, choosing the right file format is critical in terms of image quality, website performance, and sustainability. In our previous article, How To Choose The Best Image Formats For The Web, we provided our readers with a comprehensive guide on the best image file format for the web, described all common image file types and their usage, and explained their pros and cons.

Theory and practice are the same important, but nothing is more convincing than "crush tests" made on real examples. That's why we decided to conduct an experiment and test common image types used for different purposes to check which one performs the best in each case. In our tests, we approached the evaluation from the perspective of an average user who may not be well-versed in codecs. Additionally, we used the default settings whenever we saved a graphic, for example, from Photoshop. When saving a JPG file, we always chose the best quality option. Of course, we didn't include in test raw image formats like TIFF file (Tagged Image File Format) because they are not a file type used on the web.

We also attempted to use the same tool for all formats. However, we needed to use a dedicated converter due to limited support for formats like JPG XL. Additionally, we discovered that the efficiency of specific formats, such as GIFs (Graphic Interchange Format), can vary significantly.

Disclaimer

Disclaimer: This comparison is far from perfect. We approached this comparison from a designer's perspective, considering that designers, editors, and content creators often upload images to websites themselves. Usually, developers convert images using APIs, but for this comparison, we created all images using Photoshop (which might add additional metadata to the image, so we're aware of this limitation). However, for AVIF and JPEG XL formats, we used the converter available at https://convertio.co/.

A user on Twitter, Jyrki Alakuijala (@jyzg), suggested that for every format, we should use the same approach as professionals would use: Mozjpeg (or even jpegli) for JPEG, cwebp/dwebp for WebP, avifenc/dec for AVIF, cjxl/djxl for JPEG XL, gifski for GIF, and zopflipng for PNG. Ideally, we should create a script that runs the codecs. We appreciate this valuable input, and future comparisons may take these suggestions into account.

The best image format for photography - use case

In the test conducted to compare various image formats, we downloaded single image files from the Unsplash stock photography website. The online conversion tool, convert.io, was then utilized to transfer the downloaded image into different formats, including JPG, PNG, WEBP, AVIF, HEIFC, and JPG XL. This process allowed for a comprehensive comparison of the formats based on file size, image quality, and compatibility across web browsers and devices.

To provide a comprehensive comparison, we compiled the results in a table outlining the key attributes of each format. This side-by-side analysis helped us identify the most suitable image format based on the needs and priorities. It also enabled us to check whether it maintains high-quality visuals, ensures fast loading times, or maximizes cross-platform compatibility.

Unsplash stock photography

In the initial test, we started by saving images in a resolution of 600x900 pixels - a typical size for web displays. Following that, we decided to test smaller file sized images with a resolution of 3993x6001 pixels to further evaluate the performance of different formats. By comparing the results between these two resolutions, we gained insights into how each format performs with various image sizes and how they reduce the file size, helping to determine the optimal format for different use cases and scenarios.

Photography - use case. Image resolution: 600 x 901 pixels

In the photography use case on the website, AVIF and WebP image formats are the best choices.

Examine the efficiency of the AVIF format. When displaying images in AVIF, the file size is reduced to just 2% of the final weight of a PNG file.

Photography - use case. Resolution: 3993 x 6001 pixels

Still, WebP and AVIF image formats are the most recommended choices.

Upon comparing the two tables, some intriguing insights emerged:

Bear in mind that the outcomes may vary significantly depending on factors like compression type, codec, etc. The presented results are meant to illustrate the scale of the differences rather than provide an exhaustive comparison.

Long story short - if you want to display a photo on a website, go for an AVIF. If you need to edit it, go for a JPG than PNG. PNG is a lossless image format, whereas JPEG is a lossy compression format. Remember that if your photo contains any custom-added graphics or text, a JPG might not be a very effective format because the typography may lose quality of the image.

Image format used for a complicated graphic - use case

In the second test, we experimented with a raster format for graphics created by our illustrator, Zuza. These web graphics can be found on the Bejamas website. What are your predictions regarding the best-performing format for this type of image?

An illustration by Zuza Gadomska created for Bejamas website

Complex illustration or graphic use case. Resolution: 1080 × 1080 pixels.

In this case, consider using PNG when WebP format is not available.

In this case, consider using a PNG (even if it ranks last) as a graphic file format unless a WebP image file format is available. Why? Both GIF and JPG experienced a significant drop in quality, despite using the highest quality image setting. So, if you need to reuse the image in Figma and want to make sure it looks good, it's still better to use a PNG image. As far as JPG XL and JPG 2000, they are simply not widely supported across various software applications.

Additionally, remember the golden rule: when an image has sharp edges and lines, it may appear blurry in JPG and GIF formats. Keep this in mind when choosing a format for your images.

An image file with not optimized vector illustration - use case

The following example is from the Dodonut website. We were searching for an artist who could offer a funny style that met our requirements, such as:

Illustration for Dodonut website

You might think the best format for this image would be an SVG because it is a vector format. Unfortunately, that wasn't the case. Why? First, the illustration wasn't initially created as a vector image format – it was made in Procreate and then converted to vectors. As a result of this conversion, Procreate generated thousands of anchor points. If you check the outline mode in Illustrator, you'll see that the dots are positioned very close to each other.

In this case dots are positioned very close to each other as this illustration was converted to vector image.

This image serves as a great example of when to use PNG-8 conversion. We will demonstrate how different codecs and sources affect the final asset. As you can see in the table, the outcome depends on the formats from which an image is converted – I presented this using the WebP example.

Not optimized vector illustration - use case.

Formats such as AVIF and WebP perform best, but the source file influences the final results.

In summary, it is crucial to consider the following factors when selecting the appropriate format for each use case:

Image format to use vector-based illustration - use case

The next example features an illustration created in Illustrator, which is fully vector and designed as a vector from scratch. We chose a more complex illustration to evaluate its performance across various formats. Let's see how it fares in different scenarios.

Vector illustration created by Justyna Lasota for Dodonut website.

Vector-based illustration - use case.

Undoubtedly, SVG is the safest format to use and performs quite well in the case of vector-based illustration.

From this test, we can draw a few conclusions:

These findings can help guide your decisions when selecting the appropriate image format for your projects.

File type for icons - use case

The final test focused on small website elements, precisely simple icons. We took a Bluetooth icon from the Feather Icons set and saved it in various graphics formats for comparison.

Bluetooth icon

Icons - use case.

In this case, an SVG is the best choice.

An SVG is the recommended choice in this category, even though WebP file format may offer better results in some cases. The primary reason for choosing an SVG is its excellent support from HTML and CSS, which provides a significant advantage. Additionally, the file size of WebP depends on the source format and codec, and in most cases, you may not achieve better results than with an SVG. Overall, an SVG remains a reliable and efficient option for websites.

PNG, JPEG, WEBP, vector file formats - when to use which web image formats?

Summary

In conclusion, selecting and using an image in the appropriate format for your project is essential for optimizing user experience and website performance. Choosing an adequate image format for your needs and purpose can make the web faster, more user-friendly, and more sustainable. Our tests evaluated various formats for the web, such as JPG, PNG, AVIF, WebP, and SVG, for different types of image files, including photos, raster image files, illustrations, and icons. The results emphasize the importance of choosing the right format based on the specific use case, with AVIF and WebP often outperforming others in many situations. However, an SVG stands out for its versatility, adaptability, and ease of animation using CSS or JavaScript. While the large variety of image formats may seem overwhelming, we hope that our profound comparison of different image file types on the web "in action" can help you place your image formats that support your strives to boost your website performance. Here are the final hints for you when you wonder which image formats to choose:

By understanding the strengths and limitations of each format, you can make informed decisions to ensure optimal results in your digital projects.

References