Images account for roughly 50% of the average web page’s total weight. If your site feels sluggish, your images are almost certainly the first place to look. In this hands-on tutorial, we’ll show you exactly how to optimize images for website speed using modern formats, smart compression, lazy loading and responsive markup. We’ll also share real before/after Core Web Vitals numbers from a recent client project at iTimap.

Why Image Optimization Still Matters in 2026

Google’s Core Web Vitals (especially Largest Contentful Paint and Interaction to Next Paint) directly influence your search rankings. Heavy, unoptimized images are the #1 cause of poor LCP scores. With mobile-first indexing now the default and users expecting near-instant page loads, getting images right is no longer optional.

Here’s a snapshot of the impact we measured on a recent e-commerce site after applying the techniques in this guide:

Metric	Before	After	Improvement
Page weight (homepage)	4.8 MB	1.1 MB	-77%
LCP (mobile)	4.2 s	1.6 s	-62%
PageSpeed score (mobile)	42	94	+52 pts
CLS	0.21	0.02	-90%

Step 1: Benchmark Your Current Site Speed

Before touching anything, measure. You can’t improve what you don’t track. Use these free tools:

• PageSpeed Insights (pagespeed.web.dev) for Core Web Vitals
• WebPageTest for waterfall analysis
• Chrome DevTools > Network tab, filtered by “Img”
• DebugBear or Calibre for ongoing monitoring

Note your current LCP, total page weight, and the size of your largest images. These are your baseline.

Step 2: Choose the Right Image Format

Format choice is the single biggest lever. Here’s a quick decision matrix:

Format	Best for	File size vs JPEG	Browser support (2026)
AVIF	Photos, hero images	~50% smaller	~96%
WebP	General use, fallback	~30% smaller	~99%
JPEG	Legacy fallback	Baseline	100%
PNG	Transparency, UI	Usually larger	100%
SVG	Logos, icons	Tiny	100%

Our rule of thumb in 2026: serve AVIF first, WebP as fallback, JPEG/PNG as last resort.

Step 3: Compress and Convert with the Right Tools

You don’t need expensive software. These are the tools we actually use at iTimap:

1. Squoosh.app (Google): browser-based, perfect for one-off images. Drag, drop, pick AVIF, adjust quality slider, compare side-by-side.
2. ImageOptim (Mac) or FileOptimizer (Windows): strips metadata and recompresses losslessly.
3. Sharp (Node.js): scriptable, the engine behind most modern build pipelines.
4. cwebp and avifenc: command-line tools for batch processing.
5. Cloudinary, Imgix or Bunny Optimizer: CDN-based on-the-fly optimization if you don’t want to manage anything.

Recommended quality settings

• AVIF: quality 50 to 65 (visually identical to JPEG 85)
• WebP: quality 75 to 80
• JPEG: quality 80 to 85, progressive enabled

Step 4: Resize Before You Upload

Never upload a 4000px wide photo when your container is 800px. Resize first, compress second. A quick checklist:

• Hero images: max 1920px wide
• Content images: match the actual display width (usually 800 to 1200px)
• Thumbnails: 300 to 600px
• Always export at 2x for retina displays, then let responsive markup do the rest

Step 5: Use Responsive Image Markup

Serving a 1920px image to a phone is wasteful. Use srcset and sizes so browsers pick the right file:

<img
  src="hero-800.jpg"
  srcset="hero-400.avif 400w,
          hero-800.avif 800w,
          hero-1200.avif 1200w,
          hero-1920.avif 1920w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 80vw,
         1200px"
  alt="Product hero image"
  width="1200"
  height="800">

For full format negotiation, use the <picture> element:

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Hero" width="1200" height="800">
</picture>

Important: always set explicit width and height attributes. This prevents layout shift (CLS) and is one of the easiest wins for Core Web Vitals.

Step 6: Lazy Load Below-the-Fold Images

Native lazy loading is fully supported in 2026. Just add the attribute:

<img src="product.avif" loading="lazy" decoding="async" width="600" height="400" alt="Product">

Critical rule: never lazy-load your LCP image (usually the hero). For that one, use loading="eager" and add fetchpriority="high":

<img src="hero.avif" fetchpriority="high" loading="eager" width="1200" height="800" alt="Hero">

Step 7: Serve Images from a CDN

Even perfectly compressed images are slow if they travel halfway around the world. A CDN caches your images close to users. Popular choices:

• Cloudflare (with Polish/Mirage for automatic optimization)
• Bunny.net (excellent price/performance)
• Cloudinary or Imgix (full image transformation API)
• Vercel/Netlify Image Optimization (built-in for Jamstack sites)

Step 8: Automate Everything in WordPress

If you’re on WordPress (like most of our clients), you don’t need to do this manually. We recommend:

• ShortPixel or Imagify: bulk compression, AVIF/WebP delivery
• Converter for Media: free WebP/AVIF conversion
• EWWW Image Optimizer: solid free tier
• Pair with a caching plugin like WP Rocket for lazy loading and preloading

Common Mistakes to Avoid

• Uploading screenshots as PNG when JPEG/WebP would be 10x smaller
• Forgetting to set width and height (causes CLS)
• Lazy-loading the hero image (kills LCP)
• Using background-image in CSS for content images (no responsive support)
• Trusting “quality 100” exports (you can usually drop to 80 with zero visible difference)

The iTimap Image Optimization Checklist

1. Benchmark with PageSpeed Insights
2. Resize images to the largest size they’ll actually be displayed
3. Convert to AVIF with WebP fallback
4. Use <picture> or srcset for responsive delivery
5. Set explicit width and height on every image
6. Lazy-load everything below the fold
7. Preload and prioritize the LCP image
8. Serve through a CDN
9. Re-test and iterate

FAQ

Is AVIF really better than WebP in 2026?

Yes, for photographic content AVIF typically produces files 20 to 30% smaller than WebP at equivalent quality. With browser support now above 96%, there’s no reason not to use it as your primary format with WebP as fallback.

What’s the ideal image size for a website?

Aim for under 200 KB per image for content photos and under 500 KB for hero images. Total page weight should ideally stay below 1.5 MB on mobile.

Does image optimization really affect SEO?

Absolutely. Core Web Vitals are a confirmed Google ranking factor, and LCP is heavily influenced by images. Faster pages also mean lower bounce rates and higher conversion rates.

Should I still use JPEG in 2026?

Only as a fallback inside a <picture> element for the tiny percentage of browsers that don’t support AVIF or WebP. Never as your primary format.

How do I optimize images without losing quality?

Use modern formats (AVIF/WebP) at quality settings between 65 and 80. Visually, the difference from the original is imperceptible, but file sizes drop by 50 to 80%. Always compare side-by-side in a tool like Squoosh before publishing.

Can I just install a plugin and forget about it?

For most WordPress sites, yes. ShortPixel or Imagify with default settings will handle 90% of the work. But hand-tuning hero images and critical content still pays off, especially for LCP.

Need Help?

At iTimap, we’ve optimized images for hundreds of websites, often cutting page weight by 70% or more. If you’d like a free image audit of your site, get in touch and we’ll show you exactly what’s slowing you down and how to fix it.