Serve avatars at 1x and 2x

[bradpurchase]

As of #518, we generate variants for avatars @2x the displayed size instead of scaling down the full image. For instance, avatar thumbnails are displayed at 32x32, while the thumbnail itself is 64x64.

As per this comment, we want to push this further this by also serving avatars at 1x and 2x via HTML.

A PR addressing this issue should:

• Create HTML markup that ensures 1x and 2x images are rendered for the correct screen resolution

I think this might involve using the srcset attribute on <img> but can't say for sure.

[prikeshsavla]

Something like this probably
https://www.dofactory.com/html/img/srcset

<img srcset="/img/html/vangogh-sm.jpg 120w,
             /img/html/vangogh.jpg 193w,
             /img/html/vangogh-lg.jpg 278w"
     sizes="(max-width: 710px) 120px,
            (max-width: 991px) 193px,
            278px">

[tysongach]

I think what we’re looking for here is resolution switching using srcset with x-descriptors. sizes is not needed.

<img srcset="avatar-32w.jpg, avatar-64w.jpg 2x" src="avatar-32w.jpg">

That 2x bit in there is the key part.

I somewhat question whether this is needed though - are visitors using low resolution screens? 🤷

[joemasilotti]

Ooh nice! That will be a fun helper to build.

From my understanding a good portion of desktop monitors are still 1x. And desktop makes up almost 50% of traffic.

Regardless, PageSpeed checks this. :)