CSS Responsive
RWD Images
Images are often the heaviest part of a page, and a fixed-width image can overflow small screens or waste bandwidth on large ones. Responsive images solve both problems: they scale to fit their container, and modern attributes let the browser download the right size for each device.
The Fluid Image Rule
The simplest responsive image technique is one CSS rule: max-width: 100% and height: auto. This lets an image shrink to fit its container while never exceeding its natural size, keeping its aspect ratio intact.
img {
max-width: 100%;
height: auto;
}<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; margin: 0; padding: 16px; }
.frame { max-width: 320px; }
img { max-width: 100%; height: auto; display: block; border-radius: 8px; }
</style>
</head>
<body>
<div class="frame">
<img alt="A coloured placeholder" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Crect width='320' height='180' fill='%236366f1'/%3E%3Ccircle cx='160' cy='90' r='55' fill='%23f59e0b'/%3E%3C/svg%3E">
</div>
</body>
</html>Always set height: auto alongside max-width: 100%, or the image will squash out of proportion when it scales down.
srcset: Serving the Right Size
max-width scales an image visually but still downloads one file. srcset lets you offer several sizes of the same image and let the browser pick the best one for the device's screen and resolution, saving bandwidth on phones.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="A responsive photo">The w values describe each file's real pixel width. The sizes attribute tells the browser how much space the image will occupy at different breakpoints, so it can choose wisely before layout is complete.
The picture Element: Art Direction
Sometimes you want a different crop, not just a different size — for example a tall portrait crop on phones and a wide landscape on desktops. The picture element with multiple source elements provides this art direction using media conditions.
<picture>
<source media="(max-width: 600px)" srcset="hero-portrait.jpg">
<source media="(min-width: 601px)" srcset="hero-wide.jpg">
<img src="hero-wide.jpg" alt="Hero image">
</picture>| Technique | Use it for |
|---|---|
| max-width: 100% | Basic fluid scaling within a container |
| srcset + sizes | Same image, different resolutions (bandwidth saving) |
| <picture> + source | Different crops or formats per screen (art direction) |
| srcset with .webp/.avif | Serving modern formats with a fallback |
Inside <picture>, the <img> is required — it is the fallback and the element that actually renders. The <source> tags only tell the browser which file to load into it.
Never omit the alt attribute. It is essential for accessibility and screen readers, and it displays if the image fails to load.
Key Points
- max-width: 100% with height: auto makes any image fluid.
- srcset offers multiple sizes so the browser downloads the smallest suitable file.
- sizes tells the browser how wide the image will render before layout finishes.
- The <picture> element enables art direction — different crops per screen.
- Always include a meaningful alt attribute for accessibility.