Day 8 of⚡️ #30DaysOfWebPerf ⚡️
Did you know that HTML (and CSS) can already handle serving responsive images without the need for other tools?
[GIF alt: woman wielding tools]14:47 PM - 12 Nov 2019
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.
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
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
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
Top comments (0)