Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Choose responsive image files from the width of the image’s rendered CSS slot—not from a fixed list of phones, tablets, and desktops. For a fluid image, publish truthful pixel-width candidates in srcset with w descriptors, then use sizes to tell the browser how wide the slot is at each layout condition. CSS still controls the displayed size; the browser uses your hints, viewport, pixel density, zoom, and other factors to select a resource.
The core decision: slot width, not device category
An image in a full-bleed hero, a centered article column, and a two-column card can all appear on the same viewport but require different files. Start by recording the image’s actual CSS slot at each layout state:
- the maximum container width;
- column widths and grid or flex gaps;
- side padding;
- whether the image becomes full-bleed;
- any fixed width, max-width, or aspect-ratio rule.
Do not treat a viewport breakpoint as the slot width. A breakpoint only changes rules; the resulting column may still be much narrower than the viewport.
How srcset and sizes work together
Width descriptors for fluid images
With width descriptors, each number is the intrinsic pixel width of that file, not its CSS width and not a device name. The sizes attribute describes the slot width that applies when a condition matches. The browser combines that estimate with display density and other conditions to choose a suitable candidate.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
<img
src="story-960.jpg"
srcset="story-480.jpg 480w, story-960.jpg 960w, story-1440.jpg 1440w"
sizes="(width <= 600px) 100vw, (width <= 1100px) 80vw, 960px"
width="1440"
height="900"
alt="A cyclist riding beside a lake"
>The first matching sizes condition wins, and the final value is the default. Replace these illustrative values with measurements from your CSS and files. A source file should never claim a width larger or smaller than its actual intrinsic bitmap.
sizes is a hint, not a CSS rule
sizes does not set the element’s rendered width. Keep dimensions in CSS (and use width and height attributes to reserve the aspect-ratio space). If CSS makes the image 640 CSS pixels wide but sizes says 100vw on a 390-pixel viewport, the browser may select an unnecessarily small file. If you understate the slot, a large screen can receive a blurry candidate.
Why the browser may not fetch the file you expect
Candidate declarations are not a promise of one exact download. Viewport interpretation, device pixel ratio, page zoom, network conditions, cache state, and browser algorithms can change the choice. Validate representative cases rather than documenting a guarantee such as “all phones download 480.jpg.”
A practical sizing workflow
- Measure the layout. Inspect the design and CSS at narrow, intermediate, and wide states. Write down slot widths after container constraints, columns, gaps, and padding are applied.
- Generate candidates. Export a small set spanning the useful slot range. For example, if a card ranges from about 280 to 520 CSS pixels, files around 320, 480, and 640 pixels may cover it; the exact set depends on your design and source assets.
- Declare truthful widths. Put each actual file width beside its filename with a
wdescriptor. Do not use viewport breakpoints as descriptors. - Mirror the layout in
sizes. Put the most specific media conditions first and finish with a default length. Use viewport or absolute lengths that describe the slot. Percentages are not valid source-size lengths. - Keep CSS authoritative. Apply the width, max-width, grid, and aspect-ratio rules in your stylesheet. The HTML hint and CSS must describe the same geometry.
- Inspect real selections. Test several viewport widths and pixel densities, then check the selected resource in browser developer tools. Recheck after changing container or grid CSS.
Choosing the right responsive-image mechanism
| Situation | Mechanism | What to describe |
|---|---|---|
| Same image with fluid rendered width | srcset using w plus sizes |
Actual pixel widths and slot width under each layout condition |
| Fixed CSS display size with alternate densities | srcset using x |
1x, 2x, and other density variants for that fixed presentation |
| Different crop or different subject framing | <picture> with conditional <source> elements |
Which art-directed source applies to each condition |
| Lazy-loaded image whose laid-out width is available | sizes="auto" where supported, with fallback sizes |
The concrete laid-out width and a useful fallback for unsupported conditions |
Use x only for a fixed rendered size
Density descriptors are appropriate when CSS keeps the image at a known display size and you provide resolution variants:
Recommended Free Tools
<img
src="avatar-80.jpg"
srcset="avatar-80.jpg 1x, avatar-160.jpg 2x"
width="80"
height="80"
alt="Profile photo"
>When the CSS width changes with the layout, width descriptors and sizes communicate the problem more directly.
Use <picture> for art direction
If a portrait crop is needed on narrow screens and a wide crop on larger screens, resolution variants of one file are not enough. Supply conditional sources and retain an <img> fallback:
<picture>
<source media="(width <= 700px)" srcset="hero-portrait-640.jpg 640w, hero-portrait-960.jpg 960w" sizes="100vw">
<img src="hero-wide-1200.jpg" srcset="hero-wide-800.jpg 800w, hero-wide-1200.jpg 1200w" sizes="(width <= 1100px) 90vw, 1200px" width="1200" height="675" alt="A mountain trail at sunrise">
</picture>Use <picture> when the content or crop changes; use srcset and sizes when the image is the same and only resolution should change.
Deriving sizes from common layouts
Full-bleed image
If the image truly spans the viewport, sizes="100vw" is appropriate. If it has fixed page padding, express the available slot instead—for example, calc(100vw - 2rem)—and verify that expression against the CSS.
Centered content column
For a column capped at 960 pixels, use a condition that reaches the cap and a viewport-based value below it:
sizes="(width <= 1000px) calc(100vw - 2rem), 960px"The 2rem must match the real combined horizontal padding. Do not copy this value if your container uses different gutters.
Two-column grid
Estimate one card’s slot, including the container and gap. If two equal cards share a 1,000-pixel content area with a 24-pixel gap, each is roughly 488 pixels before internal padding. A hint such as (width <= 700px) 100vw, 488px is only correct if the actual CSS behaves that way; measure your own grid and account for its gutters.
Lazy loading and sizes="auto"
For a lazy-loaded image, supporting browsers can use the concrete laid-out width with sizes="auto". Preserve a fallback source size for situations where auto cannot resolve, and verify behavior for the browsers your audience uses:
<img
loading="eager"
src="product-800.jpg"
srcset="product-400.jpg 400w, product-800.jpg 800w, product-1200.jpg 1200w"
sizes="(width <= 700px) 100vw, 50vw"
width="1200"
height="900"
alt="Red backpack"
>Lazy loading does not remove the need to reserve dimensions or to describe the slot accurately. Check the target browser behavior before relying on auto alone.
Viewport setup that affects selection
Include the mobile viewport declaration:
<meta name="viewport" content="width=device-width, initial-scale=1">Without it, some mobile browsers use a wider layout viewport and scale the page down. That changes the viewport interpretation used during responsive-image selection and can make your hint appear wrong on real devices.
Testing and troubleshooting
The browser always downloads the largest file
- Check that every
srcsetwidth is truthful and followed byw. - Confirm
sizesdescribes the slot, not merely the viewport breakpoint. - Check whether zoom, device pixel ratio, cache, or network policy explains the choice.
Images look soft on high-density screens
- Add a candidate large enough for the slot multiplied by the relevant density.
- Ensure your image pipeline did not export a file smaller than its declared width.
- Inspect the computed CSS width; a mistaken
sizesvalue can make the browser choose too small a resource.
Images are much heavier than expected
- Look for an overstated
sizesvalue such as100vwon a narrow card. - Replace unnecessary oversized candidates with files that cover the measured slot range.
- Check whether a desktop
<source>is being selected because its media condition matches unexpectedly.
The layout shifts while images load
Provide accurate width and height attributes or an equivalent CSS aspect-ratio, and keep those dimensions consistent with the source crop.
A mobile device reports surprising viewport behavior
Verify the viewport meta tag, then inspect the browser’s actual layout viewport and computed image width. Desktop emulation and a physical device can make different selections.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →The crop is wrong, not just the resolution
Switch from one srcset list to <picture> with art-directed sources. Resolution selection cannot change the composition of the image.
Performance, reliability, and maintenance
Responsive images reduce needless transfer when the candidate set and slot hint match. They also add operational work: source generation, naming, cache invalidation, and testing after CSS changes. Keep candidate sets small enough to maintain but broad enough to avoid large jumps between widths. Re-measure when a container, grid gap, or breakpoint changes.
Selection remains browser-controlled, so monitor real pages rather than asserting that every browser downloads one named file. A useful validation matrix includes narrow and wide viewports, at least one high-density display, zoomed pages, cached and uncached loads, and the actual production layout.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your goal is to capture a page image rather than author responsive HTML, ScreenshotNeo provides a website screenshot API and MCP server. One request returns PNG, JPEG, WebP, or PDF, and you can still control viewport, device presets, full-page behavior, CSS, JavaScript, waits, selectors, cookies, headers, geolocation, timezone, blocking, resizing, caching, and more.
Use the API call below (the complete parameter reference is in the ScreenshotNeo documentation):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport 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)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo accepts cookie and consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be disabled. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed as clean shots, and response headers identify the page verdict and billing status. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000, and every feature is included on every plan. Create a free ScreenshotNeo account.
FAQ
Should I create one image for each phone model?
No. Create candidates for the range of CSS slot widths your layout produces, then let the browser account for density and other selection factors.
Can sizes replace responsive CSS?
No. CSS determines the rendered dimensions; sizes only supplies source-selection information.
When is a service for generating variants useful?
It is optional when your stack cannot efficiently generate and deliver the candidate files. Your layout measurements and sizes logic are still required.
Frequently Asked Questions
Do percentages work as values in sizes?
No. Use valid viewport or absolute lengths that represent the slot, such as 100vw, calc() expressions, or a pixel cap.
Can I guarantee which candidate a browser downloads?
No. The browser may consider viewport, density, zoom, cache, network conditions, and its own selection algorithm.
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.
