Lesson 4 / 25

Image optimization

Techniques to reduce image file sizes without sacrificing quality through formats, compression, and lazy loading.

Modern image formats

Use WebP (30% smaller), AVIF (20% smaller than WebP), or HEIC. Provide fallbacks for older browsers: <picture><source srcset=photo.webp><img src=photo.jpg></picture>.

Compression strategies

Use lossy compression (JPEG, WebP quality 75-85) for photos, lossless for graphics. Tools: ImageOptim, TinyPNG, Squoosh. Compress before responsive resizing to avoid sending oversized images.

Responsive images

Use srcset and sizes to serve appropriate resolution per device: <img srcset='small.jpg 480w, large.jpg 1200w' sizes='(max-width: 600px) 100vw, 50vw'>. Reduces data waste on mobile.

Lazy loading images

Add loading="lazy" to below-the-fold images: <img src=photo.jpg loading=lazy>. Load only when user scrolls near. Dramatically reduces initial page load time.

Image optimization workflow

  1. Choose correct format, 2) Compress aggressively, 3) Use responsive images, 4) Lazy load below-the-fold, 5) Consider WebP with fallbacks. Images often comprise 50% of page weight.

Quick check

Quick check: What is a major advantage of WebP format?

  • 30% smaller file size than JPEG
  • Universal browser support
  • Animated without performance cost
Answer