Initially, I used it as an experience to learn about the srcset attribute, and then moved on to combining it with a picture element to achieve much better performance and art direction.
Wrote a blog post here:
The biggest challenge was figuring out what w units to use with the srcset attribute, as I was not aware of the ability to change the pixel density ratio in Chrome dev tools, just never had to use that before. So once I figured that out, I was seeing images as currentSrc that I expected at different viewport widths.
Early days, but responsive images seem awesome and have helped the performance of rhis site dramatically. Gets great lighthouse and webpagetest results.
The biggest challenge was figuring out what w units to use with the srcset attribute…
Curious, how did you initially think the w units worked? Like can you recall some values you tried out that didn’t work the way you expected?
What about pixel density ratio made w units click for you?
Related: I remember having a hard time with x units because I couldn’t decide whether they were “better” than w units. Most demos I saw used x, and since you couldn’t mix units (you had to choose one or the other) I felt like I had to “choose a side”, almost like I was fighting best practices.
(In the end, I abandoned x completely and only use w nowadays. Personally, it feels easier to say “This source is 600px wide” than “This source is 0.5 pixel density.”)
Love short little posts like this.
Curious, how did you initially think the