Retina for web workflow

The biggest pain of retina becoming the standard for computer displays is the extra work that's involved in making it work on the web. But it's possible to automate your retina (@2x) for web workflow thanks to Slicy, CSS preprocessors like Sass or Less and retina.js.

Slicy

A beautiful and very clever app by MacRabbit. Slicy turns photoshop layers into normal and retina images by simply naming a layer. Example .psd:

Slicy .psd example

Slicy will save the shape in this example as 'logo-mams.png'. But that's not all. Adding '+@2x' to the layer name tells the app to increase the size of the shape two times and save it separately as 'logo-mams@2x.png' including layer styles as you can see here:

Slicy export screenshot Slicy export screenshot

Slicy can also automatically export all images after you've saved changes to the Photoshop file and has a bunch of other great features, check it out.

CSS preprocessors (Sass)

Adding retina background images is dead easy with CSS preprocessors like Sass, which I'll be using in this example.

Instead of including every image in a '(-webkit-min-device-pixel-ratio : 1.5)' media query I use the following mixin:

To load the image:

Compiled CSS:

If you're more fond of other CSS preprocessors like Less, there's a solution for that too.

Retina.js

Last but definitely not least, images in your HTML. This is where retina.js comes to the rescue.

The script checks if you're viewing the page on a retina device, then checks each image on the page to see if there's a '@2x' version of the image on the server and will simply swap the image in place if there's a retina version present. If there's not, it'll load the normal image.

That's it

This workflow has saved me a ton of time and extra work. But as the web moves towards fully supporting retina I have no doubt more effecient ways of adding retina support will be embraced and standardized. This also means I have no excuse for not having retina images for this post (besides not being able to take retina screenshots cause I don't have a retina MBP).

« Back
Michiel de Graaf

I design interfaces, craft websites and write cascading style sheets & hypertext markup, previously lead designer at Karma. This is my blog.