Choosing the Right Image Format: A Practical Guide From the Compression Side

Once an image leaves your server, you lose control over how it's rendered. A common pitfall is serving a high-efficiency WebP while treating the JPEG fallback as an afterthought. If the fallback is set to a low quality, legacy clients like Outlook display something blurry and full of artifacts, and the optimization becomes a liability.

Format choice depends on the image's final destination: not just the browser, but the email client, the CMS, and any platform that might re-encode or reject your file.

Quality Setting Matters More Than Format

The specific extension often matters less than the quality of the export. Quality 80 is not a universal scale; every encoder maps the number to its own quantization tables, so cross-format comparisons at identical settings can be misleading. See Compression Artifacts Explained for more on this.

The useful question is the breaking point: at what size does a specific image start to fail? A well-tuned JPEG at quality 82 can look better than a WebP exported at 65, even when the WebP wins on bytes. The format sets a compression-efficiency ceiling; the quality setting decides where you actually land.

Where WebP Falls Short

WebP is a strong default for the general web, but it has edge cases. At moderate quality settings, a WebP can look more processed than a JPEG at a slightly higher setting because the two encoders optimize different internal parameters. On a given image, the only way to know which wins is to compare the two outputs directly.

JPEG Still Wins on Compatibility

JPEG, standardised in 1992, still handles the majority of photographic images on the web. The reason is universal compatibility.

A JPEG opens correctly on a modern MacBook or a decade-old Android phone, works in print shops, ad networks, legacy CMSes, and government forms - without fallbacks, content negotiation, or feature detection. The theoretical efficiency of a newer format is irrelevant if the image fails to render where it's needed.

AVIF: Maximum Compression, Real Tradeoffs

AVIF routinely produces files 30% to 50% smaller than JPEGs at equivalent perceived quality. At very low bitrates the gap is particularly wide - a 25KB AVIF often looks better than an 80KB JPEG. The underlying AV1 codec is a genuine generational improvement over JPEG, but there are practical tradeoffs.

Encoding is slow. Re-encoding a large batch of product images in AVIF can take roughly an order of magnitude longer than the same batch in WebP. You can reduce the encoding effort to save time, but that typically gives back much of the size advantage.

For a high-traffic hero image served millions of times, the extra encoding time to save 50KB per request is worth it. For a low-traffic blog post or a large catalog that changes frequently, that cost becomes a burden on the build pipeline.

Tooling is also still catching up. Photoshop has supported AVIF since version 23.2 (2022), but many workflow utilities still can't open it natively, which makes debugging rendering or colour-profile issues slower. A reasonable compromise is to use AVIF for hero images and high-value placements, and WebP or JPEG for the bulk of the library.

The PNG Trap

Many editors save photographs as PNGs under the impression that "lossless" automatically means better. While the impulse to preserve every pixel is understandable, a photographic PNG will often be five to ten times larger than a well-compressed JPEG. At normal viewing sizes, there is usually no perceptible difference in quality. Because PNG compression relies on finding repeated patterns - which natural photographs rarely have - you end up paying an enormous bandwidth tax for a guarantee of quality that no one actually sees.

This habit frequently leads to e-commerce sites where each product image weighs in at 3MB or 4MB. A category page displaying twelve of these products results in over 40 megabytes of data for a single load. When the inevitable complaints about slow mobile performance arrive, the culprit is clear: the images alone weigh more than most entire websites.

Despite these drawbacks, PNG remains the ideal choice for screenshots, diagrams, and any graphic with baked-in text. The format is designed to preserve sharp boundaries and exact color values. While a screenshot saved as a JPEG will show visible blur or "mosquito noise" around text and UI edges, the PNG version remains pixel-perfect.

The Transparency Tax

Transparency is a requirement that sounds simple but is secretly expensive. When an image needs a transparent background, JPEG is automatically off the table, eliminating the most compatible and battle-tested format from consideration. You are then forced to choose between PNG, WebP, or AVIF. While these all support transparency, none of them share the universal reach of a JPEG.

For web delivery in 2026, WebP with transparency is usually the sweet spot because browser support is universal and file sizes remain reasonable. However, it is always worth asking if you actually need transparency at all. Many product photos sit on transparent backgrounds even when the page design uses a solid white background anyway. In those cases, placing the product on white and exporting it as a JPEG can save 40% in file size. Transparency is often a workflow habit rather than a delivery requirement, and visitors pay the price for that oversight.

