Support reverse srcset img attributes

[Robdel12]

The Problem

Normally, the srcset attribute of <img> elements is used to optimize performance of smaller screens by only loading progressively larger images at larger screen sizes. This is evident when resizing browsers, the browser will only request images if there isn’t already a higher quality version loaded. So if you make the window smaller, it will not request smaller images. But by making the window bigger, it will request bigger images. For this reason, Percy CLI asset discovery starts the browser window at the smallest width and resizes up from there to load the larger images.

It seems some customers may be using the srcset in a “reverse” manner, defining widths so smaller images are only requested at larger window sizes. With this, the browser in asset discovery will never request the smaller images at the larger sizes because a larger image already exists from the initial small window width.

The correct way to make images responsive like this would be to use a <picture> element with multiple elements. With this, the browser will not take into account any performance, and always request the images at their respective sizes.

Possible Solutions?

• I don’t think we should serialize srcset into <picture>, that would be too complicated.
• We could remove how we sort widths and leave it up to the users preference. What implications could this have?
• We currently have a separate request for fonts — we could potentially analyze the captured DOM for any srcset and request all the images found. Could have some overhead if some images aren’t used, and could potentially be exposed to bugs involved with attempting to parse all possible srcset attributes from a DOM string.