Recommended Free Tools
To make images responsive in HTML, use CSS to fit the image to its layout and responsive-image markup to let the browser choose an appropriate file. For the same image in different sizes, use srcset with width descriptors and sizes. For a different crop or composition at a breakpoint, use <picture> with conditional <source> elements and a fallback <img>.
Responsive display and responsive source selection are different
CSS controls how an image is displayed: for example, max-width: 100%; height: auto; lets it shrink within its container while preserving its proportions. That does not by itself give the browser alternate files to choose from. Responsive-image markup lets you provide candidate resources, so a browser need not fetch an unnecessarily large file when a smaller one is suitable.
The HTML Standard defines how the browser evaluates these candidates. The browser makes the choice using the candidate information along with factors such as the rendered slot and device conditions; authors provide useful options and accurate layout hints rather than prescribing one exact file for every device. See the WHATWG HTML Standard: Images.
Use srcset and sizes for the same image at different widths
When the content and composition stay the same but the rendered image width varies, provide several versions in srcset with width descriptors such as 480w and 1200w. Use sizes to describe the width the image is expected to occupy in the layout. The browser uses those inputs to select a candidate.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
<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="600"
alt="A hiker looking across a mountain valley">This example assumes the image fills the viewport up to 600 CSS pixels and occupies an 800 CSS-pixel slot above that breakpoint. Change sizes to match your actual layout. The width and height attributes describe the image’s intrinsic dimensions and help the browser reserve space before it appears.
Make the candidate list and layout hint accurate
- Each width descriptor must correspond to the actual pixel width of that file. Do not label a 700-pixel-wide image as
800w. - Describe the expected slot width in
sizes, using the same breakpoints and widths as the layout where practical.sizesis a selection hint; it does not set the rendered CSS width. - If
sizesunderstates the slot, the browser may choose an image that is too small; if it overstates the slot, it may fetch a larger file than needed. The exact choice is up to the browser and its conditions. - Use CSS to control the final layout, for example
img { max-width: 100%; height: auto; }. The HTML attributes supply candidates and hints; they are not a substitute for layout CSS.
Use picture when the crop or source needs to change
Use <picture> for art direction: cases where a narrow layout needs a tighter crop or a different composition, not merely a smaller version of the same image. Put the more specific matching source first, and keep an <img> inside as the fallback.
<picture>
<source media="(max-width: 600px)" srcset="portrait-crop.jpg">
<img src="landscape.jpg" width="1200" height="700"
alt="A hiker looking across a mountain valley">
</picture>At viewport widths matching the media condition, the browser can use the portrait crop; otherwise it can use the landscape image. Adapt the breakpoint and source dimensions to your design. The <img> remains necessary: it provides a fallback and carries the alternative text.
Offer format alternatives with typed sources
<picture> can also offer a source in a particular format using the type attribute, followed by a fallback image. This is a selection mechanism, not a claim that one format is always best. File size, visual quality, encoding workflow, and the formats your site intends to support all matter.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
<picture>
<source type="image/avif" srcset="photo.avif">
<img src="photo.jpg" width="1200" height="800"
alt="A red bicycle leaning against a brick wall">
</picture>Check that each source has the intended format and that the fallback is a valid resource. The current documentation describes how the browser selects sources, but does not establish a universal file-size or quality advantage for a given format. See MDN’s picture element reference.
Choose the markup for the problem you have
| Need | Use | Authoring concern |
|---|---|---|
| Same content at several pixel widths | <img srcset> with width descriptors and sizes |
Match descriptors to actual file widths and sizes to the expected slot. |
| Same content displayed at a known size across different pixel densities | Density descriptors, such as 1x and 2x |
Suitable when the rendered size is known; not for a slot whose width depends on the viewport. |
| Different crop or composition at a breakpoint | <picture> with <source media> |
Keep a fallback <img> and choose crops suited to the design. |
| Different image formats with a fallback | <picture> with typed sources |
Supply a valid fallback and account for the formats your site intends to support. |
The WHATWG standard cautions: “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 when the slot changes with the viewport; use density descriptors when the rendered size is known.
Write alternative text for the image’s role
The alt attribute belongs on the fallback <img>, including when that image is inside <picture>. Describe the meaningful information or function the image provides in context. If an image is decorative and contributes no information, use empty alternative text (alt="") where appropriate. Responsive source selection does not replace accessible alternative text. See MDN’s img element reference.
Check performance without assuming a fixed saving
Responsive candidates can avoid downloading a larger asset when a smaller one is suitable, but savings depend on the files you create, the layout, the browser’s choice, and the device. MDN’s undated instructional example (accessed 2026) contrasts an 800-pixel image at 128 KB with a 480-pixel image at 63 KB—a 65 KB difference between those two example files, not a general guarantee for a page.
For a practical check, inspect the image request in your browser’s developer tools at representative viewport sizes and compare the selected file with the slot dimensions. If the browser repeatedly fetches a much larger resource than the slot needs, verify the candidate widths and sizes. If an image looks soft, check that the candidate files really have the declared dimensions and that the layout hint does not understate the slot. Browser behavior can vary, so validate the result in the browsers and layouts your site supports.
Or skip the browser setup
If you need a screenshot of how a page renders rather than HTML markup for serving responsive images, ScreenshotNeo provides a website screenshot API. For an example screenshot request:
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for request options. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for free.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
