Image Optimization for Web Performance

Why Images Are the Main Performance Problem

Images account for 50-70% of total web page weight on average. According to HTTP Archive, the average page loads over 1 MB of images. Unoptimized images are the #1 cause of slow website loading and poor PageSpeed анализ scores.

Image optimization is the fastest way to speed up a website with minimal effort.

Modern Image Formats

WebP

Google's format, supported by all modern browsers (97%+ globally). Benefits:

• 25-35% smaller than JPEG at comparable quality
• 26% smaller than PNG with transparency support
• Animation support (replacing GIF with 64% size savings)
• Both lossy and lossless modes

AVIF

Format based on AV1, approximately 93% browser support. Best compression available:

• 50% smaller than JPEG at comparable quality
• 20% smaller than WebP
• HDR and wide color gamut support
• Slower to encode than WebP

When to Use Which Format

• AVIF — for photographs and complex images when encoding time isn't critical
• WebP — universal choice, good balance of quality and compatibility
• SVG — for icons, logos, illustrations (vector, scales without loss)
• PNG — for screenshots and images with text requiring pixel accuracy
• JPEG — fallback for older browsers

The Picture Element for Progressive Loading

Use <picture> to provide multiple formats:

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

The browser picks the first supported format. Always specify width and height to prevent layout shift (CLS).

Responsive Images

The srcset attribute loads appropriately sized images for the device:

<img
  srcset="image-480.webp 480w,
          image-800.webp 800w,
          image-1200.webp 1200w"
  sizes="(max-width: 600px) 480px,
         (max-width: 1000px) 800px,
         1200px"
  src="image-800.webp"
  alt="Description"
>

Don't load a 2000px image for a 320px mobile screen. Savings can reach 80% of traffic.

Lazy Loading

Lazy loading defers loading images that aren't visible on screen until the user scrolls to them:

<img src="image.webp" alt="Description" loading="lazy">

Lazy loading rules:

• Don't apply to the LCP image — the main above-the-fold image should load immediately
• Don't apply to the first 2-3 images on the page
• Apply to all images below the fold
• Use fetchpriority="high" for the LCP image

<!-- LCP image — high priority -->
<img src="hero.webp" alt="Hero" fetchpriority="high">

<!-- Below-the-fold images — lazy loading -->
<img src="gallery-1.webp" alt="Gallery" loading="lazy">

Image Compression

Compression Quality

For photographs, optimal quality is 75-85%. The difference between 85% and 100% is barely visible to the eye, but file size can differ by 2-3x.

Compression Tools

• Squoosh — visual comparison, AVIF/WebP support
• ImageOptim — массовую проверку URL optimization for macOS
• Sharp — Node.js library for server-side processing
• cwebp/cavif — CLI utilities for conversion

Automation

Integrate optimization into your CI/CD pipeline or use a CDN with automatic conversion (Cloudflare Polish, imgproxy). Never rely on manual optimization — it will be forgotten.

Additional Optimizations

Preloading the LCP Image

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

CSS Sprites and Inline SVG

For small icons, use SVG sprites or inline SVG instead of separate files — this reduces the number of HTTP requests.

Loading Placeholders

Use CSS placeholders of the correct size or blurred previews (LQIP — Low Quality Image Placeholder) to prevent layout shift.

Check Loading Speed

Use the Enterno.io Speed Test to measure your page loading times. Compare results before and after image optimization. Check the HTTP response for image caching headers.

Summary

Image optimization is the most effective way to speed up a website. Use WebP/AVIF with fallbacks, responsive images for different screens, lazy loading for below-the-fold images, and automate compression. These measures can reduce page weight by 50-80%.