Resources · 98
Responsive images: test srcset, sizes and cropping
Deliver an appropriate variant without losing the subject, readability or layout stability.
· 3 min
What this guide helps achieve
- Measure the actual slot
- Separate resolution and composition
- Preserve subject and dimensions
- Inspect the downloaded resource
- Review quality and loading
Quick check
- Should sizes always be 100vw?
- Can mobile use a different crop?
- How can the chosen file be confirmed?
Step-by-step method
- 01
Measure the actual slot
Record image width in each layout, not just viewport width. A column can occupy only part of the screen. Include text, zoom and narrow devices in acceptance checks.
Output: Observed widths and ratios.
- 02
Separate resolution and composition
Use srcset and sizes to offer resolutions suited to displayed space. Use picture when crop or format must change. Retain a fallback image and a role-appropriate text alternative.
Output: Variants and selection conditions.
- 03
Preserve subject and dimensions
Compare crops so essential labels, subjects and captions remain present. Reserve space for the displayed ratio; different compositions may need different ratio rules.
Output: Crops and reserved space.
- 04
Inspect the downloaded resource
Record currentSrc, intrinsic dimensions, displayed slot and transferred bytes. Replay with controlled cache and relevant pixel densities. CSS reduction can still display an unnecessarily large file.
Output: Actually transferred resource.
- 05
Review quality and loading
Check text, contrast, transparency and artefacts in final rendering. Avoid delaying essential initially visible images. Limit secondary-media work without making access depend on fragile scripting.
Output: Quality and loading acceptance.
Fictional acceptance-test scenarios
These proposed cases are not client observations. Adapt data, permissions and acceptance criteria to your authorised environment.
| Situation to exercise | Result to check | Evidence to retain |
|---|---|---|
| A card is 320 CSS pixels wide but sizes declares the whole viewport. | Compare rendered width with the declaration to avoid unnecessarily heavy selection; test several densities and viewports. | Measured width, currentSrc, dimensions and transferred bytes. |
| A mobile crop removes a detail needed to understand the scene. | Choose context-appropriate cropping or an editorial variant, then review alternative text. | Breakpoint screenshots and information still visible. |
| An image arrives after text without reserved space. | Set suitable dimensions or aspect ratio and observe actual stability, without prioritising every image. | Dimensions, loading order and observed layout movement. |
Reusable worksheet
Complete with your authorised observations. These fields are a working template, not observed results.
| Field | Information to record |
|---|---|
| Slot | Widths and ratios per layout |
| Variants | Formats, dimensions and bytes |
| Selection | srcset, sizes, picture and received file |
| Quality | Subject, alternative, zoom and loading |
Worked example
Illustrative situation
Fictional example: a 340 px card receives a 2,400 px image prepared for full-width display.
Decision and expected evidence
Acceptance corrects the slot description, offers multiple variants and verifies resource selection while preserving necessary detail.
Distinguish the mechanisms
| Mechanism | Purpose | Check or limitation |
|---|---|---|
| srcset and sizes | Resolution selection | Describe the actual slot |
| picture | Format or art direction | Retain fallback img |
| CSS | Screen dimensions and crop | Does not alone reduce transfer |
Management indicators
| Indicator | What it measures | First action |
|---|---|---|
| Transferred bytes | Cost of received variant | Compare with actual use |
| Readability | Information retained in rendering | Review crop or compression |
| Stability | Space reserved before receipt | Correct dimensions and ratios |
Common pitfalls
- Describe the actual slot
- Retain fallback img
- Does not alone reduce transfer
Frequently asked questions
Should sizes always be 100vw?
No. Describe the image slot: a card or column may not fill the viewport.
Can mobile use a different crop?
Yes when useful information remains. Check ratio, alternative and subject in each composition.
How can the chosen file be confirmed?
Inspect currentSrc and the actual transferred request under the tested cache and screen conditions.
Further reading and tools
Editorial resources to extend the method.
- Française du Numérique — acceptance log External link
Record tests, issues and evidence as part of a wider website review.
Official references
References consulted: . The method and worksheet propose checks to adapt to your context; they do not constitute certification.
Continue exploring
Related analysis
