HTML & CSS / Adaptable interfaces / Lesson 11

Responsive images and media sizing

Choose appropriate image resources, preserve aspect ratios, and distinguish resource selection from layout and text alternatives.

About 4 min readContent reviewed 2026-10-25

On this page

Lesson goals

Separate three image decisions
Use a fully local image fixture
Measure delivery and visual stability

Separate three image decisions

An image component needs an information decision, a layout decision, and a delivery decision. Alternative text communicates purpose, CSS determines how the box fits, and source selection determines which resource the browser fetches. A smaller file cannot repair an irrelevant alternative, and max-width cannot prevent downloading an oversized source by itself. State whether the image is informative, decorative, or functional before styling it. Then determine its intended aspect ratio and crop policy. Finally choose resources that fit expected display sizes and device densities without assuming one screen or network condition describes every visitor.

Preserve dimensions and useful content

For a flexible image in normal flow, max-inline-size: 100% and block-size: auto commonly prevent enlargement beyond its container while retaining its intrinsic aspect ratio. Displaying it as a block removes ordinary inline baseline spacing when that is desired. Explicit width and height attributes help reserve space. object-fit: cover fills a fixed media box by cropping, whereas contain preserves the whole object and can leave unused space. Neither choice is universally correct: a decorative photograph and a diagram with labeled edges have different crop tolerances. Check the actual focal content rather than accepting an aesthetically filled rectangle as proof of correctness.

Use a fully local image fixture

The first example embeds a small SVG illustration as a data URL, so the document remains self-contained without requiring a remote image service. The intrinsic dimensions reserve a two-to-one ratio, and CSS scales it down when necessary. The alternative describes its role as a sample diagram rather than claiming it is a photograph. SVG here is simply an embedded image resource; it does not require scripting or an external asset. In production, choose an appropriate format and caching strategy for the actual image, and avoid embedding large resources indiscriminately merely because a teaching example uses a data URL.

html Flexible local image

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexible local image</title>
<style>
img { display: block; max-inline-size: 100%; block-size: auto; }
</style>
</head>
<body>
<main><h1>Flexible image</h1><img width="200" height="100" alt="Sample diagram: a blue panel" src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27100%27%3E%3Crect width=%27200%27 height=%27100%27 fill=%27%23164e9a%27/%3E%3C/svg%3E"></main>
</body>
</html>

Expected output

A blue two-to-one image fits within its container.

The embedded image has a known ratio and can shrink without distortion. No external request is necessary for the fixture.

Understand candidates and art direction

srcset with width descriptors offers candidate resource widths, and sizes describes the intended rendered slot under media conditions. The browser uses those hints with device and environment information; authors should not promise one exact candidate on every machine. Density descriptors are a different form and must not be mixed incorrectly with width descriptors in one list. picture can provide art direction or format alternatives through ordered source elements, with img as the fallback and owner of alternative text. The second complete document demonstrates picture using a local embedded image; its two branches intentionally share a fixture rather than inventing external filenames that would fail to load.

html Picture structure

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Picture structure</title>
<style>
img { max-inline-size: 100%; block-size: auto; border: 1px solid; }
</style>
</head>
<body>
<main><h1>Picture fallback</h1><picture><source media="(min-width: 40rem)" srcset="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27100%27/%3E"><img width="200" height="100" alt="Empty sample image for source-selection inspection" src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27100%27/%3E"></picture></main>
</body>
</html>

Expected output

A bordered local image slot with a valid picture fallback.

The source condition demonstrates selection structure while img remains the fallback and alternative-text owner. Both branches use the same local fixture, so this does not claim a bandwidth improvement.

Measure delivery and visual stability

Use the Network panel to inspect actual resource dimensions and bytes, then resize and test density changes in a controlled setup. Browser caches can preserve a previously fetched candidate, so a resize alone is not a clean experiment in selection. Check layout movement during slow loading and ensure important above-the-fold images are not lazily delayed without reason. loading="lazy" can help deferred images but is a hint with browser behavior, not a guarantee of zero work until scrolling. Video and iframe content need similar sizing and information decisions, with captions or other alternatives where required. Always retain essential content when media fails.

Common errors and fixes

An image stretches vertically

Why it happens: Both rendered dimensions were forced independently.
How to fix it: Preserve the ratio or use an intentional object-fit policy.
Prevent it next time: Test portrait and landscape resources.

A responsive page still downloads huge images

Why it happens: CSS shrinks display but resource selection remains oversized.
How to fix it: Provide appropriate candidates and correct slot guidance.
Prevent it next time: Inspect downloaded bytes rather than screenshots alone.

A chart loses labels under cover cropping

Why it happens: A fill policy removed essential edge content.
How to fix it: Use contain or redesign the media slot.
Prevent it next time: Review informative content after every crop.

Check your understanding

1. Explain the different roles of sizes and max-inline-size.

Show worked solution

sizes helps the browser estimate an image’s display slot when choosing width-described srcset candidates. max-inline-size constrains the rendered box in CSS. They should agree with the layout, but one is a resource-selection hint and the other a layout rule; neither replaces the image’s text alternative.

2. A product diagram must always show its labeled edges. Choose a fitting strategy.