• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

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.

Apple Retina Display Image

The Apple Macbook Pro with Retina display has screen resolution of 2880×1800 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.

You can download and add the Retina.js script here.

Retina JS Script

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 32×32 size instead of the standard 16×16 size and making sure any background images also are doubled in size as this script does not detect background images.

The code for displaying background images is :

.background {
  background-image: url(example.png);
  background-size: 200px 300px;
  height: 300px;
  width: 200px;
}
 
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .background {
    background-image: url(example@2x.png);
  }
}

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.

WP retina 2x Plugin

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.

Retina plugin options

Download WP Retina 2x »

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.

  • Detects a HighDPI screen such as a Retina display
  • Detects all image sizes added using add_image_size() and adds @2x versions.
  • 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.

Download Simple WP Retina »

Retina Image Support

Retina Image Support

Another simple solution is the Retina Image Support Plugin which basically carries out the steps we outlined above, it will add the retina.js script and you must upload images with the @2x name.

Download Simple WP Retina »

HiDPI Gravatars

This plugin will update your site’s gravatars to also be high resolution, Simply upload and activate. For best results when uploading a new avatar, use an image at least 128 x 128 pixels in size.

HiDPI Gravatars

Download HiDPI Gravatars »

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!

Here is our pick of the best free Retina ready WordPress themes.

Clean Retina

Clean Retina

Clean Retina is a Simple, Clean and Responsive Retina Ready WordPress Theme which adapts automatically to your tablets and mobile devices.

Download Free »

Baskerville

Baskerville is a beautiful, responsive and retina-ready masonry theme for hoarders. It’s the perfect way to showcase your posts, videos, images and galleries, and share your favorite quotes and links.

Baskerville Theme

Download Free »

Jkreativ Lite

Jkreativ Lite is 100% Responsive also featured masonry blog layout. This themes is retina ready so your themes will seems perfect on every modern device and cross browser compatibility.

JKreative Lite Theme

Download Free »

Garfunkel

Garfunkel is a stylish and responsive Pinterest-style theme with Masonry layout. It features responsive and retina-ready design.

Garfunkel Theme

Download Free »

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.

Rams Responsive Retina Theme

Download Free »

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.


Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made via the link.

Noumaan is a blogger and social media expert. He loves Quora, Facebook, Wordpress, OpenSource Software and The Sims.

Leave Yours +

5 Comments

  1. Pueblo

    How to turn any screen into retina:
    Hold it further away.

  2. Learned something new from here. Thanks a lot for this useful post.

  3. thanks for new information but i was searching about how to make a already wp theme thats support Retina display

  4. Robert

    You might be interested in my new plugin, HiDPI Gravatars.

  5. I have a question. Is codilight theme by UXDE.net retina ready or not ?
    Plz do answer!

  • Comments are Closed

Search

Our Sponsors