My experience of learning about responsive images with srcset and picture element

I created a tiny website about a tree:

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.

1 Like

:heart: Love short little posts like this.

The biggest challenge was figuring out what w units to use with the srcset attribute…

:question: 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.”)

1 Like