Pure CSS solution to retina images with a single file

1 minute read

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