Responsive HTML: Viewport and Responsive Images

Learn responsive HTML basics with the viewport meta tag, flexible images, srcset, sizes and the picture element.

Set the viewport

On mobile devices, the viewport meta tag tells the browser to use the device width as the page width. It is a standard starting point for responsive pages.

<meta name="viewport" content="width=device-width, initial-scale=1">

Let images fit their layout

CSS typically keeps an image inside its container with max-width: 100%. Include intrinsic width and height attributes so browsers can reserve the right aspect ratio while an image loads.

<img src="mountain.jpg" width="1200" height="800"
     alt="Mountain landscape at sunrise">

Offer multiple image sizes

Use srcset to provide several versions and sizes to describe the image's display width at different viewport sizes. The browser can select a suitable file.

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="1200" height="800"
  alt="A red kayak on a calm lake">

Use picture for art direction

The <picture> element can offer different crops with <source media>. Keep an <img> fallback inside it and provide useful alternative text there.

<picture>
  <source media="(max-width: 600px)" srcset="portrait-crop.jpg">
  <img src="wide-photo.jpg" width="1200" height="800" alt="A red kayak on a calm lake">
</picture>