Pure CSS solution to retina images with a single file

Wed, 03 Jan 2018 10:20:50 +0100

Problem: You have an image and want it to display well in browsers on a high DPI display. There are many ways to do this, some of them more complicated than others.

My requirements were pretty simple:

I want to be able to publish “retina” images with default markdown syntax
I prefer images to be blurry on non-high DPI screens, they are blurry anyway so what’s the harm.
I do not care about wasted bandwidth by sending retina assets to clients with standard definition screens. Not having ads or huge javascript on this site makes up for this.
I do not want to use any javascript or server side hacks

So what’s the solution?

Name @2x assets with @2x in their filename, for example image@2x.png
Add this small snippet into my CSS file (thanks, Internet Explorer!)

img[src*='@2x'] {
  zoom:50%;
}

For an example usage look at my article about Qt Creator

HTML on yozy//NET

Pure CSS solution to retina images with a single file