Image Optimization for the Web: Faster Pages Without Ugly Pictures

On most websites, images make up more bytes than anything else: more than HTML, CSS and JavaScript combined. That makes them the biggest, easiest performance win available. You can usually cut image weight dramatically without anyone noticing a drop in quality.

1. Pick the right format

Format	Use for
AVIF	Photos and complex images; often the smallest files
WebP	Photos and graphics; excellent support, great compression
JPEG	Fallback for photos
PNG	Images needing lossless quality or simple transparency, when WebP isn't an option
SVG	Logos, icons and simple illustrations; tiny and sharp at any size

Modern browsers support WebP and AVIF. If you need fallbacks, the <picture> element lets the browser choose:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Team working around a table" width="1200" height="800">
</picture>

2. Serve the right size

Shipping a 4000-pixel photo into a 400-pixel card is the most common image mistake. Resize images to the sizes they're actually displayed at, accounting for high-density screens (roughly 2× the CSS size is plenty).

3. Use responsive images

srcset and sizes let the browser pick the best file for the device:

<img
  src="card-800.webp"
  srcset="card-400.webp 400w, card-800.webp 800w, card-1200.webp 1200w"
  sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
  alt="Product photo"
  width="800" height="600"
  loading="lazy">

sizes tells the browser how wide the image will be in the layout, so a phone downloads the 400px version and a large desktop the 1200px one.

4. Always set dimensions

Give every image width and height attributes (or a CSS aspect-ratio). The browser reserves the right space before the image loads, which prevents content jumping around: a big part of the layout shift (CLS) metric. (Core Web Vitals diagnosis.)

5. Lazy load below the fold, never the hero

<img src="photo.webp" loading="lazy" alt="..." width="800" height="600">

Native lazy loading defers offscreen images until users scroll near them. But don't lazy load the main image at the top of the page. It's often the Largest Contentful Paint (LCP) element, and lazy loading delays it. Do the opposite for that one:

<img src="hero.webp" fetchpriority="high" alt="..." width="1600" height="900">

If the hero is a CSS background, the browser discovers it late; consider an <img> instead, or preload it.

6. Compress sensibly

For photos, quality settings around 70 to 80 usually look identical to the original at a fraction of the size. Compare visually at actual display size. Tools like Squoosh are great for one-off images; build pipelines and image libraries like sharp handle it automatically. (Free tools.)

7. Let your framework or CDN do the work

Many frameworks include an image component that resizes, converts formats, sets dimensions and lazy loads automatically. Image CDNs and many hosting platforms can transform images on the fly through URL parameters. Either saves you from managing dozens of variants by hand.

8. Strip metadata

Photos from cameras and phones carry EXIF metadata (camera details and sometimes GPS location). Stripping it saves bytes and protects privacy, which matters especially for user uploads. (Secure file uploads.)

9. Cache images for a long time

Use content-hashed filenames and long-lived caching headers, so returning visitors don't download images again. (Caching strategies.)

10. Write good alt text

Not a performance tip, but just as important. Alt text makes images accessible to screen reader users and helps search engines understand them. Describe what matters in context; use alt="" for purely decorative images. (Accessibility basics.)

Quick checklist

• Modern format (AVIF/WebP), SVG for icons and logos
• Resized to display size, with srcset and sizes
• width and height set on every image
• loading="lazy" below the fold, fetchpriority="high" on the hero
• Compressed at a sensible quality
• Metadata stripped
• Long-lived caching with hashed filenames
• Meaningful alt text

FAQ

What is the best image format for websites?

AVIF and WebP give the best compression for photos and most graphics, with JPEG as a fallback. Use SVG for logos, icons and simple illustrations.

Should I lazy load all images?

No. Lazy load images below the fold, but load the main above-the-fold image eagerly, ideally with fetchpriority="high", because it often determines Largest Contentful Paint.

How do I stop images from causing layout shift?

Set width and height attributes or a CSS aspect-ratio on every image so the browser reserves the correct space before the image loads.