Pure CSS solution to retina images with a single file

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?

1. Name @2x assets with @2x in their filename, for example image@2x.png
2. 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