chrisj of Swanson Russell
5/14/2020 - 7:36 PM

Picture Tag - Art Directed Images

Use for Art Directed Images. Otherwise refer to img tag with srcset.

A good breakdown on image solutions: https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

https://responsiveimages.org/

Polyfill: http://scottjehl.github.io/picturefill/ Demo: https://codepen.io/chrisjdesigner/pen/zXePRw

picture-tag
content_copyfile_download
<picture>
     <source
       media="(min-width: 1280px)"
       sizes="50vw"
       srcset="nomad-wide-200.webp 200w,
           nomad-wide-400.webp 400w,
           nomad-wide-800.webp 800w,
           nomad-wide-1200.webp 1200w,
           nomad-wide-1600.webp 1600w,
           nomad-wide-2000.webp 2000w"
       type="image/webp">
     <source
       sizes="(min-width: 640px) 60vw, 100vw"
       srcset="nomad-crop-200.webp 200w,
           nomad-crop-400.webp 400w,
           nomad-crop-800.webp 800w,
           nomad-crop-1200.webp 1200w,
           nomad-crop-1600.webp 1600w,
           nomad-crop-2000.webp 2000w"
       type="image/webp">
     <source
       media="(min-width: 1280px)"
       sizes="50vw"
       srcset="nomad-wide-200.jpg 200w,
           nomad-wide-400.jpg 400w,
 rEsPonsIVE IMAGEs 55
nomad-wide-800.jpg 800w,
           nomad-wide-1200.jpg 1200w,
           nomad-wide-1600.jpg 1800w,
           nomad-wide-2000.jpg 2000w">
     <img
       src="nomad-crop-400.jpg" alt="An orange-coated
     shiba inu in the snow."
       sizes="(min-width: 640px) 60vw, 100vw"
       srcset="nomad-crop-200.jpg 200w,
           nomad-crop-400.jpg 400w,
           nomad-crop-800.jpg 800w,
           nomad-crop-1200.jpg 1200w,
           nomad-crop-1600.jpg 1600w,
           nomad-crop-2000.jpg 2000w">
</picture>