Blog / Design principles

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

Abstract image

Author

Tomasz Osowski

Published

Read time

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.

Table of contents:

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.

The view of room with little window, an office chair, a desk with lamp, computer, camera on it.
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
1AVIFGood19.7 kBHighly recommended 
2JPG XLGood92 kBNot recommended (not supported)
3WebPGood167 kBRecommended (the most accessible format)
4GIFMedium245 kBNot recommended
5JPGGood380 kBRecommended if others not available
6JPG 2000Good565 kBNot recommended
7PNGGood668 kBNot recommended
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
1AVIFGood204,78 kBHighly recommended 
2WebPGood665 kBThe most recommended
3JPG XLGood1,993 MBNot recommended
4JPGGood2,313 MBRecommended if others are not available
5JPG 2000Good10,6 MBNot recommended
6GIFMedium12 MBNot recommended
7PNGGood15,1 MBNot recommended
Still, WebP and AVIF image formats are the most recommended choices.

Upon comparing the two tables, some intriguing insights emerged:

  • For smaller images, GIF and JPG XL perform better regarding the large file size.
  • PNG file format consistently remains the heaviest format.
  • Generally speaking, AVIF and WEBP images are always the most efficient choices.

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 abstract illustration
An illustration by Zuza Gadomska created for Bejamas website
Complex illustration or graphic use case. Resolution: 1080 × 1080 pixels.
1AVIFGood89,18 kBHighly recommended 
2WebPGood221 kBThe most recommended
3JPG XLGood318 kBNot recommended
4JPGMedium483 kBNot recommended (edges become blurred)
5GIFMedium631 kBNot recommended
6JPG 2000Good1,6 MBNot recommended
7PNGGood1,9 MBNot recommended
8----
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:

  • Limited use of colors in the illustrations
  • SVG format
  • Simple shapes
  • Aesthetically pleasing images
Dodo bird sitting in front of computer
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.

The outline with a fragment of Dodo bird head from the previous illustration
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.
1AVIF (from PNG-8)Good58,67 kBRecommended
2WebP (created from PNG-8 source image)Good74 kBThe most recommended
3PNG-8Good106 kBRecommended
4GIF (from PNG-8)Medium146,37 kBNot recommended
5AVIF from JPGGood175,6 kBRecommended
6GIF (from JPG highest)Good208,57 kBNot recommended
7JPG (Lowest compression)Medium694 kBNot recommended
8PNG (standard)Good800 kBSecond choice
9WebP (from jpg best quality)Good890 kBRecommended
10JPG (the best quality)Good, but we can still notice blurriness2,9 MBNot recommended
11SVG (optimized by Illustrator)Good2,95 MBNot recommended
12JPG 2000Good3,4 MBNot recommended
13SVG (exported from Procreate)Good10,10 MBNot recommended
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:

  1. Optimize source material: Optimizing the original material can significantly impact the final asset, even when automated conversions are implemented on a website.
  2. SVG performance - while an SVG is a vector image, it doesn't always deliver the best performance, as it depends on the image structure and contained image data.
  3. PNG-8 for limited colors - for images with fewer than 256 colors, consider using a PNG-8, which is extremely efficient and can be selected by default in Illustrator.
  4. AVIF and WEBP - generally, AVIF and WebP formats outperform others, but the final results are influenced by the source file. Understanding these factors is crucial in making informed decisions about image formats for your projects.

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.

Dodo bird keeping the view of the browser with website
Vector illustration created by Justyna Lasota for Dodonut website.
Vector-based illustration - use case.
1AVIF (from WebP)Good31,04 kBRecommended
2SVG (From Illustrator)Good33 kBThe most recommended
3WebPGood45 kBRecommended
4SVG (from Figma)Good55 kBRecommended
5AVIF (from PNG)Good67,9 kBRecommended
6PNGGood128 kBRecommended
7JPG 2000Good322 kBNot recommended
8JPG Poor (no transparency)400 kBNot recommended
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:

  1. Optimal SVG tool - Illustrator appears to be the best image editor for optimizing SVG files.
  2. SVG is also the safest format to use. Even if you are uncertain about the codec, it will generally perform quite well.
  3. The greatest advantage of an SVG lies in its ability to be easily animated using CSS or JavaScript, a feature not available in other formats. Furthermore, an SVG allows for the implementation of theme-specific colors, providing versatility and adaptability in design. These unique characteristics make an SVG a preferred choice for a wide range of applications and projects.
  4. Efficient WEBP - a WEBP file is highly optimized and performs well in various scenarios.
  5. Improved JPG 2000 performance - in comparison to a JPG, JPG 2000 performs quite well and better than usual in this specific test.
  6. PNG-8 usefulness - saving the illustration in a PNG-8 format also makes sense.

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.

The icon of Bluetooth
Bluetooth icon
Icons - use case.
1WebP (from SVG)Good138 bytesRecommended
2SVGGood239 bytesThe most recommended 
3PNGGood245 bytesRecommended
4AVIF Good315 bytesRecommended
5Webp (from PNG)Good386 bytesRecommended
6JPG Poor (no transparency)1 kBNot recommended
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:

  • Think about, what is the purpose of your original image - is it photography, a simple illustration, or just an icon?
  • What browsers will encode an image - we recommend choosing the most common so that it is achievable by a broad audience.
  • How do you want to use this file? Do you need a fully editable image or saved into one image layer?
  • Optimize the original source even if you plan image editing and converting.
  • What image editing tools are you capable of using?
  • Prepare your file type for the web - there are different requirements for simple icons and web graphics with transparency and how you will display them.
  • If you have just started working in the web design field, experiment with different image types for web graphics to compare which format is the best that responds to your and your user's needs and makes your website lightning-fast.

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

This article emits ~0.04g of CO2.

Newsletter

Let’s create
digital together

Latest Articles

Discover ideas and insights from our journey to make the web greener and create better digital experiences.

See all 25 articles

Create website that works for both people and the planet.