• srcset is an html attribute that identifies which image to render from a set depending on specified circumstances.
• use srcset and sizes together to serve web content that renders best for the user's device.

'Here are my images, pick whichever one you think is best'

• Pixels render differently depending on the screen size
• This syntax makes use of saving multiple sizes of the same image in full, lg, md, sm directories
• Use a logical naming system that includes same title and a distinction between them
  • you can use lg, md, sm (But if you have lots of image sizes this could become difficult later)
• When using chrome, the browser will cache the high res version of the image once it serves that and the other ones wont be needed anymore.
• Important This is particularly important for the initial load on different sized screens.
• Note that this example follows a mobile first approach

• To create a srcset, define which version to use per display size

<img src="path-to-img/img-small.jpg"
  srcset="path-to-first-img/img-small.jpg 320w, path-to-second-img/img-medium.jpg 800w, path-to-third-img/img-large.jpg 1200w" 
  alt="describe image">

• Check your image sizes and be ready to play with your compression a bit as finding a good balance between quality and weight is important.
• in your html, use the 200w syntax for widths
  • this helps improve speed because when the browser loads the image, these numbers + w will tell it how much space to save while the browser displays all the content

• you can replace overt widths as shown above with 1x, 2x, 3x

'At this viewport size I want an image slot this wide`

• This is used to specify the size range of image versions
• With your sizes, you essentially add media query breakpoints into your markup
• Use this alongside srcset
• sizes specifies width for image layout, this is not the same as srcset - srcset is the real img width. Sizes is for creating a placeholder for the image to be loaded into
• You cannot use percentages
• Don't use sizes to serve specific images. That is handled by srcset
• Important The browser will usually pick srcset's smallest image that is wider than the sizes slot.

• add sizes attribute after your srcset
• set your breakpoints and widths

<img src="path/img-sm.webp"
  srcset="path/img-sm.webp 320w,
    path/img-md.webp 800w,
    path/img-lg.webp 1200w"
  sizes="(min-width: 960px) 80vw,
         (min-width: 640px) 90vw,
         100vw"
  alt="img description>

• sizes="(breakpoint: value) value"
• you can set multiple breakpoints

• In this example the sizes declaration translate to:
  • If the viewport is at least 960 pixels wide, then make the slot for the image 80vw
  • Else If the viewport is at least 640 pixels wide, then make the slot for the image 90vw
  • Else make the slot for the image 100vw
• This will effect the img selection
  • As the slot is 80vw at 960px, the actual px size of the slot will be closer to 860px
  • And the breakpoint at 640px slot will be closer to 570px
• This means that
  • if the slot is at 810px, img-lg will be used
  • if the slot is 780px, img-md will be used
  • as long as the slot is img-sm will be used

This is considered a best practice again because it helps the browser block out space at loading time. It can be a little difficult to make work right.

• take a mobile first approach (src is set to your sm image)
• make sure that your height and width are using the values from the actual image
• to make it responsive use

img {
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

• Penguin Photo by Vladimir Blyufer under a Pexels Lcense
• Video by Kevin Powell under Creative Commons License
• Article on using srcset and sizes
  • example logic in sizes is from this article