Make CleanSlate images display sharply on higher density displays (srcset)

[adamjohnson]

Many laptops and screens these days have pixel display densities greater than one. For example, a Macbook Pro's retina display has a display density of around 2.2x. My personal Dell XPS 13 has a display density of somewhere between 1.6x-3.3x.

When viewing images inserted via Mercury in CleanSlate on a display with a pixel density greater than 1, images look blurry.

Steps to reproduce the issue

1. On a Macbook Pro (since many of us own MBP's) or your phone, open a CleanSlate page that has image tags on it. The Life at WVU page on the Admissions site will work nicely.
2. Notice how blurry the images in the first 3 column triptych are.
3. Now pull up the same page with a monitor that has a pixel display density of 1.

Results

On a phone or Macbook Pro (etc), the images look blurry.

On a display with a pixel density of 1, the images look sharp.

Expected results

Images should look sharp on all devices and displays.

How do we do this?

Via the srcset attribute on the HTML <img> tag. Here's what it looks like:

<img src="normal-image.jpg"
      alt="My photo's alt text"
      srcset="better-image.jpg 2x">

Here's a real world example of what it would look like in CleanSlate:

<img src="https://cleanslate.wvu.edu/files/d59352b6-1fe3-4b0d-89c1-e50676f60b9b/300x450?cb=1501875321"
      alt="Glen's profile"
      data-asset-id="69342"
      data-asset-version="300x450"
      srcset="https://cleanslate.wvu.edu/files/d59352b6-1fe3-4b0d-89c1-e50676f60b9b/600x900?cb=1501875321 2x">
<!-- NOTE: at the end of the first URL, there are the image dimensions (300x450).
      At the end of the second, we've doubled them (600x900) AND added 2x. -->

If you wanted to support 3x or 1.5x (etc) in addition to 2x, that's totally possible.

Thoughts on Requirements

What happens if the source image can't be output at 2x?

Do nothing OR scale it to it's largest possible size. Not sure if you'd want to change 2x to something else here.

Where would this feature request take effect?

Anywhere images are inserted via the Insert Media Modal in Mercury.

Questions

Should we use 1.5x instead of 2x?

Some research would need to be done here.

So, @nreckart what do you think?

[nreckart]

Sounds like a can of worms. More discussion would be needed to determine exactly how and when something like this could be applied.

[adamjohnson]

What are some of your questions?

[nreckart]

Reread it and it doesn't seem so bad now. So we'd always just be doubling the height and width of the image?

[adamjohnson]

Yes*

* As long as the dimensions of the original image can be doubled. Aka, if you insert a 300x300 image onto the page, then 2x would be 600x600 BUT the original image has to be 600x600 or larger.

If the image dimensions cannot be doubled, do no fancy srcseting.

[rebecca-patton]

Any news on whether this is doable? I would love to see this happen!