## Responsive Images

- MDN - Responsive Images - multiple sizes and/or multiple resolutions

Think about three things:

- different sized images
- different resolution images, but same size
- different images based on size (e.g. different crop)

### srcset and different sizes

- Example 1
- Example 2

      <img src="https://cs12.imgix.net/gnp06.jpg" alt="Glacier National Park"
      srcset="https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=200 200w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=232 232w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=269 269w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=312 312w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=362 362w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=420 420w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=487 487w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=565 565w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=656 656w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=761 761w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=882 882w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=1023 1023w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=1187 1187w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=1377 1377w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=1598 1598w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=1853 1853w,
               https://cs12.imgix.net/gnp06.jpg?auto=compress,enhance,format&amp;w=2048 2048w"/>