I appreciate this topic may be old news to many of you, but after years of putting it off I recently got a new Mac and find myself out of the loop on a number of changes. Looking at my old website on any browser the images appear blurry and dull. But the same images display normally and as expected when viewed in the Preview application.
Apparently this is to do with how browsers specifically handle images on Retina screens (even though Preview is still able to display these images normally):
1 pixel is secretly 4 pixels to the general Mac experience, but 1 pixel is still 1 pixel to a browser and it internally tries to scale the image with dreadful results.
My own case is this: I have a number of extremely complex images created on a non-Retina system and it is simply impossible to recreate these images at a higher resolution and presents a critical problem if they can’t be presented normally in a retina/high res environment.
CSS properties such as:
image-rendering:optimizeSpeed; image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:pixelated;
do nothing as they apparently only operate on explicitly scaled images (like 200%) in webpages.
I guess what I’m looking for is a kind of render-non-retina-for-retina property.
Is there any other fix/hack with css or html or the image itself or otherwise, no matter how ugly or crude to get these images to display as they did before in browsers with non-retina screens, i.e as Preview can still display them now?