ScreenshotNeo
Sign in Get a free key

BlogGuides

Responsive Images: A Look at Today’s Solutions

Learn when to use srcset and sizes, when picture is the better fit, and how to build responsive image markup that works across layouts.

By the ScreenshotNeo team4 October 20269 min read

Use srcset with width descriptors and sizes when the same image content appears at different rendered widths. Use <picture> when you need a different crop or composition at a breakpoint, or want to offer format alternatives. In either case, CSS controls the displayed layout, the browser selects from the resources you provide, and an <img> supplies the fallback and alternative text.

1. Responsive display and responsive source selection

These are related, but they solve different problems:

  • Responsive display: CSS makes an image fit its layout, for example with max-width: 100%; height: auto.
  • Responsive source selection: HTML gives the browser multiple resources and information about the image slot, so it can choose a suitable file.

If CSS shrinks a large image on a phone, the image may still have been downloaded at its full original size. Responsive-image markup lets you provide useful alternatives. The outcome depends on the candidates, the layout, and the browser’s selection; markup alone does not guarantee a particular file-size saving.

2. Serve the same image at different widths

For the same photograph or illustration at varying layout widths, use width-described candidates in srcset and describe the expected rendered slot in sizes:

<img
  src="/images/photo-800.jpg"
  srcset="/images/photo-480.jpg 480w,
          /images/photo-800.jpg 800w,
          /images/photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800"
  height="600"
  alt="A kayaker crossing a mountain lake"
  class="responsive-image"
>
.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
}

This example assumes the image occupies the full viewport width up to 600 CSS pixels and an 800 CSS-pixel slot above that. Change sizes to match your actual layout. The w number must match the resource’s intrinsic pixel width; it is not a CSS width. Explicit width and height provide intrinsic dimensions so the browser can reserve an appropriate box while loading.

What the browser uses

  • srcset lists candidate files and their intrinsic widths.
  • sizes gives a source-selection hint about the image’s expected slot width at different conditions. It does not set the image’s CSS width.
  • CSS determines the rendered layout. The browser considers the candidates and hints along with device conditions when selecting a resource.
  • src provides a fallback resource for browsers or situations that do not use the candidates.

If sizes understates the slot, the browser may select an image that is too small for the displayed space. If it overstates it, the browser may fetch a larger candidate than needed. These are possible consequences of the selection inputs, not a guarantee of an exact choice in every browser.

Match sizes to the real layout

Suppose a page uses a full-width image on small screens, then a two-column layout with an image occupying half the content area. A more representative hint might be:

<img
  src="/images/article-800.jpg"
  srcset="/images/article-480.jpg 480w,
          /images/article-800.jpg 800w,
          /images/article-1200.jpg 1200w"
  sizes="(max-width: 700px) 100vw, 50vw"
  width="1200"
  height="800"
  alt="The image’s meaningful subject"
>

The values are examples, not universal breakpoints. If the image has a maximum width, side gutters, or a more complex grid, account for the actual slot rather than copying these values unchanged.

3. Use picture when the crop or composition should change

Use <picture> when a narrow screen needs a different image composition, such as a tighter portrait crop instead of a wide landscape:

<picture>
  <source
    media="(max-width: 600px)"
    srcset="/images/mountain-portrait.jpg"
  >
  <img
    src="/images/mountain-landscape.jpg"
    width="1200"
    height="700"
    alt="A hiker looking across a mountain valley"
    class="responsive-image"
  >
</picture>

Put the more specific matching source first. Keep an <img> inside the <picture>: it is the fallback and carries the alt text. The source order and media conditions should reflect the intended art direction and design breakpoints.

If each crop has its own responsive width variants, give that source a width-described srcset as well. Use a sizes hint that matches the slot for that layout. Make sure the fallback img also has an appropriate resource for cases where no source is selected.

4. Offer image formats with picture

The picture/source model can also offer format alternatives with a type attribute and an img fallback:

<picture>
  <source type="image/webp" srcset="/images/scene.webp">
  <img
    src="/images/scene.jpg"
    width="1200"
    height="800"
    alt="A red fox standing at the edge of a forest"
  >
</picture>

Choose formats based on your encoding workflow, file size, visual quality, and support requirements. The selection mechanism does not make one format universally best. Keep the fallback because a browser may not select a supplied source.

5. Choose the right markup

Need Use Authoring check
Same content, several pixel widths img with srcset width descriptors and sizes Declared widths match the files, and sizes reflects the layout slot.
Same content at a known rendered size, with different pixel densities srcset density descriptors such as 1x and 2x The rendered size is known; do not use density descriptors for viewport-dependent slot widths.
Different crop or composition at a breakpoint picture with ordered source media elements The crop suits the layout and an img fallback remains.
Format alternatives picture with typed sources and an img fallback Fallback and supported formats match the site’s requirements.

The WHATWG HTML Standard states: “The x descriptor is not appropriate when the rendered size of the image depends on the viewport width (viewport-based selection), but can be used together with art direction.” Use width descriptors and sizes for viewport-dependent slots; use density descriptors when the rendered size is known. See the WHATWG HTML Standard: Images.

