You know what I can’t get enough of when building a website? More considerations. Yep, I love questioning every decision I make to the point of complete decision paralysis. After choosing the perfect image for my hero image I now have to ask myself how would I like my image served? On a bed of JPG, a PNG cutlet, with a side of WebP or an amuse-bouche of AVIF? Well I guess that’s why you’re here because you’ve had the same thought. I’m going to look at the these four file types, look at their pros and cons and see if there is an all out winner to use for your next project whilst also considering energy consumption along the way. 

The problem

Even five years ago, jpg and png were the only viable considerations for image delivery for websites. The issue was, even after compression and optimisation the files could still be relatively large. This meant for high traffic websites a large image file could result in increased bandwidth and hosting costs for the company and slow loading times for the viewer. This could even impact SEO rankings. Lazy loading and responsive optimisation could be used to offset these issues but at the cost of user experience and development time. 

Pros and cons. 

JPG

The classic jpg or is it jpeg? I never understood why it had two suffix options and I’m not going to look it up now. 

Pros

• Works everywhere, encodes and decodes quickly.

• Acceptable quality for photographs at moderate compression.

Cons

• No transparency.

• Visible blockiness and “mosquito noise” around edges at lower qualities.

• 8-bit only, so smooth gradients can band more easily than AVIF 10-bit.

Quality notes

• Chroma subsampling hurts small red text and UI details. Fine patterns or dot illustrations can ‘shimmer’ after resizing.

PNG

This guy was my best friend for many years before SVG’s came along. 

Pros

• Lossless by default. Pixel-perfect for UI, icons, flat colour, line art and screenshots.

• Best for tricky transparency, including semi-transparent edges and soft shadows, with no compression artefacts.

• Universal support, predictable rendering.

Cons

• Large files for photographs compared with WebP or AVIF.

• No animation, no lossy option by default.

Quality notes

• PNG typically renders soft shadows and semi-transparent edges more cleanly than lossy WebP at the same file size. If a cut-out or subtle glow looks dirty in WebP, PNG will keep it pristine.

WebP

Generally my go to these days.

Pros

• Much smaller than JPG at like-for-like quality.

• Supports transparency and animation.

• Broad browser support, fast decode.

• Has both lossy and lossless modes, so it can replace PNG in some cases.

Cons

• Lossy alpha can create faint dark fringes around cut-outs and soft shadows.

• Prone to banding or blotchiness in very smooth gradients at low bitrates.

• WebP lossless is not always smaller than PNG for UI sprites or flat graphics.

Quality notes

• Photographs are usually excellent at quality levels between 75-85.

• Text, logos and soft drop shadows can show haloing if you push compression too hard. If you see this, try WebP lossless or switch to PNG or AVIF.

AVIF

The new kid on the block. I’m still a bit wary of this option due to browser adoption uptake. 

Pros

• Apparently the best compression of the bunch for photos, often 20–40% smaller than WebP at similar quality.

• Supports transparency, HDR, wide colour, and 10-bit which reduces gradient banding.

• Very good at soft detail and low-noise areas.

Cons

• Slower to encode, and decoding can be heavier on low-end devices.

• At very low bitrates can smear fine textures or produce slight ringing on high-contrast edges.

• Compatibility is good in modern browsers, but some older apps still lack support.

Quality notes

• Use 10-bit when you can. It preserves smooth skies and soft shadows much better than 8-bit WebP or JPG.

• For crisp line art or small UI elements, AVIF can still introduce minor colour bleeding if encoded with chroma subsampling.

Energy consumption theory 

Both WebP and AVIF are actually video codecs showing just a single frame. When you decode an AVIF image, your browser is essentially doing a mini video decode. Even though the file size of a WebP and AVIF are smaller than a JPG they take more CPU to decode, especially AVIF. 

This made me question which file type is the most sustainable option? Yes the file transfer is much smaller than an AVIF but if an image is viewed 1000 times would the CPU on each of these computers result in higher energy use than file transfer? I asked Chat GPT and this is what they said:

If each version is downloaded 1,000 times, the smallest file size is the most energy-efficient. In practice that usually means AVIF, then WebP, with JPG and especially PNG trailing.

Why:

• The dominant energy cost is almost always data transfer, not decoding on the device. Typical estimates for network energy are on the order of 0.005–0.02 kWh per GB moved.

• Decode energy differences between formats are tiny by comparison. One test measured AVIF only ~30 micro-watt-hours more per image than WebP, which is negligible next to the network cost of moving extra megabytes.

Quick example:

Assume three exports of the same image: JPG 500 KB, WebP 300 KB, AVIF 220 KB.

Viewed 1,000 times with a mid-range 0.01 kWh/GB network intensity:

• JPG: 0.5 GB × 0.01 = 5 Wh for transfer

• WebP: 0.3 GB × 0.01 = 3 Wh

• AVIF: 0.22 GB × 0.01 = 2.2 Wh

Even if AVIF decoding used ~0.03 Wh more than WebP across all 1,000 views, the transfer saving dwarfs it. 

Tests

So we have the theory but it would be great to test each file type against the same image to see how they fair. I thought I would select three common case studies in web design; photography, transparency and product imagery. I’ll be looking at the quality of the image as well as file size.

Conditions

I am using https://picflow.com/ to convert each image. I did use other converters to double check my results. Each image will be set to 85% quality.

Caveats

The images pasted onto this site are no longer in their original converted states as Framer automatically converts everything into AVIFs. I have created a Google Drive folder with the original conversions for your inspection. There may well have been a much better solution for running my conditions, if you have a suggestion then please let me know.

1. Photography

I took this image using a Fujifilm X-T10 way back in 2016. It has a good spectrum of colour and shadow and was shot in HDR so I thought it would make for a good test. 

Test image

View originals

Quality

I can’t see a discernible difference between any of the images here. 

Winner

It has to be WebP, the quality is a close match to the jpg but works out 30kb smaller. Not a huge savings but it’s an improvement. I’m also shocked that the AVIF came out larger than the JPG when it was expected to be the smallest. Perhaps in this scenario it doesn’t play to the AVIFs strengths. 

2. Product imagery

Here are some phone web screens I mocked up in Figma. I included some chunky shadows so we can check for any banding. 

Test Image

View originals

Quality

I had to spend a fair bit of time scrolling between the images to spot any issues. The jpg, AVIF, and png look identical to the original file. The WebP, I could notice some slight banding in the shadows but I really had to pay attention. 

Winner

The AVIF wins this battle, for just an extra 19kb it managed to preserve the image quality to original standards. 

3. Transparency

Here is an image from a previous branding project, it uses portrait photography as well as graphic iconography. 

Test image

View originals

*JPG does not offer transparency support, so the clear background has automatically been replaced with a white background.

Quality

Clearly the jpg loses out here, but the other three are much of a muchness, I can’t spot any differences. 

Winner

Purely down to file size, WebP wins it. 

So which is best?

I think for the time being I would opt for WebP. It is widely adopted over browsers and from our tests is pushing out the smallest file sizes. So from a sustainable standpoint it is the best eco friendly solution. But, keep checking in on AVIF. No doubt, browser adoption will improve and I’m sure compression tools will be more widely available and flexible in the future. 

References:

https://blog.mynl.com/posts/notes/2024-05-21-Energy-Intensity-of-Internet-Traffic/?utm_source=chatgpt.com

https://fershad.com/writing/power-consumption-jpeg-webp-and-avif/?utm_source=chatgpt.com