Retina-ready images appear soft and blurred on non-retina displays

[Ashley Karyl]

Created attachment 277604 [details]
Safari Vs Firefox image comparison

I recently ran a test to see how image compression affects visual quality for retina-ready images starting with an image that was exported from Photoshop save for web at various quality levels. The original image was sized 1000x667 but CSS was used so that the image appears on the page as 500x333. You can see the page in question at http://sunnymede.net/retina/

When viewed with Firefox the images look sharp, whether on retina or non-retina displays. In Chrome or Safari the image is sharp on a retina display but when you open the browser on a non-retina display the image appears sharp for about a second but then becomes soft. 

If you click on the edge of the browser window on a Mac and drag it to make it wider the image immediately becomes sharper until the moment you release it. Looking just now on a borrowed Windows laptop using Chrome it seems to be soft all the time.

Normally I use the latest stable release version of Chrome & Safari, so I just downloaded the latest nightly build of Webkit for Mac and found it had exactly the same problem. I am a photographer with no real understanding of browser development or bug resolution but at the moment retina-ready images appear soft in webkit browsers on non-retina displays. Firefox does not share this problem and Microsoft Edge appears to be OK. 

Just to be certain this was nothing to do with other factors I created another page with zero styling and that has the same problem. http://sunnymede.net/blank/

[Ashley Karyl]

After a day of research I found that adding this CSS to the page helps the situation, though it looks better in Chrome than Safari. 

/* applies to Jpg images; avoids blurry edges */

img[src$=".jpg"], img[src$=".jpg"] {
                   image-rendering: -moz-crisp-edges;         /* Firefox */
                   image-rendering:   -o-crisp-edges;         /* Opera */
                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
                   image-rendering: crisp-edges;
                   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
                 }


This should not be necessary and Firefox is rendering retina-ready images much better on non-retina displays without these changes.

[Simon Fraser (smfr)]

Tracking this internally with rdar://problem/14313875

[Ashley Karyl]

As a visual example for comparison sake I have duplicated the original page but added the CSS at http://sunnymede.net/css/

I am still experimenting with the CSS parameters to see if the results can be improved but it should really be like Firefox without the CSS addition.

[Ashley Karyl]

After further testing I can see that Firefox actually looked worse with that CSS change and became over sharpened so it was correct without it and I have now removed that line of code.  

Chrome now looking pretty good on both Mac & Windows. Definitely better than Safari that is tending to look jagged on curved edges.

Created attachment 368540 [details]
Comparison Firefox & Chrome on OS X

I can confirm that a lot of images are appearing very blurry now in Chrome on OS X, especially avatars on sites like github.com and gmail.com.

I have added a comparison with Firefox on the left and Chrome on the right, of my Github avatar.

This is looking really bad with excessive blurring.

[Radar WebKit Bug Importer]

<rdar://problem/50338662>

[Simon Fraser (smfr)]

<rdar://problem/14313875>