MENU


<source> and <picture>

Images are usually the heaviest part of a page. Responsive Images in Depth diagrams how the browser selects among candidates: srcset with sizes picks a resolution of the same picture, while <picture> with <source media> picks a different crop per layout (art direction):

A wide crop from 48rem, a tall crop below it, each in two resolutionsHTMLLive
<picture>
  <source media="(width >= 48rem)" sizes="(width >= 75rem) 70rem, 100vw"
          srcset="harbor-wide-1200.jpg 1200w, harbor-wide-2400.jpg 2400w">
  <img src="harbor-tall-600.jpg" srcset="harbor-tall-600.jpg 600w, harbor-tall-1200.jpg 1200w"
       sizes="100vw" width="600" height="750" alt="Fishing boats in the harbor at dawn">
</picture>

The first <source> whose media and type match wins; the <img> is the fallback and the element you style. Keep width and height on fluid images so the browser reserves the aspect ratio before the file arrives, and match <source> breakpoints and sizes to the layout your CSS creates.