How a Browser Picks an Image From srcset
With width-based responsive images, each entry pairs an actual image URL with the file’s intrinsic pixel width. The browser evaluates the page’s sizes hint, considers device pixel density and other factors, then selects an appropriate candidate. A 480w descriptor means the referenced image is 480 physical pixels wide; it does not mean the image is displayed at 480 CSS pixels.
For example, a 390 CSS-pixel image slot on a device with a 2× pixel density may benefit from roughly 780 source pixels. If the available candidates are 480, 960, and 1440 pixels wide, the browser may choose the 960-pixel file. This is illustrative, not a measured result from this tool; browser selection varies.
Choose Image Widths Based on the Actual Content Area
Start with the maximum width at which the image is displayed in your layout. An image inside a narrow article column may never occupy the full desktop viewport. A full-bleed hero, by contrast, might fill nearly the whole window. Inspect your CSS or actual page design before defining breakpoints.
- Identify the smallest and largest useful display widths for this specific image.
- Prepare several real image files at increasing intrinsic widths without stretching a smaller original.
- Preserve the intended aspect ratio unless the design calls for a separate crop.
- Write a
sizes value that matches the image slot at relevant viewport widths.
- Include a normal
src fallback and test at desktop and mobile widths.
There is no universal set of ideal image widths. A product thumbnail grid, blog article, and large landing-page hero have different requirements. Extra variants increase storage, so choose useful sizes.
Worked Example: A Flexible Article Image
Imagine an article illustration exported as 480 × 320, 960 × 640, and 1440 × 960 pixel WebP files. All three show the same crop. Suppose the CSS layout uses the viewport width on small screens, approximately 70% of the viewport on medium screens, and a maximum image slot of 800 CSS pixels on larger screens.
The following code is illustrative HTML, not a confirmed output of the generator. Replace each sample path with the real location of an existing image file before using it on a website.
<img
src="/example-images/forest-960.webp"
srcset="/example-images/forest-480.webp 480w,
/example-images/forest-960.webp 960w,
/example-images/forest-1440.webp 1440w"
sizes="(max-width: 640px) 100vw,
(max-width: 1100px) 70vw,
800px"
width="960"
height="640"
alt="Sunlight filtering through a forest canopy"
decoding="async">
The sizes expression must agree with the page’s actual CSS. If your article has mobile padding or uses a narrower column, adapt the slot width rather than copying 100vw blindly. For a 390 CSS-pixel slot at 2× density, the approximate target becomes 780 pixels, making 960 pixels a plausible candidate among these three files.
When to Use w Descriptors Versus 1x and 2x
Width descriptors work well when an image’s layout width changes. Pixel-density descriptors are simpler when the image always appears at roughly the same CSS width, such as a fixed-size icon. Both describe alternative source images, but they are not interchangeable in one candidate list.
Do not mix 960w and 2x descriptors in the same srcset list. Avoid duplicate descriptor values, and keep the fallback src valid.
What the sizes Attribute Actually Describes
sizes is a series of media conditions followed by slot widths. It is not a list of the image files you created. The browser uses the first matching condition, then a fallback slot width. A value of 50vw means half the viewport width, not half the file’s intrinsic width.
For a two-column desktop card grid, sizes="(max-width: 700px) 100vw, 50vw" could be a starting point, but it may be inaccurate when the design includes gutters, card padding, or a maximum container width. Derive the expression from the layout and verify it in browser developer tools.
Use picture for Different Crops or Image Formats
The <picture> element is useful when a narrow screen needs a different crop, not just fewer pixels. For example, a wide desktop banner might include several people, while the phone version focuses on one subject. A <source> can use a media condition to supply the mobile crop, and the nested <img> provides the fallback.
<picture> can also provide optional file formats, such as AVIF and WebP, where a fallback is needed. Changing the image crop or file format is a separate decision from selecting resolution candidates. If every version shows the same image and has the same format, a normal <img> with srcset may be sufficient.
Does Responsive Image Markup Improve Page Speed?
It can reduce transferred image data when browsers have genuinely smaller files to choose from. However, markup alone does not compress an image. The alternate files must exist and have appropriate dimensions and encoding. A poorly compressed 480-pixel file could still be unnecessarily large.
For meaningful performance improvements, combine responsive delivery with suitable image formats, sensible compression, and correct loading priority. Include intrinsic width and height values or an equivalent aspect-ratio reservation to reduce unexpected layout movement. Do not lazy-load a prominent image likely to be the page’s Largest Contentful Paint element; reserve lazy loading for images below the initial viewport.
WordPress Often Generates srcset Automatically
WordPress has supported responsive image attributes in its generated image markup since WordPress 4.4. For normal images inserted from the Media Library, the platform can use its stored image dimensions to add srcset and sizes without manually writing HTML. Your theme, registered image sizes, and custom templates influence the result.
Check the actual page source before adding manual attributes. If WordPress already generates suitable candidates, a separate generator may be unnecessary. Manually written responsive markup is more useful for custom HTML blocks, static websites, specialized layouts, or templates where you control the asset paths.
Validate the Exported Markup Before Publishing
After creating your image variants, confirm that each URL loads and each w descriptor reports the real intrinsic width. Open the page at different viewport widths and inspect the image in your browser’s developer tools. The selected resource can be checked using the image element’s currentSrc property or its network request.
Frequently Asked Questions About Responsive Images
Is srcset the same as resizing an image?
No. srcset lists available image resources. Actual resized files must be created separately or supplied by an image service that generates valid variants.
Can I use srcset without sizes?
Density-based 1x and 2x source sets do not require sizes. For width-based responsive layouts, use an accurate sizes value so the browser understands the intended display width.
Should every image have five or six variants?
Not necessarily. Candidate count should reflect the real layout, original resolution, file-size differences, and maintenance cost. A small icon may need fewer files than a full-width photograph.
Do srcset images automatically rank better in Google?
No. Responsive images can support good user experience and performance, but a particular markup pattern does not guarantee indexing, rankings, or an improved Core Web Vitals score.
Can an SVG use responsive image markup?
SVG artwork typically scales without the same raster-resolution problem. Use suitable CSS sizing for a standalone SVG. Alternative formats or distinctly art-directed files may still justify a <picture> element.
