Responsive images with srcset: serve the right file

Goal: avoid forcing a 1200-pixel image onto every phone; let srcset and sizes guide the browser to an appropriate file.

Prepare three test versions of one image at 480, 800, and 1200 pixels wide, all with the same aspect ratio.

Name the files as shown in the sample and place all three beside the test HTML file.

After each srcset filename, write its real intrinsic width using the w descriptor; guessed numbers can cause poor choices.

Use sizes to declare that the image is about the full viewport up to 600 pixels and occupies 800 pixels on larger layouts.

Keep src as the baseline source so older browsers and fallback situations still have an image.

Set width and height to the baseline aspect ratio so space is reserved before download and layout shift is reduced.

Write alt text for the image meaning; a filename or the word “image” is not a useful substitute.

Open a private window, enable Network tools, disable cache, set the viewport to 375 pixels, and reload.

Inspect the chosen filename and currentSrc in the Console. A high-density display may legitimately choose a file larger than 480 pixels.

Repeat at a 1200-pixel viewport and ensure the image stays inside its 800-pixel container; add max-width:100% in CSS.

Success check: valid files are selected at different widths, the aspect ratio remains stable, and the alt text communicates the purpose.

Complete example code

<img src="photo-800.jpg" srcset="photo-480.jpg 480w, photo-800.jpg 800w, photo-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, 800px" width="800" height="533" alt="A useful description">

Responsive images with srcset: serve the right file