Image Optimization

SRCSET

• The srcset attribute defined a list of images

• Each image should include the related size or the pixel density

• The browser will determine which image to use based on the viewport size and screen resolution

<img
 srcset="img/books-400.jpg 400w,
 img/books-800.jpg 800w,
 img/books-1200.jpg 1200w"
 sizes="(min-width: 1024px) 25vw,
 (min-width: 800px) 50vw,
 100vw"
 src="img/books-800.jpg"
 alt="Books on a shelf">

Picture Tag

<picture>
 <source srcset="img/books-400.jpg 400w,
                 img/books-800.jpg 800w,
                 img/books-1200.jpg 1200w"
         media="(max-width: 960px)">
         
 <source srcset="img/books-square-400.jpg 400w,
                 img/books-square-600.jpg 600w,
                 img/books-square-800.jpg 800w,"
         sizes="50vw"
         media="(min-width: 961px)">
 <img src="img/books-800.jpg" alt="Books on a shelf">
</picture>