Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use srcset on an <img> when every candidate shows the same image and only the delivered resolution or intrinsic width should change. Use <picture> when the source itself must change—for example, a different crop, a media-specific composition, or an alternative format. A <picture> element still ends with a normal <img>, which supplies the fallback, alternative text and displayed image.
The two features are complementary. A <source> inside <picture> can have its own srcset and sizes, allowing art direction or format selection first and responsive candidate selection second.
The difference at a glance
srcset is a candidate list attached to an image element. It gives the browser several files representing the same visual content, then lets the browser choose one based on the expected rendered slot and, when applicable, the display pixel density. The browser makes that choice before loading the image, so it can avoid downloading a needlessly large file.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC 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 & 11<picture> is a source-selection container. It lets you provide different image sources selected by media conditions or supported file type. This is the right abstraction when the image content, framing or encoding should change rather than merely its resolution.
#1 Best Overall
| Need | Prefer | Why |
|---|---|---|
| Same image at several responsive widths | <img srcset> with width descriptors and sizes |
The browser compares candidate widths with the declared layout slot. |
| Same image at a fixed CSS size but different pixel densities | <img srcset> with density descriptors such as 1.5x and 2x |
The browser can choose a file appropriate for the display density; a sizes list is not needed for this pattern. |
| Different crop or composition at a breakpoint | <picture> with source media |
Each source can show a deliberately different framing, known as art direction. |
| AVIF or WebP with a traditional-format fallback | <picture> with source type, followed by <img> |
The browser skips unsupported types and continues to the next source or fallback image. |
| Art direction plus several widths of each crop | <picture> whose sources use srcset and sizes |
The outer element selects the appropriate source family; srcset selects the best rendition within that family. |
MDN’s guides describe these responsive-image patterns in detail: responsive images in HTML, the <picture> element and the <img> element.
How srcset selection works
Width descriptors for fluid or responsive slots
A width descriptor is a number followed by w, such as 480w or 800w. The number must match the candidate file’s intrinsic pixel width. Pairing those candidates with sizes tells the browser how wide the image is expected to render under different layout conditions.
<img
srcset='small.jpg 480w, large.jpg 800w'
sizes='(width <= 600px) 480px, 800px'
src='large.jpg'
width='800'
height='533'
alt='A cyclist on a mountain road'>In this example, the first sizes condition says that a viewport no wider than 600 CSS pixels gets an image slot of about 480 CSS pixels. For larger viewports, the final value says the slot is about 800 CSS pixels. The browser combines that slot estimate with device pixel ratio and the available candidates; it does not blindly choose the file whose filename sounds smallest.
The values in sizes should describe the rendered slot, not the image’s intrinsic dimensions. If the image occupies half of a wide two-column layout, a value such as 50vw may be more accurate than a fixed pixel value. If CSS changes the layout at several breakpoints, list the corresponding slot sizes in the same order as those conditions and finish with a default value.
Density descriptors for a fixed-size image
When the CSS dimensions are effectively fixed and you only need sharper files for high-density displays, use density descriptors such as 1x, 1.5x and 2x.
<img
srcset='logo.png 1x, logo@2x.png 2x'
src='logo.png'
width='200'
height='80'
alt='Acme conference logo'>Here the image is displayed at 200 by 80 CSS pixels. A device with a two-times pixel density can select the 400 by 160 intrinsic-pixel candidate. This density-selection pattern does not use sizes; sizes is the slot hint for width-descriptor candidates, not a replacement for density descriptors.
Do not mix descriptor systems
One srcset candidate list must use either width descriptors or density descriptors. Do not combine 480w with 2x in the same list. Width values also need to be truthful: a file declared as 800w should have an intrinsic width of 800 pixels, rather than being a smaller file renamed to imply a larger one.
Free tools Windows power users keep installed
One-click scans. No signup required.
When srcset is the right choice
The visual content stays the same
Use an image element with srcset when every candidate is the same scene, illustration or product image and differs only in resolution or compression. Typical cases include a hero photograph that scales with the content column, a thumbnail that appears at several card widths, or a logo rendered at one CSS size but on screens with different pixel densities.
The layout determines the required width
Width descriptors are especially useful when an image can render at many sizes. Provide enough candidates around the actual layout slots rather than creating a file for every possible viewport. A page with 320, 480, 768 and 1,200 CSS-pixel slots might use candidates near those widths, then let the browser select the closest suitable resource.
The browser should make the network decision
Responsive image selection belongs in the markup because browsers can inspect it early. MDN notes that a browser may begin preloading images before CSS and JavaScript have been fully interpreted; a script that swaps a source after load can therefore cause an unnecessary initial download followed by the replacement request. Declarative srcset and sizes let the browser make one informed request whenever possible.
Writing an accurate sizes attribute
sizes is a list of media conditions and slot lengths. The browser uses the first matching condition and ignores later conditions in that request; the final, conditionless value is the fallback.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →<img
srcset='card-320.jpg 320w, card-640.jpg 640w, card-960.jpg 960w'
sizes='(width <= 700px) 100vw, (width <= 1100px) 50vw, 33vw'
src='card-960.jpg'
alt='A bowl of seasonal fruit'>This declares a full-viewport slot up to 700 pixels, a half-viewport slot up to 1,100 pixels, and a one-third-viewport slot above that. Those numbers should mirror the actual CSS layout, including gaps, sidebars and maximum content widths. If the image is capped at 640 pixels inside a centered container, saying 100vw would overstate its slot and may make the browser fetch a larger file than necessary.
Do not use sizes to express a crop or a format preference. It answers one question only: how wide will the selected image slot be? Use media on a <source> for an art-direction condition, and use type for a format-support condition.
When to use <picture>
Art direction: the crop or composition changes
Art direction means intentionally serving different framing, not merely shrinking the same image. A wide landscape may work on a desktop banner while a tighter portrait crop keeps the subject visible on a phone.
<picture>
<source media='(width <= 600px)' srcset='portrait-600.jpg'>
<source media='(width > 600px)' srcset='landscape-1200.jpg'>
<img src='landscape-1200.jpg' alt='A chef plating a dish in a restaurant kitchen'>
</picture>The browser evaluates the ordered <source> elements and uses the first one whose conditions are satisfied and whose type, if supplied, is supported. The child <img> remains essential: it is the fallback when no source matches, and it is the element that is actually displayed and carries the alternative text.
Format negotiation
To offer a modern format while retaining a broadly supported fallback, put a type on each candidate source.
<picture>
<source type='image/avif' srcset='photo.avif'>
<source type='image/webp' srcset='photo.webp'>
<img src='photo.jpg' alt='Snow-covered forest at sunrise'>
</picture>A browser that supports AVIF can use the first source. A browser that does not can try WebP, then the JPEG fallback. The format sources should represent the same visual content unless you also deliberately apply media conditions for art direction.
Use both media and type only when both matter
You can combine a media condition and a type condition on one source, but each additional condition narrows eligibility. Keep the source order deliberate: put the most specific or preferred option first, followed by alternatives and finally the fallback image.
Combining <picture> with srcset and sizes
For a design that needs different crops and responsive widths within each crop, give each source its own candidate list.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →<picture>
<source
media='(width <= 600px)'
srcset='portrait-400.jpg 400w, portrait-800.jpg 800w'
sizes='100vw'>
<source
srcset='landscape-800.jpg 800w, landscape-1600.jpg 1600w'
sizes='(width <= 1200px) 100vw, 1200px'>
<img
src='landscape-1600.jpg'
width='1600'
height='900'
alt='A hiker crossing a ridge at dawn'>
</picture>The first source handles the narrow-screen crop and chooses between two portrait widths. If its media query does not match, the second source handles the landscape family and uses its own slot calculation. The fallback <img> protects older or unusual user agents and supplies the semantic image element.
Fallbacks, accessibility and layout stability
Keep the fallback <img> inside <picture>
Do not place a <picture> next to a separate image and expect the browser to coordinate them. The child <img> is the required fallback and the rendered image element for the picture pattern. Give it a conventional src that is useful when none of the sources can be used.
Write alternative text for the message, not the file
If the image conveys information, put concise equivalent text in the fallback alt attribute. The selected source does not get a separate alt; all art-directed and format variants should communicate the same essential message. For a purely decorative image, use an empty alt='' so assistive technology can skip it.
Reserve space with intrinsic dimensions
Set appropriate width and height attributes on the <img> where the aspect ratio is known. The browser can use those intrinsic dimensions to calculate the image box before the file arrives, reducing layout movement. If art-directed crops have different aspect ratios, choose dimensions that reflect the fallback and use CSS or source-specific aspect-ratio rules carefully so the reserved space matches the selected composition.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesHow media conditions differ from sizes
Use media on a <source> when the source itself should change: a portrait crop below a breakpoint, for example. Use sizes when the same source family can render at different slot widths. Duplicating the same layout breakpoint in both attributes can make maintenance harder and produce contradictory declarations.
A practical separation is:
media: selects a different crop, composition or source family.sizes: describes the width of the chosen source’s rendered slot.srcset: lists the files available within that source family.type: states which file format a source uses.
Implementation workflow
- Classify the visual change. Confirm whether every candidate shows the same content. If only resolution changes, start with
<img srcset>. If the crop, composition or format changes, plan a<picture>. - Measure real layout slots. Inspect the CSS at the page’s breakpoints and record the image’s rendered width. Use those measurements to write
sizesrather than guessing from the viewport alone. - Generate truthful candidates. Make each width-descriptor file match its declared intrinsic width. For density candidates, create files that correspond to the declared pixel-density multiplier.
- Add the fallback first-class image. Include a useful
src, meaningfulalttext when needed, and intrinsicwidthandheightvalues where the aspect ratio is known. - Add format or art-direction sources in priority order. Put supported modern formats or the most specific media crop first, then broader alternatives, and keep the fallback
<img>last. - Check source selection at representative widths. Resize the viewport across each condition and confirm that the intended crop, format and candidate width are selected. Also test a browser that does not support one of the offered formats.
- Check accessibility and failure behavior. Disable images or use a screen reader to verify that the fallback text remains useful. Confirm that a missing candidate does not remove the image entirely.
Common mistakes and how to correct them
Adding srcset without sizes for width candidates
Without a slot hint, the browser cannot accurately estimate how wide a width-descriptor image will render. Add a sizes value that mirrors the layout. This warning does not apply to a list made exclusively of 1x, 1.5x or 2x density descriptors.
Using <picture> for ordinary resizing
If every file is the same crop and differs only in dimensions, multiple media-specific <source> elements add complexity without providing art direction. Use one <img> with width candidates and an accurate sizes attribute.
Putting alt on a <source>
<source> does not carry the accessible name. Put alt on the child <img>, and ensure that all selected variants represent the same meaning unless the surrounding text explains the difference.
Mixing w and x descriptors
Choose one candidate-selection model per list. Separate image elements or separate picture sources can use different models, but a single srcset cannot mix them.
Using JavaScript to swap every image after load
A post-load swap can arrive too late: the browser may already have fetched the initial src. Declarative responsive-image markup lets preload and selection happen earlier and avoids making JavaScript responsible for a basic resource-selection problem.
Leaving out intrinsic dimensions
Even a correctly selected image can cause visible layout movement if the browser does not know its aspect ratio in advance. Add dimensions to the fallback image when possible and keep the declared ratio consistent with the resource.
Browser support and maintenance
MDN describes <picture> as widely available across browsers since March 2016. That is a documentation support statement, not a measured percentage of global users. You should still test the actual browsers, embedded webviews and assistive technologies that your audience uses, especially when relying on newer image formats.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Maintain responsive images as a coordinated set. When the layout changes, revisit sizes; when a crop changes, regenerate every art-directed source; when a format pipeline changes, keep a working fallback src. Filenames and URL paths are implementation details, so avoid encoding a misleading width or density in a name that no longer matches the file.
Quick Recap
A concise decision checklist
- Is the visual content identical in every candidate? Choose
<img srcset>. - Does the image occupy different widths as the layout changes? Use width descriptors and write
sizes. - Is the CSS display size fixed but the screen density different? Use density descriptors such as
1xand2x; omitsizes. - Does the crop or composition change at a breakpoint? Use
<picture>with orderedsource mediaelements. - Do you want AVIF or WebP with a fallback? Use
source typefollowed by a normal<img>. - Do you need both art direction and responsive renditions? Put
srcsetandsizeson each relevant<source>. - Does the fallback have useful
alt,src,widthandheightvalues? Verify those before shipping.
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.
