> For the complete documentation index, see [llms.txt](https://ke-ren.gitbook.io/web-design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ke-ren.gitbook.io/web-design/html-css-js/html-index/image-optimization.md).

# 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

```markup
<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

```markup
<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>
```