Responsive Images
What Is It?
Responsive images let the browser choose an image that fits the screen or display.
What the Tags Mean
img srcset: offers different image sizes.sizes: says how wide the image is expected to appear.picture: groups source choices.source: gives a choice.img: the required fallback image.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Images</title>
</head>
<body>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22lightblue%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22100%22%20font-size%3D%2224%22%3ESmall%20garden%20image%3C%2Ftext%3E%3C%2Fsvg%3E"
srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22lightblue%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22100%22%20font-size%3D%2224%22%3ESmall%20garden%20image%3C%2Ftext%3E%3C%2Fsvg%3E 400w, data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22200%22%20viewBox%3D%220%200%20800%20200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22lightblue%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22100%22%20font-size%3D%2224%22%3ELarge%20garden%20image%3C%2Ftext%3E%3C%2Fsvg%3E 800w"
sizes="(max-width: 400px) 100vw, 400px"
style="max-width: 100%; height: auto"
alt="A garden"
>
</body>
</html>Browser preview
What you see: The browser chooses one of the two included illustrations. Their labels identify the small and large versions.
Example 2: Another Use
Use picture when a phone should show a different crop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Images</title>
</head>
<body>
<picture>
<source media="(max-width: 500px)" srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22lightblue%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22100%22%20font-size%3D%2224%22%3EClose-up%20view%3C%2Ftext%3E%3C%2Fsvg%3E">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22lightblue%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22100%22%20font-size%3D%2224%22%3EWide%20view%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Our workshop room">
</picture>
</body>
</html>Browser preview
Simple Tip
Always keep an img inside picture. Put the alternative text on img.
Try It Yourself
Resize the page and compare a close-up image with a wide image.