Open code, practice, and notes →
Download source with English comments · for reading
HTML · 19 Responsive Image Selection
Series contents · Technology map
Stage: Native UI and Media · Editable example · Storage ID: html-step-19
Goals and learning outcomes
- Record currentSrc and the actual display width on two screens.
- Keep alt text with the same meaning for every candidate.
Prerequisites
The work and experiment records from Unit 18, “Media Captions and Alternatives”.
Key concepts and explanations
Source Candidates
srcset provides image candidates by resolution or width. The browser considers both screen conditions and candidate information.
Display Size
sizes specifies the expected display width when selecting width-descriptor candidates. A mismatch with the actual CSS display size can cause unnecessary downloads.
Practice setup
First check the execution scope guidance on the example screen. The following environment is for extending the assignment in a separate project. Implement it yourself in a separate local project and check it with browser developer tools. Prepare HTML and any necessary image/media files in a separate folder and open them through a local HTTP server. Check with the Elements and accessibility panels and actual keyboard operation.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- In responsive-images.html, prepare narrow and wide screens, and requests with the cache cleared.
- Create 3 images of different widths and srcset·sizes, then check currentSrc and request sizes.
- Run with narrow and wide screens, and requests with the cache cleared. Results to check: Record currentSrc and the actual display width on two screens. Keep alt text with the same meaning for every candidate. Record expected and actual results separately.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Viewport | 360px | 1200px | Pre-run hypothesis: The selected candidate may change. Keep other conditions fixed and record the actual result separately after running. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Record currentSrc and the actual display width on two screens.
- Keep alt text with the same meaning for every candidate.
Self-check
- Does the browser always choose the smallest candidate?
- How do sizes and the width attribute differ?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
300/600/1200w SVG candidates are selected through actual srcset behavior. sizes, DPR, and the preview viewport affect selection. The data URLs are not for comparing network transfer sizes. Scope document body/html selectors within Shadow DOM. @media responds to the outer preview viewport, while the width slider changes only the container. Network access, form navigation, and iframe execution are restricted.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: Media Captions and Alternatives · Next: picture and Format Fallbacks