Image Optimization: The 2026 Practical Guide
Images are usually the heaviest thing on a web page, which makes them the single biggest performance opportunity most sites are leaving on the table. Optimizing them well — the right format, the right size, delivered the right way — often cuts page weight in half and directly improves your Core Web Vitals.
The short version
Serve modern formats (AVIF or WebP) with a JPEG fallback, size images to how they actually display using srcset, lazy-load anything below the fold, compress sensibly, and always set width and height to prevent layout shift. Run a scan to see how heavy your images are.
1. Choose the right format
Format is the biggest lever. Match it to the kind of image:
| Format | Best for | Notes |
|---|---|---|
| AVIF | Photos, complex images | Smallest files; excellent quality per byte |
| WebP | Photos, graphics | Smaller than JPEG/PNG; near-universal support |
| JPEG | Photos (fallback) | Universal; use for older-browser fallback |
| PNG | Graphics needing transparency | Lossless but large; prefer WebP/AVIF where possible |
| SVG | Logos, icons, line art | Vector, scales infinitely, tiny for simple shapes |
Use the <picture> element to offer AVIF first, then WebP, then a JPEG fallback, letting each browser pick the best format it supports:
<picture>
<source srcset="/img/hero.avif" type="image/avif">
<source srcset="/img/hero.webp" type="image/webp">
<img src="/img/hero.jpg" width="1200" height="675" alt="...">
</picture>2. Serve responsive sizes with srcset
Sending a 2000-pixel image to a phone that displays it at 400 pixels wastes most of the download. Provide several sizes and let the browser choose based on the device with srcset and sizes:
<img src="/img/photo-800.webp"
srcset="/img/photo-400.webp 400w, /img/photo-800.webp 800w, /img/photo-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="800" height="450" alt="...">3. Lazy-load below the fold
Add loading="lazy" to images that start off-screen so the browser defers loading them until the user scrolls near. This frees bandwidth for what’s visible immediately. One critical exception: never lazy-load your LCP image — it should load as early as possible.
4. Compress sensibly
Most photos look identical at a moderate quality setting yet weigh far less than a maximum-quality export. Compress until you can just start to notice a difference, then step back one level. Strip unnecessary metadata, and for SVGs, run them through a minifier to remove editor cruft. Because images are already compressed, don’t run them through Gzip or Brotli — that only wastes CPU.
5. Set dimensions to protect CLS
Always include explicit width and height attributes, as shown in the examples above. They let the browser reserve the right amount of space before the image loads, preventing the page from jumping — a common and easily avoided cause of poor Cumulative Layout Shift.
Frequently asked questions
Should I switch everything to AVIF?
AVIF gives the smallest files, but pair it with a WebP or JPEG fallback via the <picture> element so every browser is covered. That way you get the savings without breaking older clients.
Does lazy loading hurt SEO?
No, when done correctly. Use native loading="lazy" for below-the-fold images only, and keep your main content and LCP image eagerly loaded so crawlers and users see them right away.
What size should my images be?
No larger than the maximum size they display at, accounting for high-density screens. Use srcset to serve smaller versions to smaller devices rather than one oversized file to everyone.
Related guides
What Is TTFB (Time to First Byte)?
What Time to First Byte measures, what counts as good, and the most common causes of a slow TTFB.
Read →Performance & Core Web VitalsCore Web Vitals Explained for Non-Developers
LCP, INP and CLS in plain language — what Google measures, the thresholds, and how they affect rankings.
Read →Performance & Core Web VitalsHow to Improve Largest Contentful Paint (LCP)
Practical, prioritized steps to bring LCP under 2.5 seconds, from image handling to render-blocking resources.
Read →Check your site against this guide
Run a free ScanOpsPro scan and see how your site handles the fundamentals.
Run a free scan