Serve Right-Sized Images With srcset

Serve Right-Sized Images With srcset

Sending a 2000-pixel-wide image to a phone that only shows 400 pixels wastes load time and hurts LCP — Largest Contentful Paint. The srcset attribute lets the browser pick the best-fitting size. Think of it like offering shirts in small, medium, and large instead of one giant size for everyone.

The playbook:
—
1. Create two or three sizes of your image, say 400, 800, and 1200 pixels wide.
—
2. List them in srcset: srcset="img-400.jpg 400w, img-800.jpg 800w".
—
3. Add a sizes hint, like sizes="(max-width: 600px) 400px, 800px".
—
4. Keep a normal src as a fallback for old browsers.
—
5. Reload on your phone and desktop to confirm each gets a different file.

The browser now downloads only what the screen needs.

Try this: Make a 400px version of your hero and add it to a srcset.