Images are the single heaviest asset type on most web pages. According to HTTP Archive data, the median web page transfers over 1 MB of images — more than JavaScript, CSS, fonts, and HTML combined. If your site feels slow, images are almost certainly the first thing to fix.
This guide covers the practical techniques that make the biggest difference: proper sizing, format selection, compression settings, and delivery strategies. Each section links to free tools you can use right now.
Why image optimization matters for performance
Google's Core Web Vitals are now a confirmed ranking signal. Two of the three metrics are directly affected by images:
- Largest Contentful Paint (LCP) — measures when the largest visible element finishes rendering. On most pages, that's an image. A 2 MB hero image on a 3G connection takes 5+ seconds to load, instantly failing the 2.5-second LCP threshold.
- Cumulative Layout Shift (CLS) — measures visual stability. Images without explicit width/height attributes cause layout shifts as they load, pushing content around the page.
Beyond SEO, slow images hurt real metrics: bounce rate, time on page, and conversion rate. Amazon found that every 100ms of latency cost them 1% in sales. Your images don't need to be that fast, but they shouldn't be the bottleneck.
Step 1: Resize to actual display dimensions
This is the single biggest optimization most sites miss. A 4000×3000 pixel photo from a DSLR, displayed in a 800×600 container, wastes 96% of its pixels. The browser downloads 4 MB, then throws away most of it during rendering.
The fix: resize every image to the maximum size it will ever be displayed at. For responsive layouts, that typically means 2x the CSS container width (for high-DPI screens):
- Hero image in a 1200px container → resize to 2400px wide
- Blog content image in a 720px column → resize to 1440px wide
- Thumbnail in a 300px card → resize to 600px wide
- Profile avatar in a 48px circle → resize to 96px
Step 2: Choose the right format
Format selection alone can reduce file size by 30–60% with zero quality difference:
- JPEG — the default for photographs. At quality 80–85%, it provides excellent compression with no visible artifacts. Universal browser support.
- WebP — 25–35% smaller than JPEG at equivalent quality. Supports transparency and animation. Supported in all modern browsers (Chrome, Firefox, Safari, Edge).
- AVIF — 30–50% smaller than JPEG. Even better compression than WebP, but slower to encode. Good browser support in 2026, though some gaps remain.
- PNG — use only when you need lossless quality or transparency for graphics. Never use PNG for photographs — the files will be 5–10x larger than JPEG.
The ideal approach for most websites: serve AVIF or WebP as the primary format, with JPEG as a fallback. The HTML <picture> element or CDN-based content negotiation makes this straightforward.
Step 3: Compress with the right quality settings
After resizing and format selection, compression squeezes out the remaining waste. The key insight: quality 100 is almost never the right setting. Human eyes can't distinguish quality 85 from quality 100 in photographs, but the file size difference is 2–4x.
Practical quality guidelines:
- JPEG 80–85% — the sweet spot for photographs. Produces clean images at 60–70% smaller than quality 100.
- JPEG 70–75% — acceptable for thumbnails, background images, and decorative elements that don't need to be pixel-perfect.
- WebP 75–80% — equivalent to JPEG 85% visually, but at a smaller file size.
- PNG — use optimization tools that reduce the color palette and apply better compression without changing pixels. Savings of 20–50% are typical.
Step 4: Implement responsive images
Even with optimized images, serving a single size to all devices wastes bandwidth. A phone on a 375px screen doesn't need a 2400px image. HTML's srcset and sizes attributes let browsers pick the right image for the current viewport:
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="800"
height="600"
alt="Product photo"
loading="lazy"
/>Generate three sizes of each image: 1x for mobile, 2x for desktop/tablet, and an intermediate size. The browser handles the rest based on the viewport and device pixel ratio.
Step 5: Lazy load below-the-fold images
Images below the fold (not visible on initial page load) should use native lazy loading. This defers loading until the user scrolls near them, reducing initial page weight:
<img src="photo.jpg" loading="lazy" width="800" height="600" alt="..." />Important: do NOT lazy-load the hero image or any image visible in the initial viewport. Lazy loading above-the-fold images hurts LCP. Use loading="eager" (or omit the attribute) for the first visible image, and loading="lazy" for everything else.
The optimization checklist
Run through this for every image on your site:
- Is it sized to actual display dimensions (with 2x for retina)?
- Is it in the right format (WebP/AVIF for web, JPEG for fallback, PNG only for graphics)?
- Is it compressed (quality 80–85% for photos)?
- Does it have explicit width and height attributes?
- Is it lazy-loaded if below the fold?
- Is the hero image prioritized with fetchpriority="high"?
A site that follows all six steps will typically see 70–90% reduction in total image weight, measurably better LCP scores, and zero CLS from images.
The bottom line
Image optimization isn't glamorous, but it's the highest-impact performance improvement most websites can make. Resize to actual display size, use modern formats, compress at quality 80–85, and lazy-load below the fold. Each step takes seconds per image with browser-based tools — and the cumulative effect on page speed, SEO, and user experience is substantial.