Picture Element In HTML

The HTML picture element can come in handy if you want fine grained control over the art direction or to offer different image formats when maybe certain formats are not supported by all browsers.

  <picture>
    <source srcset="small.jpg, small2x.jpg 2x"
            media="(max-width: 639px)">
    <source srcset="medium.jpg, medium2x.jpg 2x"
            media="(min-width: 640px) and (max-width: 1023px)">
    <source srcset="large.jpg, large2x.jpg 2x"
            media="(min-width: 1024px)">
    <img src="my-image.jpg" alt="My image"
         srcset="my-image2x.jpg 2x">
  </picture>

If you’re looking to handle responsive images you probably want to use srcset. Read more about why here.