DEV Community

Max
Max

Posted on • Originally published at orthogonal.info

How to Optimize Images for Website Speed in 2026 (Without Losing Quality)

#webdev #performance #webperf #tutorial

Images account for ~50% of total page weight on most websites. If your site loads slowly, images are almost certainly the bottleneck.

After years of optimizing web performance, here's my complete workflow for image optimization in 2026.

Why Image Optimization Matters

  • Core Web Vitals: Google uses LCP (Largest Contentful Paint) as a ranking signal. Unoptimized hero images = slow LCP = lower rankings.
  • Bounce rate: 53% of mobile users leave if a page takes >3 seconds to load.
  • Bandwidth costs: Smaller images = less CDN/hosting cost.

The 4-Step Image Optimization Workflow

1. Choose the Right Format

Format Best For Browser Support
WebP Photos, illustrations 97%+
AVIF Photos (best compression) ~92%
PNG Transparency, icons 100%
SVG Logos, simple graphics 100%

Rule of thumb: Use WebP for everything unless you need transparency (PNG) or have vector graphics (SVG).

2. Resize Before Compressing

Never serve a 4000px image in a 800px container. Resize first:

<img 
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="image-800.webp"
  alt="descriptive alt text"
  loading="lazy"
  decoding="async"
/>
Enter fullscreen mode Exit fullscreen mode

3. Compress Aggressively

Most images look identical at 75-80% quality. The sweet spot:

  • Hero images: 80-85% quality
  • Thumbnails: 70-75% quality
  • Background images: 60-70% quality

I use QuickShrink for this because:

  • It runs entirely in the browser (no upload = no privacy risk)
  • Supports batch compression
  • Lets you compare before/after side by side
  • Works offline once loaded

4. Lazy Load Everything Below the Fold 

<!-- Above the fold: load immediately -->
<img src="hero.webp" fetchpriority="high" />

<!-- Below the fold: lazy load -->
<img src="gallery-1.webp" loading="lazy" decoding="async" />
Enter fullscreen mode Exit fullscreen mode

Quick Wins Checklist

  • [ ] Convert all JPEGs to WebP (30-50% smaller)
  • [ ] Add loading="lazy" to images below the fold
  • [ ] Add width and height attributes (prevents layout shift)
  • [ ] Use srcset for responsive images
  • [ ] Compress to 75-80% quality
  • [ ] Add fetchpriority="high" to LCP image

Tools I Recommend

  1. QuickShrink — Free, browser-based, no upload needed. My go-to for quick compression.
  2. Sharp (Node.js) — For build pipelines and automation.
  3. Squoosh CLI — Google's tool for batch processing.

Real Results

On a recent client site, following this workflow:

  • Page weight: 4.2MB → 890KB (79% reduction)
  • LCP: 4.1s → 1.3s
  • PageSpeed score: 62 → 94

TL;DR

  1. Use WebP format
  2. Resize to display dimensions
  3. Compress to 75-80% quality (try QuickShrink)
  4. Lazy load below-the-fold images
  5. Add width/height to prevent layout shift

Doing just steps 1-3 typically cuts image size by 70%+.

What's your image optimization workflow? Drop it in the comments — always looking for new tricks.

Top comments (0)