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"/>