Apple’s new Retina Display is a topic of discussion among web designers and developers. WordPress developers and designers have already started responding to this new 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 display technology they have started using in their latest devices such as ipad, iphone, and macbook pro. This technology basically displays more dots per inch than older devices. 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 new 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. Actually no, the Apple’s technology is to use the resolution but double the size of every object, so everything looks just the right size but brighter, shinier and smoother.
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, the website owners need to consider several other factors. First of all serving higher resolution images means significant increase in page load time and for busier sites this would cause more bandwidth. 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. Responsive Web Design kind of solve browser and screen resolution issues, but now responsive designs also need to be responsive towards the display capabilities of the devices.
Ways to 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
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.
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 supporting Retina Display
I couldn’t find a WordPress theme that automatically adds a Retina Display ready image size in the list of image sizes supported by a website. This means that most Retina Ready WordPress themes are just claiming readiness because they have responsive layouts capable of handling image resolutions on higher pixel density on small screen devices. These themes do not generate or serve @2x images for user uploaded images. However, the images used by the theme can have @2x versions.
Entity – A Retina Responsive WordPress Theme
Entity claims to be the first of Retina Ready WordPress theme on the Themeforest marketplace. What I particularly liked about this theme is that the developer of the theme were aware of what people want from their ipad and smart devices ready websites. Entity responds beautifully to touch screens and make it fun to browse the site. It uses higher resolution images for Retina devices with crisp beautiful typography. Apart from Retina readiness, Entity is an overall good theme with lots of customization options.
Nimble – Multipurpose Retina Ready WordPress Theme
Nimble is a responsive WordPress theme that claims to be Retina Display ready and fully responsive. It is a multipurpose theme, which means that it can be used for business, magazine, portfolio or even for a personal website. The theme is packed with awesome features. Nimble comes with icons in two resolutions and hi-res icons are served when Retina display ready device is detected. However, it does not automatically generates Retina versions of images. So you would still need to use a plugin to do that for you. The theme itself comes with icons and buttons that look awesome on mobile devices. Hi-res images on this theme will look truly amazing on Retina ready devices.Even though Nimble does not generates thumbnails for user uploaded images, but when I asked the developers about this they replied that future versions will have the ability to do that:
@noumaan_ But we are going to add this options (x2 pictures for retina) in 3 week. So you can follow us to get information about updates.
— Dream Theme (@premium_theme) September 12, 2012
Responsive – Free Responsive WordPress Theme
Responsive is among the most downloaded themes in the official WordPress themes repository. It is a Retina Display ready theme in the sense that it is fully responsive so if you are using Retina Images jQuery plugin or anyother way to serve higher resolution images this will work really well on Responsive. I don’t like the name of this theme I think it is too generic. It is like calling a a Corporate theme “Corporate Theme”. Apart from my this little complaint, I think Responsive is a great thing and if you are looking for a free theme that is capable of taking advantage of modern devices then you should definitely give Responsive a try.
I believe that Retina display is just the beginning of a larger change. So preparing for the change now will save time when webpages will be served in HD and may be even 3D. I think we should start practicing for device independent approaches in web design. Using vector images in svg format can also be a possible answer to this problem.