Image Optimization Techniques

srcset for resolution switching

  srcset="
    small.jpg 480w,
    medium.jpg 800w,
    large.jpg 1200w
  "
  sizes="(max-width: 600px) 480px, 800px"
  src="medium.jpg"
>

Art direction with picture

   media="(max-width: 600px)" srcset="mobile.jpg">
   src="desktop.jpg">

Always specify dimensions
 width="800" height="600" src="image.jpg">
Prevents layout shift (CLS)

Use aspect-ratio CSS
img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Do not serve oversized images
Resize to display dimensions

Cloudinary
https://res.cloudinary.com/demo/image/upload/w_800,q_auto,f_auto/sample.jpg
w_800 = width, q_auto = quality, f_auto = format

imgix
https://example.imgix.net/image.jpg?w=800&auto=format,compress

Cloudflare Images
Automatic format selection and optimization

Above fold: eager loading
 src="hero.jpg" loading="eager">
 rel="preload" as="image" href="hero.jpg">

Below fold: lazy loading
 src="image.jpg" loading="lazy">

Background images
.hero {
  background-image: image-set(
    url(hero.webp) type(image/webp),
    url(hero.jpg)
  );
}