If your website feels sluggish, images are almost certainly the culprit. On the average web page, images account for more than 50% of total page weight, and unoptimized assets are the number one reason developers fail their Core Web Vitals audits. The good news? Image optimization is one of the few performance wins where the effort-to-impact ratio is extremely high.
In this guide, we’ll walk through how to optimize images for website performance using techniques that actually move the needle in 2026: modern formats like WebP and AVIF, lazy loading, responsive srcset, smart compression, and CDN delivery. We’ll also show before/after Core Web Vitals numbers from real projects we’ve shipped at Coding4.
Why Image Optimization Matters More Than Ever in 2026
Google’s Core Web Vitals have become a ranking factor that punishes slow sites without mercy. The two metrics most affected by images are:
- LCP (Largest Contentful Paint): usually the hero image or a large above-the-fold visual
- CLS (Cumulative Layout Shift): caused by images loading without reserved space
On a recent client project, we cut LCP from 4.2s to 1.1s simply by applying the techniques in this article. No backend changes. No framework migration. Just better image handling.
1. Choose the Right Modern Format: WebP and AVIF
JPEG and PNG are no longer the default choice. Modern formats deliver the same visual quality at a fraction of the file size.
| Format | Avg. Size vs JPEG | Browser Support | Best For |
|---|---|---|---|
| JPEG | Baseline (100%) | Universal | Legacy fallback |
| WebP | ~25-35% smaller | 98%+ | General purpose default |
| AVIF | ~50% smaller | 94%+ | Photos, hero images |
| PNG | Variable | Universal | Transparency only |
| SVG | Tiny | Universal | Icons, logos |
Use the <picture> element to serve the best format each browser supports:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Product hero" width="1200" height="600">
</picture>2. Compress Aggressively (But Smartly)
Compression is where most of the file-size wins come from. The trick is finding the sweet spot where visual quality is preserved but bytes are slashed.
Recommended Compression Tools
- Squoosh (web.dev): drag-and-drop browser tool, perfect for one-offs
- ImageOptim: free macOS app, strips metadata and recompresses losslessly
- sharp (Node.js): best for build pipelines and automated workflows
- cwebp / avifenc: command-line tools for batch conversion
As a rule of thumb, target quality 75-85 for JPEG/WebP and quality 50-65 for AVIF. Most users can’t tell the difference from the original.
3. Resize Images to Their Actual Display Size
Serving a 4000px-wide image into a 400px container is the single most common mistake we see in audits. Always resize to the maximum dimension the image will ever be displayed at, then let the browser handle the rest.
4. Use Responsive Images with srcset and sizes
A mobile phone should never download a desktop-sized image. The srcset attribute lets the browser pick the right file based on viewport and device pixel ratio.
<img
src="product-800.webp"
srcset="product-400.webp 400w,
product-800.webp 800w,
product-1200.webp 1200w,
product-1600.webp 1600w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
800px"
alt="Product photo"
width="800"
height="600">Pro tip: Always include explicit width and height attributes. This eliminates layout shift and protects your CLS score.
5. Lazy Load Below-the-Fold Images
Browsers now support native lazy loading. Add one attribute and offscreen images will only load when the user scrolls toward them:
<img src="gallery-3.webp" alt="Gallery shot 3" loading="lazy" width="800" height="600">Important: Never lazy load your LCP image (typically the hero). That will hurt performance, not help it. Instead, use fetchpriority="high" on the hero:
<img src="hero.avif" alt="Hero" fetchpriority="high" width="1200" height="600">6. Deliver Images Through a CDN
A CDN caches images at edge locations close to your users, which dramatically reduces latency. Modern image CDNs go further and perform on-the-fly format conversion, resizing, and compression.
Popular options in 2026:
- Cloudflare Images and Polish
- Cloudinary
- imgix
- Bunny.net Optimizer
- Vercel Image Optimization (great for Next.js)
A URL like https://cdn.example.com/image.jpg?w=800&fm=avif&q=70 returns a perfectly sized AVIF, even if you uploaded a JPEG.
7. Preload Critical Hero Images
For the single most important image on the page (usually the LCP element), tell the browser to fetch it as early as possible:
<link rel="preload" as="image"
href="hero.avif"
type="image/avif"
fetchpriority="high">This single line of HTML routinely shaves 300-800ms off LCP times.
8. Strip Metadata and Use Progressive Encoding
Camera EXIF data, color profiles, and thumbnails embedded in image files can add 20-50 KB of pure waste. Tools like ImageOptim and the --strip-all flag in mozjpeg remove this overhead automatically.
For JPEGs, also enable progressive encoding. The image renders in increasing quality as it downloads, which feels much faster to users.
9. Use Blurred Placeholders (LQIP)
Low Quality Image Placeholders show a tiny, blurred preview while the full image loads. This improves perceived performance significantly. Frameworks like Next.js and Astro generate these automatically with a placeholder="blur" prop.
Real Before/After: Core Web Vitals Impact
Here’s a snapshot from a Coding4 client e-commerce site we optimized earlier this year. Same pages, same content, only image handling changed:
| Metric | Before | After | Improvement |
|---|---|---|---|
| LCP | 4.2s | 1.1s | -74% |
| CLS | 0.31 | 0.02 | -94% |
| Total page weight | 4.8 MB | 1.2 MB | -75% |
| PageSpeed score (mobile) | 42 | 94 | +52 pts |
The Image Optimization Checklist
Before pushing any image to production, run through this list:
- Is it in AVIF or WebP with a JPEG fallback?
- Is it resized to the actual display dimensions?
- Does it have a
srcsetwith multiple widths? - Are
widthandheightattributes set? - Is below-the-fold content using
loading="lazy"? - Is the LCP image preloaded with
fetchpriority="high"? - Is it served through a CDN?
- Has metadata been stripped?
- Is the alt text descriptive (for accessibility and SEO)?
FAQ
Is PNG or JPEG better for SEO?
Neither directly affects SEO, but JPEG (or better, WebP/AVIF) produces smaller files than PNG for photos, which improves page speed and therefore ranking. Reserve PNG for images that need transparency, and use SVG for logos and icons.
What is the best image format for a website in 2026?
AVIF is the best format for photos thanks to its superior compression. WebP is the safest universal default given its near-100% browser support. Use the <picture> element to serve both with a JPEG fallback.
Does lazy loading hurt SEO?
No. Native loading="lazy" is fully supported by Googlebot and is even recommended by Google. Just never lazy load your LCP image.
How much can I compress an image without losing quality?
For most photographs, quality settings between 75 and 85 (JPEG/WebP) produce files visually indistinguishable from the original while cutting size by 60-80%. AVIF can go even lower (50-65) for the same perceived quality.
Do I need a CDN if my site is small?
Even small sites benefit from a CDN. Free tiers from Cloudflare or Bunny.net are easy to set up and immediately improve global load times. For image-heavy sites, a dedicated image CDN with on-the-fly transformations pays for itself quickly.
Final Thoughts
Knowing how to optimize images for website performance is one of the highest-leverage skills a modern developer can have. Most sites can cut their page weight by more than half with a single afternoon of work, and the impact on Core Web Vitals (and therefore SEO and conversions) is immediate.
If you’d like the Coding4 team to audit your site and implement these techniques, get in touch. We’ve yet to see a site we couldn’t make significantly faster.