Image Format Guide for Web Developers (2025)
The Modern Stack
In 2025, your image strategy should be: AVIF as primary, WebP as first fallback, JPG/PNG as final fallback. Use the HTML <picture> element to serve formats based on browser support. Most CDNs (Cloudflare, CloudFront, Fastly) can do automatic format negotiation via the Accept header, which is even simpler.
Format Selection Rules
Photos: AVIF > WebP > JPG. Icons and logos: SVG (vector) or WebP/PNG (raster). Screenshots with text: PNG or lossless WebP. Transparent images: WebP > PNG (WebP is 26% smaller). Animation: MP4/WebM video > animated WebP > APNG > GIF. Thumbnails: AVIF or WebP with aggressive compression (low quality is less noticeable at small sizes).
Responsive Images
Use srcset and sizes attributes to serve different resolutions. Generate 3-4 sizes per image: 400w, 800w, 1200w, and optionally 2400w for retina displays. Combined with modern formats, this alone can cut image bandwidth by 60-80% compared to serving full-size JPGs. Lazy loading (loading='lazy') prevents off-screen images from loading until needed.
The <picture> Element
Use <picture> with <source> elements ordered from most to least preferred: AVIF first, WebP second, JPG/PNG as the <img> fallback. The browser picks the first format it supports. This approach reaches 100% of browsers while serving the smallest possible files to modern ones. Every image on your site should use this pattern unless your CDN handles format negotiation.
Compression Settings
JPG: quality 75-85 is the sweet spot. Below 70, artifacts become visible. Above 85, diminishing returns. WebP: quality 75-80 matches JPG at 85. AVIF: quality 50-65 matches JPG at 85 (different quality scales). PNG: always use maximum compression (level 9) — it's lossless, so higher compression just means slower encoding, not lower quality.
Performance Budget
Target: total image weight under 500KB for the initial viewport on desktop, under 200KB on mobile. Use tools like Lighthouse, WebPageTest, or Chrome DevTools to audit image sizes. Common wins: serving appropriately-sized images (don't load a 4000px image for a 400px thumbnail), using modern formats, and lazy loading below-the-fold images.