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 →Use srcset to list real image files at different resolutions and sizes to tell the browser how wide the image slot is expected to be. CSS still controls the image’s rendered layout. The browser combines your candidate list and slot hint with conditions such as viewport width, pixel density and zoom, then chooses a suitable request. For fluid images, use width descriptors such as 400w and pair them with sizes. For a fixed display size with standard- and high-density alternatives, use density descriptors such as 1x and 2x. Do not mix the two descriptor types in one srcset.
What srcset and sizes actually do
A normal <img> element names one resource in src. That resource may be far larger than necessary on a phone or too small for a high-density display. Responsive-image markup supplies alternatives so the browser can request a file that is appropriate for the image’s expected display conditions.
As an Amazon Associate I earn from qualifying purchases.
srcset is a comma-separated list of candidate URLs and descriptors. The descriptor tells the browser what each candidate represents. A width descriptor, such as 800w, states that the referenced file is intrinsically 800 pixels wide. A density descriptor, such as 2x, states that the file is intended for a display density of two device pixels per CSS pixel.
sizes is used with width descriptors. It describes the expected width of the image’s layout slot under specified media conditions. It is a selection hint, not a CSS rule: it does not set the image’s width, override a grid, or make an image fluid. Your CSS determines the rendered slot; sizes should describe that slot accurately enough for the browser to choose a sensible candidate.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
The browser is not a rigid breakpoint switch controlled entirely by the author. User agents may weigh pixel density, zoom, rendering conditions and potentially network conditions when selecting among valid candidates. Therefore, describe the candidates as options from which the browser chooses, not as a promise that one exact URL will be downloaded at every viewport width.
Choose the right descriptor
| Situation | Descriptor | Needs sizes? |
Typical example |
|---|---|---|---|
| The rendered slot changes with the layout | Width (w) |
Yes | A card image that is full-width on a phone and half-width on a desktop |
| The rendered slot is effectively fixed, but displays have different pixel densities | Density (x) |
No | A logo displayed at one CSS size with a sharper 2x file available |
| The content or crop changes by condition | <picture> with <source> elements |
Often, depending on the source markup | A portrait crop on a phone and a wide composition on desktop |
Width and density descriptors solve different problems. A width candidate describes an intrinsic file width; it does not mean “use this file below a particular breakpoint.” A density candidate describes an alternative for the same display size. Mixing 400w and 2x in one srcset makes the candidate list invalid and prevents the browser from interpreting it as intended.
Width descriptors for fluid layouts
Use width descriptors when the image’s CSS width varies. The browser needs both the candidate widths and an estimate of the slot width. That estimate comes from sizes.
Density descriptors for fixed-size alternatives
Use density descriptors when the image occupies a known CSS size and you are providing versions for different pixel densities. In this form, src remains useful as a fallback and can also serve as the 1x candidate. Keep all candidates in the list expressed as densities.
How browser selection works
- The browser parses the
<img>element and discovers the candidates insrcset. - If the list uses width descriptors, it evaluates
sizesto estimate the image’s slot width for the current conditions. If the list uses density descriptors, it evaluates the density alternatives for the fixed display size. - It considers the display environment, including pixel density and zoom, and can take other rendering conditions into account.
- It chooses a candidate that is suitable for the current situation. The choice is discretionary, so a developer’s predicted URL may differ from the request shown in a browser’s Network panel even when the markup is valid.
This is why srcset is not a JavaScript breakpoint system. You provide truthful information about available resources and layout; the user agent makes the final resource decision.
Build a width-based responsive image step by step
1. Establish the CSS layout first
Decide how wide the image actually is in each part of the design. For example, a card image might occupy the full viewport width up to 600 CSS pixels and half of the viewport above that. CSS could express the layout like this:
.card-image {
display: block;
width: 100%;
height: auto;
}
.card {
width: 50vw;
}
@media (max-width: 600px) {
.card {
width: 100vw;
}
}The exact CSS will vary with your grid, max-widths, gutters and padding. The important step is to determine the slot from the real layout instead of choosing breakpoints because they are common in tutorials.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
2. Create candidates that really exist
Make or obtain image files at useful intrinsic widths. In the following example, the files are 400, 800 and 1,200 pixels wide. The numbers in the descriptors must match those files’ actual intrinsic widths; they are not arbitrary labels.
3. Describe the slot with sizes
For the CSS pattern above, the slot is expected to be the viewport width through 600 pixels and half the viewport above that. The corresponding hint is:
sizes='(max-width: 600px) 100vw, 50vw'The first condition describes the narrow-layout case. The final value describes the default case when that condition does not apply. If your design includes a fixed gutter, a constrained container or a multi-column gap, write the actual slot rather than using an overly broad 100vw or 50vw.
4. Put the information on the <img>
<img
src='photo-800.jpg'
srcset='photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w'
sizes='(max-width: 600px) 100vw, 50vw'
width='1200'
height='800'
alt='A description of the photograph'>src supplies a fallback for browsers that do not support responsive-image candidates. The width and height attributes describe the source image’s intrinsic dimensions and allow the browser to reserve the correct aspect ratio before the file arrives. They do not force the image to render at 1,200 by 800 CSS pixels. The CSS rule can still make the image fluid.
5. Confirm the request in representative conditions
Inspect the image request in the browser’s Network panel at several viewport widths and pixel densities. Compare the actual rendered slot with the slot described by sizes. A candidate that looks unexpected is not automatically an error: selection remains a user-agent decision. First verify that the hint and the files are truthful.
Writing an accurate sizes expression
Think of sizes as a compact description of the image’s layout geometry. Each media condition is paired with the expected slot width. Common length forms include viewport-relative values such as 100vw and 50vw, but the value should represent the slot created by your CSS, including columns and gutters where relevant.
Full-width content
If the image genuinely spans the viewport in the relevant layout, 100vw can be appropriate. Do not use it merely because the image happens to be inside a fluid container; a centered container that is narrower than the viewport needs a narrower estimate.
Two-column content
If an image occupies one half of a two-column layout above a breakpoint, a value such as 50vw may be a reasonable approximation only when the columns and gap make that estimate accurate. If each column is constrained by a max-width or separated by substantial padding, describe that real geometry instead.
Fixed or bounded containers
When a container stops growing at a maximum width, the image’s slot may stop growing as well. Your hint should reflect the bounded slot rather than implying that it continues to equal the viewport forever. Keep the expression synchronized with changes to the grid; stale sizes values can make the browser request files that are unnecessarily large or too small.
Why an inaccurate hint matters
The browser uses the estimated slot width together with display density to compare candidates. If you claim a slot is much wider than it really is, the browser may fetch a larger file than needed. If you claim it is much narrower, it may choose a file that cannot provide the desired detail at the actual rendered size. The image may still be displayed correctly, but the transfer will be poorly matched to the layout.
Keep HTML dimensions and CSS responsibilities separate
Responsive images often raise a concern: if width and height are present, will the image stop being responsive? No. Those attributes communicate intrinsic dimensions and aspect ratio. CSS controls the rendered size.
img {
max-width: 100%;
height: auto;
}With this kind of CSS, an image can shrink with its container while retaining its aspect ratio. Set the attributes to the dimensions of the source image you are describing, not to an arbitrary device width. If the source files share the same composition and aspect ratio, one intrinsic ratio is usually appropriate; if they do not, revisit the markup and consider whether you need art direction instead of resolution switching.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsKnow when to use <picture>
srcset on <img> is the direct pattern when the image content stays the same and only resolution changes. It does not tell the browser to select a different crop, subject framing or composition.
Use <picture> when the source itself must change. Typical cases include:
- A tightly framed portrait on a narrow screen and a wide landscape composition on a large screen.
- A different crop that keeps the subject visible in each layout.
- Alternative source formats selected through
<source>elements, with a fallback<img>.
<picture>
<source media='(max-width: 600px)' srcset='portrait-800.jpg'>
<source media='(min-width: 601px)' srcset='landscape-1200.jpg'>
<img src='landscape-800.jpg' alt='A description of the scene' width='1200' height='800'>
</picture>The fallback <img> remains essential. Use picture for art direction or source selection; do not expect a list of width candidates alone to alter the image’s content.
Common mistakes and how to fix them
Using width descriptors without a truthful sizes value
Width candidates need a slot estimate. Add sizes and derive it from the actual CSS layout. If you change the grid, update the hint at the same time.
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 →Putting the wrong intrinsic width in a descriptor
Check the dimensions of every referenced file. A file named “800” that is actually 760 pixels wide should not be advertised as 800w. Generate filenames and descriptors from measured image metadata where possible, and verify the files after an optimization step that may change dimensions.
Best Value
Mixing w and x
Choose one model for each candidate list. Use width descriptors plus sizes for fluid slots, or density descriptors for fixed-size alternatives. Do not combine the models to represent unrelated cases.
Expecting sizes to resize the image
If the image is too wide, too narrow or overflowing, fix the CSS. Change sizes only when the CSS slot has changed or the hint was inaccurate; it is not a substitute for layout rules.
Treating a browser’s request as a deterministic breakpoint result
Inspect the viewport, zoom and display density along with the request. The browser may select a different valid candidate because its algorithm has discretion. Focus on whether the chosen resource is appropriate for the actual slot, not whether it matches a hard-coded URL expectation.
Recommended Free Tools
Forgetting the mobile viewport
Make sure the document includes the viewport meta element so mobile browsers use the expected viewport width:
<meta name='viewport' content='width=device-width, initial-scale=1'>Without the expected viewport configuration, your media conditions and slot assumptions may not describe what the browser is actually laying out.
Trying to solve a crop problem with more resolutions
If the subject is framed incorrectly at a particular width, create an alternate composition and use picture. More width candidates improve resolution choices; they do not perform art direction.
A practical troubleshooting sequence
- Check the viewport setup. Confirm the viewport meta element is present and that the tested device is using the intended viewport width.
- Measure the rendered slot. Use developer tools to determine the image’s CSS width at the failing viewport, including container padding, column gaps and max-width constraints.
- Audit every candidate. Open or inspect each referenced file and confirm that its intrinsic width matches its
wdescriptor. - Recalculate
sizes. Make each condition describe the measured slot at that condition. Remove assumptions based solely on conventional breakpoint values. - Inspect the Network panel. Record the viewport, zoom and pixel density while checking the selected request. A different candidate can still be a valid browser choice.
- Check the image’s purpose. If the problem is composition, format or crop rather than resolution, switch to
pictureand appropriatesourceelements.
Fixed-size and fluid implementations compared
| Question | Fluid, width-based implementation | Fixed-size, density-based implementation |
|---|---|---|
| Does the CSS slot vary? | Yes; it changes with the layout | Usually no; the display size is known |
| Candidate notation | image-400.jpg 400w |
logo-2x.png 2x |
Role of sizes |
Describes the expected slot and is required for the width-based pattern | Not used to describe a fluid slot |
| Best example | Article, gallery or card images that span different column widths | A logo or icon rendered at one CSS size with sharper alternatives |
| Main failure to avoid | A slot estimate that does not match the CSS layout | Mixing density candidates with width candidates |
Implementation checklist
- Start with a working responsive CSS layout.
- List the image files you actually serve and record each intrinsic width.
- Use width descriptors for fluid slots and pair them with a slot-accurate
sizesexpression. - Use density descriptors only for alternatives intended for a fixed CSS display size.
- Keep
srcas a fallback, especially when broad browser compatibility matters. - Set truthful
widthandheightattributes to communicate intrinsic dimensions and reserve aspect ratio; let CSS control the rendered size. - Use
picturewhen the crop, composition or source format must change. - Test at representative viewport widths and display densities, and interpret requests in light of browser selection discretion.
The core rule to remember
srcset supplies alternatives, sizes describes the expected slot, and CSS performs the actual layout. When the image is fluid, provide truthful width candidates and keep the slot hint synchronized with the stylesheet. When the display size is fixed, use density candidates. When the content itself must change, use picture. That separation gives the browser enough information to choose an appropriate resource without device-specific JavaScript.
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.