There are certainly valid cases for transparency, such as product images on dynamic backgrounds or UI elements on varied surfaces. But these use cases are often narrower than people assume. If your background is fixed, you are better off using a format that doesn't pay the transparency tax.

GIF and Animation

By 2026 standards, GIF is one of the worst image formats still in active use. It persists for reasons that have nothing to do with technical merit, as it is limited to 256 colors and offers only basic transparency. A five-second GIF of a product demo can easily weigh 15MB, whereas an equivalent MP4 would be under 1MB. This isn't just a minor discrepancy; it is a massive difference in efficiency.

Still, it would be unrealistic to avoid GIFs entirely since the format is still culturally everywhere, from Slack reactions to email embeds. If you are creating animations for your own website where you control the delivery, a muted, autoplaying MP4 or a WebP animation will provide better quality at a fraction of the size. But if you need content that works across every messaging app and social platform, GIF remains the lowest common denominator.

SVG: The Format That Isn't About Compression

SVG stands apart from other formats because it is not based on pixels. Instead, it describes shapes mathematically using paths, curves, fills, and strokes. This allows the format to scale infinitely while compressing beautifully with zip, as the file is essentially just XML text. Consequently, an SVG often weighs only a fraction of an equivalent PNG.

A logo that weighs 50KB as a PNG might be only 3KB as an SVG, yet it will look sharper on every screen from a smartwatch to a 4K monitor. For anything originating in a vector design tool - such as logos, icons, or simple illustrations - SVG is the correct answer. However, the format is not suitable for photographic or highly complex visual content. Using SVG for a complex illustrated background often results in a file larger than a standard PNG.

Where Format Choice Has Measurable Impact

Some format decisions have a measurable business impact, while others are purely academic. These are the specific areas worth your time:

• The hero image. As the large, above-the-fold content that loads first, this is the one image per page that justifies AVIF encoding time and aggressive optimization. You should test several quality settings to find the lowest point where the difference remains invisible, as these savings propagate across every single pageview.
• Product thumbnails. Because these are viewed at small sizes and appear in large numbers, aggressive compression is necessary. A Quality 60 or 65 setting in WebP is often sufficient for a 200px thumbnail. Reducing a category page of 40 thumbnails from quality 85 to 65 can save a full megabyte, which translates to seconds of load time on mobile devices.
• User-uploaded content. This is a difficult area because you do not control the input. Users often upload PNGs of photographs or JPEGs of screenshots. A reliable pipeline should detect what the image actually is and re-encode it appropriately. Many teams build a decision layer that checks dimensions, color count, and edge sharpness to determine the ideal output format and avoid bloated files.
• Email images. Email is where modern format strategies often fail. Since Outlook does not support WebP and many corporate clients lag behind browser engines, you should stick to JPEG for photos and PNG for graphics. In this context, the cost of using a modern format like WebP is a broken image placeholder instead of a successful sale.

A Format Picker for the Common Cases

The most accurate format recommendation always depends on the specific image you intend to display. You will encounter photos where a JPEG at quality 82 outperforms a WebP at the same setting, simply because the image contains fine textures in dark regions that play to JPEG's historical strengths. Similarly, there are screenshots where a lossless WebP is 40% smaller than a PNG, and simple graphics where AVIF's encoding overhead actually produces a larger file than a standard PNG.

Format comparison charts usually show averages across vast test sets, but your image is not an average. It is a specific piece of content with its own characteristics. The only way to know for certain which format and quality setting produce the ideal result is to compress the file both ways and compare the outputs.

For a practical, day-to-day workflow, follow these guidelines:

• Use WebP as your default for general web delivery where browser support is modern.
• Stick to JPEG when universal compatibility is a non-negotiable requirement, like in email.
• Choose PNG when you need lossless fidelity for screenshots or graphics with text.
• Reach for AVIF when high traffic volume justifies the extra encoding investment.
• Utilize SVG for any content that originated as a vector.

For the images that matter most - hero shots and key product photos - spend a few minutes testing. Check the file size, inspect the output at 100%, and pick the best tradeoff for that specific image.