⚡Image Optimization for Web

Image optimization is the process of delivering high-quality images in the right format, size, and resolution while keeping file sizes minimal. Images typically account for 50%+ of a webpage's total size, making optimization critical for performance.

The goal: reduce file size without sacrificing visual quality. Modern techniques include:

• Choosing the right format (WebP, AVIF vs JPEG, PNG)
• Compression (lossy vs lossless)
• Resizing to match display dimensions
• Lazy loading to defer off-screen images

When done correctly, image optimization can reduce image weight by 70-90% while maintaining visual fidelity.

Image optimization directly impacts your Core Web Vitals scores and SEO performance.

Core Web Vitals Impact

Largest Contentful Paint (LCP) measures when the largest content element becomes visible. Images are often the LCP element—unoptimized images delay this metric.

Cumulative Layout Shift (CLS) occurs when images load without reserved space. Setting explicit width and height attributes prevents layout shifts.

Key Benefits

• Faster crawl rates and improved rankings
• Better user engagement with lower bounce rates
• Mobile performance essential for mobile-first indexing
• 53% of mobile users abandon sites that take longer than 3 seconds to load

Optimizing images is one of the highest-impact, lowest-effort improvements you can make.

Choosing the right format is the foundation of image optimization.

Modern Formats

WebP — Best all-around choice

• 25-35% smaller than JPEG at equivalent quality
• Supports lossy, lossless, and transparency
• Browser support: 97%+ globally

AVIF — Next-generation format

• 50% smaller than JPEG at same quality
• Supports HDR and wide color gamut
• Browser support: 90%+ and growing

Legacy Formats

JPEG — Best for photographs with many colors (when WebP/AVIF unavailable)

PNG — Best for graphics with transparency (logos, icons, screenshots)

Pro tip: Use the <picture> element to serve modern formats with fallbacks.

<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>

Proper compression and resizing dramatically reduce file sizes.

Lossy vs Lossless

Lossy compression permanently removes data for smaller files (60-80% savings). Best for photos.

Lossless compression reduces size without quality loss (10-50% savings). Best for graphics and logos.

Best Practices

1. Match display dimensions — Don't upload 4000px images for 400px displays
2. Set explicit dimensions — Prevent CLS with width/height attributes
3. Use responsive images — Serve different sizes with srcset

Recommended Quality Settings

Free Tools

Squoosh (squoosh.app), TinyPNG, ImageMagick, Sharp (Node.js)

Lazy loading defers off-screen images until the user scrolls near them, improving initial page load.

Native Lazy Loading

The simplest approach uses the HTML loading="lazy" attribute. Supported by all modern browsers with zero JavaScript overhead.

Next.js Image Component

If using Next.js, the <Image> component handles optimization automatically:

• Automatic format selection (WebP/AVIF)
• Responsive sizing and lazy loading
• Prevents layout shifts

Important: Never lazy load above-fold images (hero, LCP candidates)—this delays critical content.

<img 
  src="gallery-image.webp" 
  alt="Gallery image description" 
  width="800" 
  height="600"
  loading="lazy"
>

import Image from 'next/image';

<Image
  src="/gallery-image.webp"
  alt="Gallery image description"
  width={800}
  height={600}
  loading="lazy"
/>