RWD Images
Responsive images shrink to fit narrow screens, ship the right resolution to high-DPI displays, and let you swap entirely different images per breakpoint.
Three levels of responsiveness
| Level | What it does | How |
|---|---|---|
| Fluid | Image shrinks with its container. | img { max-width: 100%; height: auto; } |
| Resolution | Ship larger files to retina screens. | srcset with w descriptors. |
| Art direction | Show a different crop on phones vs desktops. | <picture> with <source media=…>. |
srcset and sizes
HTML
<img src="hero-800.jpg" srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="(min-width: 1024px) 800px, 100vw" alt="A misty mountain">
srcset offers the browser candidate files; sizes tells it how big the image will render at each breakpoint. The browser picks the best fit.
Art direction with <picture>
HTML
<picture> <source srcset="hero-mobile.jpg" media="(max-width: 600px)"> <source srcset="hero-desktop.jpg" media="(min-width: 601px)"> <img src="hero-desktop.jpg" alt="Hero"> </picture>
Tip: Pair
srcset with loading="lazy" for off-screen images and modern formats like AVIF or WebP via <source type="image/avif">. Three lines saves megabytes.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>RWD Images</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Add the attribute that holds candidate image files.
<img src="hero-800.jpg"
="hero-400.jpg 400w, hero-800.jpg 800w" alt="Hero">
Plural of "src".
Discussion
Loading…