Apple's Retina Display or HiDPI is a topic of discussion among web designers and developers. WordPress developers and designers have already started responding to this technology by providing Retina Display ready themes and plugins to do that. “Do I really need to make my site Retina Display ready?” is the question that most website owners are asking themselves. I hope that this post will help people decide whether or not they should optimize their websites for Apple’s Retina Display.

What is Retina Display?

Retina Display is the registered trademark used by Apple for a HiDPI display technology which they started using in their latest devices such as ipad, iphone, and macbook pro. This technology basically displays more dots per inch than older devices ( around 300 DPI). This means crispier images and smoother font rendering. However, it is important to note that there are already many other devices with higher DPI displays.

The Apple Macbook Pro with Retina display has screen resolution of 2880x1800 at 220 pixels per inch. You would think that this resolution on a 15 inch screen would make things look smaller.

Why it is a Challenge?

I am totally in favor of high definition web. I feel that optimizing websites for modern devices and take advantage of their display capabilities is the right thing to do. Already, there are lots of users accessing the web through not just Apple’s devices but other devices with similar capabilities. If trends are any indication, I feel that more improvements will come in the display technology so the change is inevitable and adapting to it will eventually become important if not necessary.

On the other hand, website owners need to consider several other factors. First of all serving higher resolution images means a small increase in page load time and for busier sites this will also increase bandwidth usage. Secondly with the number of browsers and devices people are using these days, it is difficult to sort browsers and devices and prepare websites for all of them.

How to Add Retina Support to Your WordPress Site

It is actually fairly easy to add Retina support to your existing WordPress theme, all you are essentially doing is adding an extra image which is twice the size and then using a script to decide whether to serve the standard definition image or the high resolution image.

Add that to your theme's js directory and then enqueue the script in your functions.php file. When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

All you have to do then, is when you are adding a new image to the site, save one file as, for example logo.png and another one twice the size as logo@2x.png and the script will detect which version to display. This works for any file name, just add @2x after the file name.

Other things to note to make your display consistent is to use icon fonts where possible as these will always display in high resolution, recreating your favicon at 32x32 size instead of the standard 16x16 size and making sure any background images also are doubled in size as this script does not detect background images.

Implement Retina Display in WordPress with Plugins

We already have WordPress developers responding to the challenge and providing some very practical and creative solutions. Currently there are two common approaches to serve Retina Display ready images in WordPress. Hopefully we will see some even more brilliant and perfect solutions to do that.

WP Retina 2x Plugin

WP Retina 2x plugin attempts to detect the device used to access a webpage and if the device is Retina display capable then it serves a higher resolution version of images on your website. Written by Jordy Meow, WP Retina 2x provides a dashboard to manage Retina Images for your website. This dashboard shows you the current status of files in your media library, which one of them has their Retina Display ready versions, and which images have issues. This awesome plugin provides four different ways to display Retina images :

PictureFill: The Picturefill method rewrites the HTML on-the-fly in order to use the new SRCSET. Since it is not supported by the browsers yet, the JS polyfill Picturefill is used to load the images. It is now the recommended method.

Retina.js: The Retina JS method is a 100% JS solution. The HTML loads the normal images, then if a retina device is detected, the retina images will be loaded. It is fail-safe but not efficient (images are loaded twice).

IMG Rewrite: The IMG Rewrite method rewrites IMG's SRC tags on-the-fly with the retina images directly if the device supports them. This method does not work with most caching solutions.

Retina-Images: The Retina-Images method uses a server handler: the images will be loaded through the Retina-Images PHP handler. Your .htaccess will be modified automatically.

After installation the plugin adds a WP Retina 2x tab in admin menu, which takes you to the plugin’s dashboard. There you will see two tabs for Basics and Advance settings. On the Basics page, you can tell the plugin which image sizes you don’t want to be regenerated for retina display. It will show sizes like , medium, large, small, and you may also see other sizes added by your themes to generate post thumbnails or sliders. I mostly use the medium or large sized images inside the posts, and thumbnails as featured images on the index and archive pages. So I will leave them unchecked and check other sizes that I don’t want to be optimized.

The Advance tab allows you to choose between Server Side and Client Side methods. This plugin also adds a Retina 2x tab under your Media tab in the admin menu, there you can see the status of images you have uploaded, which one of them have their Retina versions ready, which one of them have issues. The plugin author recommends that you use “Enable Media Replace” plugin which will put a replace button next to the images with issues and you can easily replace those images.

Simple WP Retina

A quick and easy way to implement the Retina Display capabilities to your websit,. Simple WP Retina plugin works at the server side to detect Retina or high pixel density capable devices and display high resolution images for those visitors. It is simple, short and sweet. However, this plugin has a few limitations. For example, it does not work with caching so if you any of the caching plugins installed on your website then this plugin will not work correctly. There is no dashboard and there is no easy way to debug the plugin and actually see that it can detect and serve @2x images to high pixel density devices.

Replaces featured thumbnails and content images with the @2x versions for users with HighDPI screens.

Once installed Simple WP Retina does not automatically regenerate images, you will need to do that by using Regenerate Thumbnails plugin. It also regenerates 2x versions of all your images. So if your theme has added multiple image sizes all of them are going to have @2x versions. This is a new plugin and I hope that plugin author will extend and improve it.

WordPress Themes with Retina Support

There are a huge number of WordPress themes that have been released with Retina support since its introduction, in the WordPress directory there are over 40 to choose from. And on ThemeForest there are over 2000!

Garfunkel

Rams

A clean, minimalist and responsive theme for bloggers. Features responsive and retina-ready design, support for the gallery, video and quote post formats, custom accent color support, Jetpack infinite scroll integration, editor styles and translation ready code. Responsive & retina ready - Rams scales gracefully all the way down to 3.5 inch smartphones, and it offers a great reading experience on tablets as well.

Conclusion:

Ultimately whether you choose to serve retina images is down to personal preference and your site's target audience. Personally I make sure that things like logos, display text, icons etc support retina displays and I leave post images as they are. If you run a site which depends heavily on displaying good quality images such as for a portfolio or photography site then it makes sense to serve higher definition images and as you can see from this post, its really easy to support now with a little code or a simple plugin.