PNG vs JPEG vs WebP: Choosing the Best Image Format for the Web

Why format choice matters more than compression settings

Choosing the wrong image format is the most common and costly image performance mistake on the web. Using PNG for a photograph can produce a file 10× larger than the equivalent JPEG. Using JPEG for a logo or screenshot produces visible artefacts and a larger file than a well-compressed PNG. Getting the format right first, then optimising, is the correct order of operations.

This guide covers the three formats that account for over 95% of web images: PNG, JPEG, and WebP.

JPEG

JPEG (Joint Photographic Experts Group) was designed in 1992 specifically for photographic images. Its lossy compression algorithm works in the frequency domain and is specifically tuned to exploit the limitations of human colour vision — it discards high-frequency detail that most people cannot perceive.

Best for: Photographs and photorealistic images. Any image with smooth gradients, complex textures, and millions of colours.

Not suitable for: Images with sharp edges, text, line art, logos, or flat colours. JPEG's block-based compression creates visible artefacts at these edges that are both ugly and, ironically, larger than the equivalent PNG.

Typical file size: A 1200×800 photograph at quality 80 is typically 150–300 KB. The same image as PNG would be 2–4 MB.

Quality settings: 85 is a widely-used sweet spot — good quality with significant compression. Below 70, artefacts become objectionable for most images. Above 90, size increases rapidly for minimal quality gain.

Does not support: Transparency (alpha channel). If you need transparency in a photographic image, use PNG-24 or WebP.

PNG

PNG (Portable Network Graphics) was designed in 1995 as a lossless, patent-free replacement for GIF. Its compression is always lossless — every decompressed PNG pixel matches the original exactly. It supports full alpha transparency and bit depths from 1 to 16 bits per channel.

Best for: Screenshots, UI elements, logos, icons, diagrams, charts, and any image with hard edges, text, transparency, or flat colours. Also the right choice for working/master files that will be edited and re-saved.

Not suitable for: Photographs — lossless compression of photographic images is inefficient because there is little spatial redundancy to exploit. A photograph as PNG will be 5–10× larger than an equivalent-quality JPEG.

Typical file size: A screenshot of a web page at 1440×900 is typically 200–600 KB as PNG. A simple logo might be 5–30 KB. Photographs are 2–8 MB.

Supports: Full alpha transparency (PNG-24/32). Also 8-bit palette mode (PNG-8) for images with 256 or fewer colours.

WebP

WebP was developed by Google and released in 2010. Unlike JPEG and PNG, which are single-mode formats, WebP supports both lossy and lossless compression within the same container format. It also supports animation and alpha transparency in both modes.

WebP lossy: Based on VP8 video frame encoding. Achieves 25–35% smaller files than JPEG at equivalent visual quality. Best for photographs.

WebP lossless: Uses a sophisticated transform chain. Achieves 15–25% smaller files than optimised PNG for equivalent images. Best for screenshots, logos, and UI assets.

Browser support: All major browsers (Chrome, Firefox, Safari 14+, Edge). Universal for web use in 2025.

Best for: Everything, if you can use it. WebP dominates both JPEG and PNG in file size. The main reasons to use JPEG or PNG instead are: compatibility with non-browser software, distributing files to clients whose tools may not support WebP, and build pipelines that do not yet handle WebP.

Quick-reference decision matrix

• Photograph, web delivery: WebP lossy → JPEG as fallback
• Screenshot / UI / logo, web delivery: WebP lossless → PNG as fallback
• Photograph with transparency: WebP lossy → PNG-24 as fallback (JPEG cannot do transparency)
• Working / master file: PNG or TIFF (always lossless for source files)
• Animation: WebP animated or MP4 video → GIF only as last resort
• Simple icon / vector art: SVG first, then PNG/WebP

Serving WebP with a PNG/JPEG fallback

The HTML <picture> element allows you to serve WebP to supporting browsers with automatic fallback:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description">
</picture>

Browsers that support WebP use the <source>; others fall back to the <img>. This gives you the best of both worlds without sacrificing compatibility.

What about AVIF?

AVIF (AV1 Image File Format) is a newer format that achieves even better compression than WebP, particularly at low quality settings. Browser support is now good (Chrome, Firefox, Safari 16+). The main practical obstacle is slow encoding — AVIF encoding can be 10–100× slower than JPEG or WebP, which makes on-the-fly or batch generation expensive. For high-traffic sites where encoding can be done ahead of time, AVIF is worth exploring for photographs.

To quickly convert and compress your PNG or JPEG images to losslessly-optimised formats, try compressanimage.com.