Make Your Website Retina Compatible
These days, with devices and screens/displays that have a higher resolution, also known as retina displays it is essential to ensure that your website displays well to retina users so that they don’t see blurry, pixelated graphics.
The image above illustrates non-retina versus retina. On the left, you have a non-retina display and on the right, you have a retina display. See how many more pixels there are per area on the right-hand side, giving you much, much more detail. It may not seem like much but when you experience it for yourself, you feel amazed when on a retina display.
What is a retina display?
Retina display is a term which was introduced by Apple to refer to the displays in their devices with a high resolution and pixel density per inch. Compared to predecessors, the retina displays have many more pixels, more than 300 per inch.
How does it affect my site?
In short, your users browsing your website which hasn’t been retina optimized will see pixelated and blurry graphics.
The browser displays less pixels of the graphic per screen pixel, resulting in the graphics to look pixelated.
As shown in the illustration image above, retina users will see a graphic on their screen like non-retina users would, except that it is zoomed into 1.5, 2 or more times. As a result, the pixelation.
Optimizing for Retina
To optimize your website for devices with retina displays is actually quick and easy. There are two main parts to the process:
1. Optimize graphics loaded via IMG tags
You probably have images loading on your site via
IMG tag for example:
When users with retina displays in their devices load this image, it is zoomed to the pixel per browser/CSS pixel their display supports. As a result, it zooms the image, showing less pixels of the actual image per screen pixels.
To fix this, you need to load an image with double the resolution for retina display devices specifically so that when the image is loaded and zoomed, it will display like the original image would to non-retina display devices and give you the amazing detail of a retina display.
So create a copy of the image, giving it exactly double the dimensions. If
logo.jpg above were 100px by 100px, you’ll create your retina graphic with dimensions 200px by 200px and name it
To have the new
firstname.lastname@example.org file load for retina displays, you can use Retina.js which is an amazing script that does the detection and replacement for you automatically so no further work is needed. Just load the
retina.js script into your website and ensure that the
email@example.com file exists in the exact same location as logo.jpg
retina.js script will then – when the DOM is ready – replace
firstname.lastname@example.org like this:
If you’re using WordPress, there are plugins which allow you to specify a retina image for each image that you upload to the media library. The retina image is simply an image with double the dimensions/resolution. Such as WP Retina 2X or Simple WP Retina.
That’s it, step 1 done!
2. Optimize graphics loaded through CSS
The CSS part could be a bit more tricky but the most efficient way of doing this would be with a retina CSS media query.
For example, you may have an element in your HTML like this:
And CSS for it like this:
logo.jpg would appear pixelated and blurry to retina display devices. So we need the CSS to load
email@example.com to retina display devices automatically. To do this, insert a media query for retina display devices into your stylesheet and inside it, override the background.
Additionally, notice the CSS background-size since your
firstname.lastname@example.org is 200px by 200px but you still want it to display at 100px width inside of the actual website and not larger.
That’s it, step 2 done!
Enjoy your retina website!
Once you have done those two things, your website should be fully retina compatible. Well done!