`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.
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]
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.👏
If dragging the button to your bookmarks doesn't work, copy the link address of the button, bookmark the page, then edit the bookmark pasting the JavaScript contents of the address to the bookmark target.
Tomorrow we'll talk more about images - using the <picture> tag for art direction and serving new file formats like WEBP. MDN has a great overview of responsive images developer.mozilla.org/en-US/docs/Lea…
14:47 PM - 12 Nov 2019
0
0
Top comments (0)
Subscribe
For further actions, you may consider blocking this person and/or reporting abuse
All DEV content is created by the community!
Hey, if you're landing here for the first time, you should know that this website is a global community of folks who blog about their experiences to help folks like you out.
Day 8 of⚡️ #30DaysOfWebPerf ⚡️
0
0
`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.
Wow, that looks complex, right?
If dragging the button to your bookmarks doesn't work, copy the link address of the button, bookmark the page, then edit the bookmark pasting the JavaScript contents of the address to the bookmark target.14:47 PM - 12 Nov 2019
Top comments (0)