picture tag code example

Example 1: picture and img tag

<img srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1600.jpg 1600w"
     sizes="(min-width: 1280px) 600px,
            (min-width: 768px) 500px,
            100vw"
     src="image-800.jpg"
     alt="Munster Dom">

Example 2: picture tag

<picture>
  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x">
  <source srcset="logo-480.png, logo-480-2x.png 2x">
  <img src="logo-320.png" alt="logo">
</picture>

Example 3: picture tag

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
  <img src="mdn-logo-narrow.png" alt="MDN">
</picture>