Web image formats: JPEG, WebP, AVIF, PNG — which to choose and how to optimise

Images are the primary web performance optimisation lever. Yet choosing between JPEG, PNG, WebP, AVIF or SVG remains a source of confusion. Here is a practical guide based on real-world use cases.

Formats at a glance

• JPEG: lossy compression, ideal for photos. Quality 75-85% = excellent weight-to-quality ratio. No transparency. Universal support.
• PNG: lossless compression, supports transparency. Reserve for logos, icons, screenshots with text. Much heavier than JPEG for photos.
• WebP: Google format, 25-35% lighter than JPEG at equivalent quality. Supports transparency and animation. Excellent browser support (95%+). Prefer over JPEG in most cases.
• AVIF: next-gen format, 40-50% lighter than JPEG. Exceptional quality at low bitrates. Rapidly growing support (Chrome, Firefox, Safari). The future of web image formats.
• SVG: vector format, ideal for icons, logos, illustrations. Infinitely scalable, very lightweight for simple graphics. Do not use for photos.
• GIF: avoid. Limited to 256 colours, often replaced by animated WebP or MP4 video.

Dimensions by use case

• Hero / banner: 1920×1080px max, use srcset to serve 800px on mobile
• Card / thumbnail: 600-800px wide
• Thumbnail: 200-400px
• Favicon: 32×32 and 180×180 (Apple touch icon)
• Open Graph: exactly 1200×630px

Recommended compression levels

For WebP: quality 75-82 for photos, 85-90 for visuals with text. For AVIF: quality 60-70 produces results close to WebP 80. Always compare visually — numbers alone are not enough.

Essential tools

• Squoosh (squoosh.app): visual comparison of formats and compression, directly in the browser
• Sharp (Node.js): image processing pipeline, automatic WebP/AVIF conversion
• ImageMagick: universal CLI tool for batch conversion and resizing
• Cloudinary / Imgix: image CDN with automatic on-the-fly optimisation
• <picture> tag + srcset: serve the right format and size based on browser and screen