6. Accessibility and image dimensions

  • Write alt text based on the image’s purpose in context. A concise description should communicate meaningful content or function.
  • For a decorative image that adds no information, use empty alternative text (alt="") where appropriate.
  • Put alt on the fallback img, including when it is inside picture.
  • Set intrinsic width and height attributes to help reserve space before the image appears. Choose values matching the image’s intrinsic dimensions or aspect ratio.
  • Do not use a different crop as a substitute for alternative text. Source selection and accessible description solve separate problems.

See MDN’s guidance on the img element and the picture element.

7. A practical implementation checklist

  1. Decide whether the image content stays the same across layouts. If only its displayed size changes, start with srcset and sizes. If the crop or composition changes, use picture.
  2. Create real image candidates at useful intrinsic widths or provide the intended art-directed crops. Do not label a file with a width descriptor that does not match its pixel width.
  3. Write sizes from the layout’s expected slot widths and breakpoints. Treat it as a resource-selection hint, not a CSS rule.
  4. Keep a working src fallback, and keep an img inside every picture.
  5. Add contextual alternative text and intrinsic dimensions.
  6. Check representative narrow and wide layouts. Confirm that the image is composed correctly and that the markup’s slot assumptions match the CSS.
  7. Review actual candidate file sizes and visual quality. Savings depend on the assets and browser choice; there is no universal percentage.

8. Performance, reliability, and cost considerations

Responsive-image markup can reduce unnecessary image transfer when the browser can choose a suitable smaller candidate, but the result depends on which files you create, the rendered slot, device conditions, and browser selection. MDN’s instructional example contrasts an 800-pixel image at 128 KB with a 480-pixel image at 63 KB: a 65 KB difference in that example, not a general benchmark or promise. See MDN’s responsive images guide.

For reliability, make sure candidate URLs resolve, files are encoded correctly, declared widths are accurate, and the fallback works. Incorrect sizes can lead to a candidate that is unnecessarily large or potentially too small. A missing source or failed request can leave the browser without the intended image, so keep the fallback and validate deployment paths.

There is no responsive-image markup charge by itself. Operational costs can come from producing and storing multiple variants and transferring the selected files. Weigh those costs against actual use and delivery needs rather than assuming every additional candidate saves bandwidth.

9. Troubleshooting

Symptom Likely cause Fix
The browser downloads the largest candidate on mobile sizes describes a wider slot than the mobile layout actually uses, or the candidates do not include a suitable smaller width. Match each size condition to the real CSS layout and provide appropriately sized candidate files.
The selected image looks blurry or pixelated The candidate may be too small for its rendered slot or the width descriptor may be inaccurate. Check the actual intrinsic pixel dimensions, the w descriptors, and the expected slot in sizes; add a more suitable candidate if needed.
The image is cropped incorrectly on a phone The same source is being resized even though the design needs another composition. Use a matching picture source with a mobile media condition and retain the fallback img.
No image appears when using picture A source URL may be wrong, no condition may match, or the fallback img may be missing or broken. Check every URL and media condition, and ensure the picture contains a valid img src.
The browser selects an unexpected source Source order, media conditions, type support, or candidate metadata may not match the intended choices. Review ordered sources and their conditions, confirm the files and descriptors, and keep the fallback valid.
The page jumps as an image loads The layout does not reserve space for the image. Provide correct intrinsic width and height and ensure CSS preserves the intended aspect ratio.
The alternative text is absent or misleading It may have been omitted from the fallback image or may describe appearance without the image’s contextual purpose. Add contextually useful alt to img; use empty alt for decorative images when appropriate.

10. Inspect responsive output with a screenshot

A screenshot can help you compare the visible composition at different viewport sizes and spot layout problems. It shows rendered output; it does not by itself prove which image candidate the browser downloaded. Check browser network details as well when you need to confirm resource selection.

For screenshot capture, ScreenshotNeo is a website screenshot API and MCP server for developers. It supports viewport and device presets, full-page capture with lazy images loaded, and a one-call screenshot request. Its response identifies page verdict and billing status in headers.

11. Or skip the browser setup

After building and checking your responsive markup, you can capture a page with one API call. See the ScreenshotNeo API documentation for options and configuration.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers say which page verdict and billing status applied. Its MCP server includes take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up free for ScreenshotNeo.

12. Frequently asked questions

Does sizes change how wide the image is displayed?

No. It is a selection hint for the browser. CSS controls the rendered size.

Can srcset and picture be used together?

Yes. A picture source can provide responsive candidates, and the nested img can have its own fallback candidates. Use the markup that expresses both the intended crop and slot sizes clearly.

Should I always provide three or more candidate widths?

There is no fixed required count. Provide useful files for the range of slots your layout serves, and avoid candidates that add maintenance without a practical selection benefit.

Does responsive markup guarantee lower bandwidth?

No. It enables browser choice among supplied resources. The result depends on the files, layout, and browser conditions.

Where can I read the standards and practical reference?

Consult the WHATWG HTML Standard for normative behavior and MDN’s responsive images guide for practical examples.

Keep reading

7 min read

LinkedIn Open to Work Image

Learn what LinkedIn’s Open to Work photo frame means, who can see it, how to add or remove it, and how to choose the right privacy setting.