`srcset` lets you define a set of images and declare their natural widths to let the *browser choose* the best image to load based on the user's device pixel ratio and screen width.14:47 PM - 12 Nov 2019
The only problem is that `srcset` alone assumes your images will be 100vw.
So we use `sizes` to declare what the image width will be at different screen sizes. [note: you still have to set up your CSS media queries - these are just tips for the browser]14:47 PM - 12 Nov 2019
Wow, that looks complex, right?
One of my favorite mini-tools for perf is RespImageLint ausi.github.io/respimagelint/
It's a JS bookmarklet that evaluates all your images. Once you dump a srcset on an image, IT WILL TELL YOU THE RIGHT SIZES ATTRIBUTE! I'm lazy, so this is perfect.👏14:47 PM - 12 Nov 2019