If you’re looking for a way to make your website look better on a retina device then look no further as I’m about to give you the abridged version, if I may, to Allan Berger’s tips on how to “retinafy” your website.

The first tip Berger gave is what he considers the easiest and most time-saving way of adding Retina support is to create one image for Retina devices, and serve it to non-Retina devices as well. Usually, this is done by using Photoshop to downsample your images, but you can just let today’s modern browser like Google Chrome do the downsampling of the images for you: img tags or CSS background images.

One caveat of relying on the client browser to downsample your images is that it’s not 100% guaranteed to work. There’ll be situations where the browser might only make the images blurry. You can also opt to create 2 versions of the same image: one for Retina devices, and another one for non-Retina devices that has been downsampled using Photoshop.

If that’s still not enough, as Berger said, “you can go the extra mile and hand-optimize the non-Retina version to get super crisp results.” This method is great for downsampling text as well. He highly recommends this when details, crisp fonts, and clean hairlines are important.

Berger’s second tip is to simply avoid images. Using rasterized images has its disadvantages, so Berger recommends using alternatives such as CSS, Scalable Vector Graphics (SVG), and Icon Fonts.

Third tip is using Retina-ready Favicons. Here, Berger recommends using a program called X-Icon Editor.

If you’re not starting from scratch and simply upgrading your website, you’re going to recreate all of the existing images to make them Retina-ready, but this, Berger points out, doesn’t have to be troublesome. Make Photoshop compositions directly out of vectors (shapes) and Photoshop’s Smart Objects will save you a great deal of time in the future.

Lastly, optimize your images’ file size for web. If you use Photoshop then you should already be familiar as to how to go about this (i.e. Save for Web). There’s also a tool called ImageAlpha, which you can use to reduce the size of your images with minimal loss in quality.

To read the complete and thorough version of the article featuring the tips, you can read Berger’s article here.