In one paragraph
Images without srcset means some eligible source images lack the responsive-candidate mechanism this check recognises. That can waste transfer bytes when one oversized asset serves every layout, but small fixed images may need no change. Review actual dimensions, pixel density, quality, and selection before converting everything. A source attribute alone does not prove the selected file is appropriate or that loading performance improved.
Why it matters
A displayed CSS width is not the whole image-resolution requirement. A high-density screen can need more source pixels for the same CSS slot, while compression and content detail affect useful quality. Do not call every image wider than a phone's CSS viewport automatically wasteful.
Width-descriptor srcset and sizes let the browser evaluate candidates against an expected layout slot. Density descriptors serve a different pattern and do not need the same sizes calculation. Candidate selection is a browser decision, not a promise to fetch the mathematically smallest file in every situation.
Responsive format alternatives and art direction are related but separate. A picture source can supply candidates, while a single well-chosen small image may already be proportionate. Focus on real transfer and rendering outcomes.
How WebAuditOS evaluates this finding
The supplied source-only rule inspects eligible img references, including documented data-src fallback, and excludes recognised SVG sources. An own srcset or picture source srcset satisfies its presence test.
It runs only when at least three eligible images are counted. Any missing responsive marker then warns informationally; all markers pass. It does not validate sizes, actual resource dimensions, CSS backgrounds, runtime images, or lazy data-srcset. One large critical image can remain ungraded because of the count gate.
How to fix it
- Inspect selected resources in the browser Network panel and compare display size, intrinsic size, density, bytes, and perceived quality. Prioritise expensive content images rather than tiny fixed icons.
- Generate real variants with truthful width descriptors and appropriate encoding. A source marked 1200w should genuinely match that intrinsic width.
- Align the slot hint with actual layout. An illustrative constrained-image pattern is:
<img class="article-photo" src="/photo-600.webp" srcset="/photo-600.webp 600w, /photo-1200.webp 1200w" sizes="(max-width: 600px) 100vw, 600px" width="1200" height="800" alt="Context-appropriate image description">
.article-photo { width: 100%; max-width: 600px; height: auto; }Use actual matching files, ratio, container geometry, and appropriate alternative text. The example is not correct for every grid or padded layout.
- Use density descriptors where the image has an appropriate fixed CSS size, or a framework's supported image pipeline when it generates accurate candidates and metadata. Do not mix descriptor strategies without understanding the rules.
- Preserve intrinsic dimensions or equivalent aspect ratio to reserve space. Smaller transfers should not create unnecessary layout movement.
- Test lazy-loading implementations and the critical image separately. Do not delay the actual initial LCP image merely to reduce early requests.
- Verify responsive crops, picture fallbacks, language-specific imagery, and browser caching. A presence-only pass can still point all candidates at the same oversized file.
- Rescan and compare real selected bytes and user-visible quality. Record justified small-image exceptions rather than manufacturing irrelevant srcset attributes.
What the fix can break
Incorrect sizes can cause oversized or blurry selection. A technically valid candidate list is not evidence of accurate layout information.
Generated variants add storage and build cost. Choose useful breakpoints rather than producing every possible width.
Do not trade readability or meaningful detail for a smaller byte count without checking the actual displayed result.
Questions
Does every small icon need srcset?
Not automatically. Assess fixed size, density needs, quality, and actual savings.
Is sizes required for every descriptor strategy?
No. Width and density descriptors have different models. Review the intended use rather than adding one copied value everywhere.
Can a single large hero be missed by this rule?
Yes. The supplied applicability gate requires at least three counted images.
Which related checks help?
Review modern formats, mobile LCP, and the mobile usability guide.