1

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?

5
  • Garbage in <.> Garbage Out. Any "fix" would need to be within the image itself. Even interpolating low resolution images, with something like Photoshop, to 2x would most likely yield better results than browser scaling. – Scott Mar 24 at 10:09
  • It sounds odd that Preview displays your images crisp and they look dull in a browser. Is it the exact same version of the image with the same dimensions? How does an image you download from your website look when viewed in Preview? In the end it's all about how many pixels you display at which scale isn't it? – Wolff Mar 24 at 18:14
  • @Scott This is an asinine and crass comment. You were not asked for your opinion about images intended for high pixel density displays vs prior ones or how you personally weight the importance of stuff of which I have zero interest believe it or not. The question was about recreating the look of images created on pre-retina displays on retina displays, which is eminently doable as Preview app does it automatically, and I have now found another solution with code. – MichaelSeven Mar 26 at 9:21
  • @Wolff There’s nothing curious about it. If you’re on a modern Mac, find an old 72 dpi image, open it in Preview and hit Command 0. There are other ways in browser I am just discovering with HTML canvas, specifically designed for this scenario and pixel art that has be scaled for Retina. It's a bit clunky but it does seem to work so far. Amazed this hasn't come up more often, – MichaelSeven Mar 26 at 9:22
  • To be fair Michael, this is a place for designers and for designers image quality is often paramount. Native resolution images will always look better. I, personally, would not use any CSS hacking to try and display images properly. Especially if that entails proposed, not yet implemented, future specifications. I'd regenerate images which actually look good natively. But to each his or her own. Yes it may work this year... but, well, who's to say next year it will. When a high quality image is fairly future-proof. – Scott Mar 26 at 18:13
1

This question can be closed by me.

The answer for to how to display old 72 dpi images in a browser on Retina/high pixel density screens (i.e all modern screens) is indeed to use the following CSS properties (probably not all them necessary/valid as of 2021):

.preretinaonretina {
  image-rendering:optimizeSpeed;             /* Legal fallback */
  image-rendering:-moz-crisp-edges;          /* Firefox        */
  image-rendering:-o-crisp-edges;            /* Opera          */
  image-rendering:-webkit-optimize-contrast; /* Safari         */
  image-rendering:optimize-contrast;         /* CSS3 Proposed  */
  image-rendering:crisp-edges;               /* CSS4 Proposed  */
  image-rendering:pixelated;                 /* CSS4 Proposed  */
  -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}

HTML:

<img class="preretinaonretina" src="myoldimage.jpg">

The above was copied and pasted from some other old answer on the SE network, sorry can't remember where. The image does not need to be scaled in HTML for the properties to work as I mistakenly thought at first.

The reason this didn't work for me initially was a mistake in my own code.

But this gives the correct result.

1
  • The reason that this works is that some of these settings 'force' GPU rendering instead of the classic CPU-rendering, much like the classic translate3D hack. The downside to this approach is that most of these are not standards and are most likely to change over the coming years. Also, it's silly to include both crisp-edges and pixelated, since they are each other's opposites and pixelated will win (because it is last). – PieBie Mar 26 at 18:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.