TL;DR — Quick Summary
Image optimization involves choosing the right format (WebP 30% smaller than JPEG, AVIF 50% smaller), proper compression (80% lossy quality is visually lossless), responsive delivery via srcset (right-sized per device), and CDN-based transformation. Images are 50–75% of page weight. Optimizing them is usually the single highest-impact performance improvement available.
What is Image Optimization (WebP / AVIF / Responsive Images)?
Image optimization is the comprehensive process of reducing image file sizes while maintaining quality, and delivering the right size to each device. It encompasses:
Format Selection:
- •AVIF — The most efficient modern format. Based on the AV1 video codec, AVIF achieves 50% smaller file sizes than JPEG and 20% smaller than WebP at equivalent quality. Supports transparency, animation, HDR, and wide color gamut. Slower to encode than WebP. Supported by Chrome, Firefox, and Safari (since 16.4).
- •WebP — Google's image format. 30% smaller than JPEG for lossy, 25% smaller than PNG for lossless. Supports transparency and animation. Fast encoding. Universal browser support since 2020.
- •JPEG — The legacy standard for photographs. Still widely used and well-optimized. Use as a fallback for the rare browser that doesn't support WebP/AVIF.
- •PNG — Lossless format for graphics, logos, screenshots with text. Use WebP lossless or AVIF lossless as modern alternatives. PNG is still appropriate for very small icons/sprites.
- •SVG — Vector format for icons, logos, illustrations. Infinitely scalable, tiny file sizes for simple graphics. Not suitable for photographs.
Compression:
- •Lossy — Removes imperceptible visual data. 60–90% size reduction. Use for photographs and complex images. Quality settings: JPEG 80%, WebP 80%, AVIF 60–70% (AVIF quality scale differs).
- •Lossless — Preserves exact pixel-perfect quality. 10–30% size reduction. Use for graphics, logos, screenshots with text, and any image where artifacts are unacceptable.
Responsive Images:
- •`srcset` attribute provides multiple image sources at different widths.
- •`sizes` attribute tells the browser how large the image will display at each viewport width.
- •Together, the browser selects the optimal image source without downloading extras.
- •A 2000px image on a 400px mobile screen wastes 75%+ of pixels. Responsive images eliminate this waste.
CDN Delivery:
- •Image CDNs (Cloudinary, imgix, Cloudflare Images, Bunny Optimizer) automatically convert formats, resize, compress, and cache images on-the-fly based on the requesting device.
- •URL-based transformation: `image.jpg?w=800&format=avif&quality=80` — no build process needed.
- •Eliminates the need for manual image optimization workflows.
WebP / AVIF / Responsive Images Thresholds
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| JPEG quality | 75–85% | 85–95% | > 95% or < 60% |
| WebP quality | 75–85% | 85–95% | > 95% or < 60% |
| AVIF quality | 55–70% | 70–85% | > 85% or < 40% |
| Max image width | ≤ 2000px | 2000–3000px | > 3000px |
Google evaluates the 75th percentile (p75) of real-user field data over a rolling 28-day window.
History & Evolution
Key milestones:
- •1992 — JPEG format published (ISO 10918-1).
- •2003 — PNG format achieves widespread adoption.
- •2010 — WebP format announced by Google.
- •2014 — srcset and sizes attributes standardized for responsive images.
- •2018 — WebP support reaches all major browsers except Safari.
- •2020 — Safari 14 adds WebP support. WebP becomes universally usable.
- •2020 — AVIF format published (based on AV1 codec). Chrome adds support.
- •2021 — Firefox adds AVIF support.
- •2023 — Safari 16.4 adds AVIF support. AVIF becomes universally usable.
- •2024 — JPEG XL abandoned by Chrome. AVIF confirmed as the future standard.
- •2025–2026 — AVIF + WebP fallback is the standard practice. Image CDNs handle format selection automatically.
How WebP / AVIF / Responsive Images is Measured
Image optimization is measured by comparing image file sizes, formats, and delivery against best practices:
Key metrics:
- •Total image weight (target: < 500KB for typical pages).
- •LCP image size (target: < 200KB for hero images).
- •Image format adoption (WebP/AVIF vs legacy JPEG/PNG).
- •Responsive image implementation (srcset coverage).
Tools:
- •Lighthouse 'Serve images in next-gen formats' audit.
- •Lighthouse 'Properly size images' audit.
- •Lighthouse 'Efficiently encode images' audit.
- •Chrome DevTools Network panel (filter 'Img' to see all image transfers).
- •WebPageTest image analysis.
- •Squoosh.app for manual format/quality comparison.
Key rule: Field data (CrUX) determines Google rankings. Lab data (Lighthouse, WebPageTest) is for debugging and iteration.
Common Causes of Poor WebP / AVIF / Responsive Images Scores
Common image optimization failures:
- 1Full-resolution uploads — Uploading 4000x3000px camera images directly to the CMS. These are 3–8MB and far larger than any display size on the page.
- 2Wrong format — Using PNG for photographs (3–5x larger than JPEG/WebP). Using JPEG for graphics with transparency (should be PNG or WebP).
- 3No WebP/AVIF conversion — Serving legacy JPEG/PNG when WebP saves 30% and AVIF saves 50%. Most sites still serve JPEG as the primary format.
- 4Missing responsive images — Serving a single 2000px image to all devices. A 400px mobile screen downloads 4x more pixels than needed.
- 5Missing width/height attributes — Images without dimensions cause CLS when they load (the container expands from 0 to the image's natural height).
- 6LCP image not prioritized — The hero image has no preload hint and no fetchpriority='high', competing with other resources for bandwidth.
- 7Over-compression — Quality set too low (< 60% JPEG) causing visible artifacts. Or quality too high (100%) with no perceptible benefit but 2–3x file size.
- 8No CDN delivery — Images served from the origin server without a CDN, adding 100–500ms of latency for distant users.
Frequently Asked Questions
Use AVIF as the primary format (50% smaller than JPEG) with WebP as fallback (30% smaller). The <picture> element enables this: `<picture><source type='image/avif'><source type='image/webp'><img src='fallback.jpg'></picture>`. Image CDNs handle this automatically via content negotiation.
For photographs: JPEG/WebP at 80% quality (visually lossless but 40–60% smaller than 100%). AVIF at 60–70% (different quality scale). For graphics/logos: use lossless WebP or AVIF. For screenshots with text: use lossless PNG or WebP.
srcset provides multiple image sources at different widths (srcset='small.webp 400w, large.webp 1200w'). sizes tells the browser how large the image will display at each viewport width (sizes='(max-width: 768px) 100vw, 50vw'). Together, the browser selects the optimal source without downloading extras.
For sites with < 50 images: manual optimization with Squoosh/Sharp is sufficient. For sites with 50–500 images: an image CDN saves significant time. For sites with 500+ images (e-commerce, media): an image CDN is essential — manual optimization doesn't scale.
Use image-set() for format selection: `background-image: image-set('bg.avif' type('image/avif'), 'bg.webp' type('image/webp'))`. For responsive sizing, use media queries with different image URLs at different breakpoints. Consider converting background images to <img> elements for srcset support.
Use SVGO (CLI or web app at jakearchibald.github.io/svgomg/) to strip metadata, comments, and editor data. Typical savings: 30–50%. For small icons used frequently, inline SVGs eliminate network requests. For complex illustrations, keep as external files with caching.
Yes, when the desktop image doesn't work at mobile dimensions (e.g., a wide landscape hero that becomes too small on mobile). Use the <picture> element with media attributes for art direction: `<source media='(max-width: 768px)' srcset='hero-mobile.webp'>`.
Images without explicit width and height attributes cause layout shifts when they load — the container expands from 0 to the image height, pushing content down. Always set width and height on <img> elements. Use CSS aspect-ratio for responsive containers.
Significant. A hero image at 2MB JPEG might take 2 seconds to download on 4G. The same image as 200KB AVIF downloads in 200ms — a 1.8s LCP improvement from format change alone. Image format optimization is often the single largest LCP improvement available.
Process uploads server-side: resize to maximum display dimensions (2000px), convert to WebP, compress to 80% quality, generate responsive sizes. Use an image CDN for on-the-fly transformation, or a processing pipeline (Sharp in Node.js, Pillow in Python).
For step-by-step optimization, platform-specific fixes, code examples, and case studies, read our full guide:
The Ultimate Guide to Core Web Vitals: How to Pass All Metrics & Boost Rankings in 2026Struggling with WebP / AVIF / Responsive Images?
Request a free speed audit and we'll identify exactly what's holding your scores back.