How to choose the right image format for your website
JPEG, PNG, WebP, AVIF — which one should you use? A practical guide to picking the best format for every image on your site.
Choosing the wrong image format is one of the most common performance mistakes on the web. A JPEG photo that should be 200 KB ends up as a 2 MB PNG. A WebP image gets served to a browser that does not support it. Here is how to make the right call every time.
The quick decision tree
Ask yourself three questions. Does the image need transparency? Use PNG or WebP. Is it a photograph or complex gradient? Use JPEG, WebP, or AVIF. Does it have sharp edges, text, or logos? Use PNG.
For modern browsers, WebP is the best default — it supports both transparency and lossy compression, and it is supported by 97% of browsers. Use a JPEG fallback for the remaining 3% via the <picture> element. If file size is your absolute priority and your audience uses modern browsers, AVIF offers the best compression ratios.
JPEG: when compatibility matters most
JPEG has been the web standard for photographs since the 1990s. Every device, CMS, social media platform, and email client supports it. The compression works by dividing the image into 8x8 pixel blocks and discarding high-frequency detail that the human eye is less sensitive to.
Use JPEG when universal compatibility is non-negotiable: email attachments, CMS uploads, social media, and legacy systems. The quality slider of 75-85 offers the best balance of file size and visual quality for most photographs. Below 50, block artefacts become visible, especially in sky gradients and shadows.
PNG: precision and transparency
PNG uses lossless Deflate compression with a pre-processing filter that makes each row of pixels more compressible. It preserves every pixel exactly, supports full alpha transparency, and handles sharp edges and text perfectly.
Use PNG for screenshots, logos, UI elements, infographics, and any image with text. The trade-off is file size — a photograph saved as PNG can be 3-5 times larger than the same image as JPEG. For photographs that need transparency, consider WebP instead, which supports alpha while keeping file sizes much smaller.
WebP: the modern default
WebP was designed specifically for the web. It supports lossy compression (based on VP8 video intra-frame coding) and lossless compression (using spatial prediction and colour cache). Lossy WebP is typically 25-35% smaller than JPEG at the same quality, and lossless WebP is 20-30% smaller than PNG.
Use WebP as your default format for web images. Browser support covers Chrome, Firefox, Safari (14+), Edge, and Opera — over 97% of global usage. Serve WebP with a JPEG fallback using the <picture> element for maximum compatibility.
AVIF: maximum compression
AVIF uses the AV1 codec and achieves 30-50% better compression than WebP. It supports HDR, wide colour gamut, 10/12-bit depth, transparency, and lossless mode. Netflix and YouTube use the same underlying codec for video streaming.
Use AVIF when file size is critical and your audience uses modern browsers (92% support). It is ideal for photographic content on performance-sensitive pages. The trade-off is encoding speed — AVIF compression takes longer than JPEG or WebP, which is why our batch compressor processes images in parallel across all CPU cores.
A practical workflow
Start with our compressor's Auto mode. It analyses each image and picks the best format and quality setting automatically. For most images, Auto produces the smallest file size at acceptable quality. If you need manual control, switch to Custom mode where you can set format, quality, target size, and resolution independently.