Displaying older images on web for Retina/high pixel density screens?

Question

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?

Answer 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.