What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
A responsive image gives the browser several suitable image resources and enough information to choose among them for the current viewport, layout slot, and display density. For the same photograph at different resolutions, use img with srcset and sizes. When the crop, composition, or file format should change, use picture with one or more source elements and an img fallback.
This is not CSS magically shrinking a downloaded file. You provide candidates; the browser selects a resource that fits the conditions you describe. Correct markup can avoid sending an unnecessarily large asset to a small screen while preserving useful quality on larger or high-density displays. MDN describes the goal as making images work well on devices with different screen sizes and resolutions: Using responsive images in HTML.
What “responsive image” means
A responsive image is an image implementation that offers alternatives for different circumstances. Those circumstances can include the rendered width of the image, the device pixel ratio, the viewport width, and the browser’s supported formats.
There are two separate decisions:
- Resolution switching: the image depicts the same content, but files have different intrinsic widths or pixel densities.
- Art direction or format selection: the browser receives a different crop, composition, or file format under specified conditions.
The browser makes the final resource choice. Network conditions, cache state, browser policy, and user preferences can affect which candidate is downloaded, so responsive markup is guidance rather than a promise that the smallest file will always be chosen.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose the right HTML pattern
| Requirement | Markup | Important decision |
|---|---|---|
| Same image at several layout widths | img with width-descriptor srcset and sizes |
Estimate the rendered slot width at each layout condition. |
| Same image with fixed CSS dimensions and density variants | img with 1x, 2x and similar descriptors |
Provide assets for the pixel densities you intend to support. |
| Different crop or composition by viewport | picture with source media |
Define when the alternate composition should apply. |
| Alternative image formats | picture with source type |
List modern formats first and retain a compatible fallback. |
Use srcset and sizes for resolution switching
When every version shows the same image, start with a normal img. A width descriptor such as 480w describes the candidate file’s intrinsic width in pixels; it is not a CSS display width.
<img
src="photo-800.jpg"
srcset="photo-480.jpg 480w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(width <= 600px) 100vw, 800px"
width="800"
height="533"
alt="A cyclist riding beside a river at sunrise">How the attributes work
srcis the default source and a useful fallback for older or unusual clients.srcsetlists available files. Eachwvalue must correspond to that file’s actual intrinsic width.sizestells the browser how wide the image is expected to render. In this example it is the full viewport width through 600 CSS pixels, and 800 CSS pixels above that.widthandheightexpress the asset’s aspect ratio and help the browser reserve space before the file arrives, reducing layout movement.altdescribes the image’s meaning in context, not merely its file name.
Adapt sizes to the real layout. A two-column card, a full-bleed hero, and an article column do not share the same slot width. Conditions are evaluated in order; the first matching condition is used, so put narrower or more specific conditions before the final default.
Example for a two-column layout
<img
src="team-800.jpg"
srcset="team-400.jpg 400w, team-800.jpg 800w, team-1200.jpg 1200w"
sizes="(width <= 700px) 100vw, (width <= 1100px) 50vw, 560px"
width="1200"
height="800"
alt="Four engineers reviewing a design on a laptop">Here the browser is told that the image occupies the full viewport on small screens, half the viewport on medium screens, and about 560 CSS pixels on wider screens. Replace those values with measurements from your own grid and include any column gap or maximum-width behavior that materially changes the slot.
Use density descriptors for fixed-size images
If an image has a fixed display size, such as a 160-by-80-pixel logo, supply variants for standard and high-density displays:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →<img
src="logo.png"
srcset="logo.png 1x, logo-2x.png 2x"
width="160"
height="80"
alt="Company name">In this mode, 1x and 2x describe pixel density. Do not mix width descriptors (w) and density descriptors (x) in one srcset list. The sizes attribute is used with width-descriptor selection; it does not define the selection rule for a density-descriptor list.
Use picture for art direction and formats
Choose picture when a mobile view needs a different crop or when you want to offer formats such as WebP while retaining a fallback:
<picture>
<source
media="(width < 600px)"
srcset="portrait-crop.jpg"
type="image/jpeg">
<source
srcset="landscape.webp"
type="image/webp">
<img
src="landscape.jpg"
width="1200"
height="800"
alt="A hiker standing above a mountain valley">
</picture>The first matching source is considered. The media condition changes the composition for narrow viewports. The type condition allows a browser to skip a format it does not support. The nested img is required: it is the default/fallback, carries the alternative text, and supplies the image behavior when no preceding source is selected.
Keep the essential meaning consistent between crops. If the crop removes information that changes the message, reconsider the art direction or adjust the alternative text and surrounding content.
Combining art direction with multiple resolutions
Each art-directed source can itself have a width-descriptor list:
<picture>
<source
media="(width < 600px)"
srcset="portrait-480.jpg 480w, portrait-800.jpg 800w"
sizes="100vw"
type="image/jpeg">
<img
src="landscape-800.jpg"
srcset="landscape-800.jpg 800w, landscape-1200.jpg 1200w"
sizes="(width <= 900px) 100vw, 900px"
width="1200"
height="675"
alt="A hiker standing above a mountain valley">
</picture>Use this only when both decisions are genuine: the crop changes and each crop has useful resolution alternatives.
Rank #3
Prepare assets and markup
- Export real candidate files at the widths or densities you list. Do not label an 800-pixel file as
1200w. - Measure the layout slot at each breakpoint, including maximum widths and columns.
- Choose width descriptors for fluid or variable slots; choose density descriptors for a fixed display size.
- Set intrinsic
widthandheightvalues that match the fallback asset’s aspect ratio. - Write contextual alternative text. Decorative images generally use an empty
altvalue rather than a filename or redundant description. - Test narrow, wide, and high-density displays, and verify that every URL returns the intended image with the correct content type.
Performance, caching, and reliability considerations
Responsive markup can reduce the chance of sending an oversized candidate to a small slot, but the result depends on accurate hints and browser selection. An illustrative MDN tutorial comparison used an 800-pixel sample file of 128 KB and a 480-pixel sample of 63 KB; that 65 KB difference applies to those example assets, not to every image or page.
Keep candidate dimensions reasonably spaced. A huge number of nearly identical files increases maintenance and cache fragmentation, while only one oversized file defeats the purpose. Use stable, cacheable URLs and avoid changing an image’s content while retaining the same filename unless your cache headers and invalidation strategy account for it.
Lazy loading can be appropriate for below-the-fold images, but do not blindly lazy-load the principal above-the-fold image. Reserve layout space with dimensions or an aspect-ratio rule, and inspect the browser’s network panel to confirm which candidate was fetched at representative viewport and density settings.
Common mistakes and fixes
“The 480w file is displayed at 480 pixels.”
480w reports the source file’s intrinsic width. CSS, the layout, and the browser’s selection algorithm determine the rendered size. Correct the descriptor only if it does not match the actual file.
Leaving out sizes
For width-descriptor lists, an omitted or inaccurate sizes value can make the browser estimate the slot incorrectly. Add conditions that mirror the real layout, in matching order.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Mixing w and x
Use one descriptor mode per candidate list. Convert the list to width descriptors plus sizes for a fluid slot, or to density descriptors for a fixed-size image.
Using picture when only resolution changes
An img with srcset is simpler when the content and crop stay the same. Reserve picture for art direction or format selection.
Missing the fallback img
A picture without its nested img is incomplete. Add the fallback, dimensions, and contextual alt text.
Expecting a guaranteed smallest download
The browser controls the final choice and may account for density, cache, network conditions, or user settings. Validate behavior rather than promising a particular file for every visitor.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Inspect and troubleshoot a responsive image
- Wrong crop: check the order and truth of each
mediacondition, then confirm that the selected source is the intended one. - Blurry image on a high-density screen: provide a sufficiently large candidate or an appropriate
2xasset and verify that CSS is not enlarging a low-resolution file. - Large file still downloads: inspect the computed slot width, the
sizesvalue, device pixel ratio, preload directives, and cache state. - Broken image: open every candidate URL directly, check case-sensitive paths and permissions, and confirm that server responses have valid image MIME types.
- Layout jumps: add accurate intrinsic dimensions or a matching aspect ratio to the
imgand its container. - Modern format is ignored: ensure the
typevalue matches the actual file and that the fallback source remains valid.
Or skip the browser setup
If your goal is to obtain a screenshot of a responsive page rather than implement image markup, ScreenshotNeo provides a website screenshot API and MCP server. A single request can capture a page as PNG, JPEG, WebP, or PDF while you keep the responsive-image work in your site’s HTML.
Recommended Free Tools
With cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
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}`);See the complete parameter reference in the ScreenshotNeo documentation. Before capture, it can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server supplies take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 screenshots, with every feature available on every plan.
Create your free ScreenshotNeo account and start with the 1,000 monthly screenshots.
Frequently Asked Questions
Can I use both srcset and picture on one image?
Yes. Put a width-descriptor srcset on each art-directed source when each crop needs multiple resolutions, and keep a complete img fallback.
Does responsive-image markup require JavaScript?
No. The browser evaluates srcset, sizes, and picture natively in HTML.
Should every image have three or more files?
No. Supply candidates that reflect real layout and density needs. A fixed logo may need two density variants, while a fluid hero may justify several widths.
Quick Recap
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.
