Drastically lower image quality on iPad Safari

[johnridesabike]

If you visit the site on an iPad, the image quality is much lower. It looks very low-res and pixelated. If I visit on my Mac, it looks normal. I haven’t tested on other machines.

I assume this has something to do with the way Cloudinary is serving different sizes and formats to different browsers?

I attached a screenshot. You can see how the image text looks compared to the actual text on the page.

[hronro]

Not only on iPad, but also on macOS Safari.

OS Version: macOS 11.2.3 (20D91)
Safari Version: Version 14.0.3 (16610.4.3.1.7)

[chriscoyier]

I see it too.

It's something jerked up with the responsive images syntax. If I put like https://res.cloudinary.com/css-tricks/image/fetch/w_1600/https://coding-fonts.css-tricks.com/screenshots/anonymous-pro/html-dark.png as the ONLY thing in srcset, it looks fine. So somehow Safari is deciding to download a far too-small version of the image.

Any ideas for fixes welcome.

[eeeps]

Took a quick first look:

1. It's picking the 1200w resource when img.clientWidth is 840 (@2x). It "should" pick the 1600w for better crispness here, but I think it's just doing what the sizes is telling it to. Lemmie workshop your sizes for a minute...

2. Ticking this off also helped appearances (chunky → smooth)

[eeeps]

Pretty sure those should be min-widths.

[eeeps]

Gettin' a PR together...

[eeeps]

Left the -webkit-optimize-contrast, as I see that it was a recent, intentional change (#59).