{"id":51717,"date":"2026-10-08T15:29:32","date_gmt":"2026-10-08T11:59:32","guid":{"rendered":"https:\/\/8899.ir\/web\/?p=51717"},"modified":"2026-10-09T11:28:00","modified_gmt":"2026-10-09T07:58:00","slug":"stp-web-20261008-srcset-en","status":"publish","type":"post","link":"https:\/\/8899.ir\/web\/stp-web-20261008-srcset-en\/","title":{"rendered":"Responsive images with srcset: serve the right file"},"content":{"rendered":"
\n

Responsive images with srcset: serve the right file<\/h2>\n
\n

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

Prepare three test versions of one image at 480, 800, and 1200 pixels wide, all with the same aspect ratio.<\/p>\n

Name the files as shown in the sample and place all three beside the test HTML file.<\/p>\n

After each srcset filename, write its real intrinsic width using the w descriptor; guessed numbers can cause poor choices.<\/p>\n

Use sizes to declare that the image is about the full viewport up to 600 pixels and occupies 800 pixels on larger layouts.<\/p>\n

Keep src as the baseline source so older browsers and fallback situations still have an image.<\/p>\n

Set width and height to the baseline aspect ratio so space is reserved before download and layout shift is reduced.<\/p>\n

Write alt text for the image meaning; a filename or the word \u201cimage\u201d is not a useful substitute.<\/p>\n

Open a private window, enable Network tools, disable cache, set the viewport to 375 pixels, and reload.<\/p>\n

Inspect the chosen filename and currentSrc in the Console. A high-density display may legitimately choose a file larger than 480 pixels.<\/p>\n

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

Success check: valid files are selected at different widths, the aspect ratio remains stable, and the alt text communicates the purpose.<\/p>\n

Complete example code<\/h3>\n
<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\"><\/code><\/pre>\n