The introduction of retina displays has added a wrinkle to the process of designing and developing websites. Unless we want our images to look blurry on the latest devices, we have to produce and deliver high resolution images1.
Using SASS2 you can combine media queries and good old fashioned CSS image replacement to send high resolution images to retina devices and standard resolution images everywhere else3.
Let’s assume we’re starting with two images: logo.png (200px × 100px), and a retina counterpart firstname.lastname@example.org (400px × 200px). We want these images to show up when we use this link tag:
In our SCSS file, we need to define this handy mixin I adapted from Jeff Croft’s code:
Note that the mixin assumes your retina files are always named with the @2x between the filename and the extension (like our example logo.png and email@example.com).
Then, we can use image replacement on the link tag along with the included mixin:
That’s it, just make sure you’re referencing the standard height and width (in this case, 200px × 100px) in your SCSS.
In case you’re curious, this is the raw CSS your SASS compiler will spit out:
Or avoid delivering images unless absolutely necessary. Alternatives would be graphics made from pure CSS, SVG, and web fonts. ↩