Retina Displays are all over the place now, and I’m a few hours from getting my new MacBook Retina. Did I really need such a computer and display? I am not sure. But I am certain that this is a step into the future, and it’s a chain of events I wanted to be part of. More importantly, I want Totoro Times to shine on Retina Displays.  So I had to understand the technology, use it, then develop the tools I am missing.

So what’s the heck with Retina, why can it be a pain in the arse for the Web, and how to take advantage of it? Let’s explore the subject.

A NEW TECHNOLOGY?

Retina Display is not really a new technology itself, but just a fancy name given by Apple. The real technology behind it is actually simply a super high-resolution IPS screen that squeezes more pixels together. For example, the new MacBook Pro 15” Retina has an amazing screen resolution of 2880 x 1800 pixels which is twice the resolution of the normal one. Wow, everything must look damn small, right? Well, maybe not.

THE APPLE TRICK

Some people might be interested in using this new amazing resolution as it is (you can now have 4 Internet browsers next to each other instead of one), but most users wouldn’t : everything would look ridiculously small and your eyes will start hurting. So what is the trick here? It is very simple: to double the size of every elements on the screen! This is an awesome idea: all the elements will look the same way as before, except the fact that they will be delightfully crispy with a much higher definition and the text will have a fantastic anti-aliasing.

This is also exactly where the nightmare begins: all the image sizes will have to be doubled at the back than the sizes shown on the screen! What does this mean? Did you ever try to stretch an 320×213 image to 640×426 ? The result first is a performance loss (your retina device will need to perform the re-sizing) and second a huge quality loss; Retina requires double the resolution, which mean the actual size required for displaying a 320×213 is 640×426. And if we do not have it here, we are losing half the pixels to show a nice picture. That would not be acceptable for most of us!

My normal image at 320×213.

The previous image first re-sized at 640×426
then re-sized again at 320×213, now we can see what it looks like on Retina.

This is not very good, is it ? If you don not have a Retina device, you can still go at the Apple Store and try it yourself (most of the websites/pictures you see will be blurry like the above).

THE WEB NEEDS AN UPDATE

All the software will be updated to support such a trick display, this is certain. But what about the Web? Well, every single webmaster will have to take care of this matter him/herself.

The way we develop a website will remain the same. Only everything on your website will have to be doubled, and if you try with Safari and Chrome, they already look nice on Retina, except the images.

The task for the webmasters now, is to prepare and deliver images that are twice the size of the current display sizes of images on the website. And as for now, I can think of 3 ways of doing that:

• The Hybrid Method. The browser requests the server for an image called “neko.jpg”. Depending on what kind of client it is – retina display or not – the server will return either the image stored as “neko.jpg” or a doubled-size image called “neko@2x.jpg” (the “@2x” is the way Apple wants us to name our retina image when programming on iOS devices so let’s use it). I personally think this method is ideal. It requires some coding on the server side (an image handler), and a way for the server to know when it is dealing with a Retina device (a line in JavaScript to create a cookie).
• The JavaScript Method. We could have a JavaScript file reacts when it detects a Retina device. It would have to parse the DOM (the object composing your web page) and for each image and request the server for a “@2x” version of the image. Nothing to do on the server-side, the script only will be enough. It is alright for simple and not so dynamic websites, but for blogs it might not be the way. It also uses way more requests and more bandwidth, which will in the end slow down the loading speed of your website dramatically. It seems it is the method Apple website is using (look into the source code of the website, and check the file “images.apple.com/global/ac_retina/ac_retina.js“).
• The Server Method. I’ve never seen this idea anywhere yet but here it is. On the server, before delivering the content, the HTML would be parsed and the images extracted. For each image, it would check if a “@2x” image exists, and if it does, it would update the HTML with the link to the Retina images. This would be smooth and fast, the only issue here is that we wouldn’t be able to use cache anymore. Or maybe there will be a way to do so, but we are not there yet.

It seems that for now there is no perfect way in achieving this. But either way we will need those double sized files to exist in the first place. Then once we have the files ready, we can start experimenting, and try to make our website look awesome on those high resolution displays.

THE WORDPRESS PLUGIN: WP RETINA 2X

I wanted to get my files created automatically and easily, then to have my websites handle those new displays perfectly. And most importantly, I want the web to look beautiful on my own Retina display! I checked the existing plugins and scripts, but they are all achieving only one part of what I want, with not much support, and everything felt very far away from a nice solution including all the methodologies, features and tools. That is why I created WP Retina 2x.

I will start with the most important piece of advice at this point: DO NOT USE THE WORDPRESS “FULL SIZE” IMAGE DIRECTLY, EVER. The original image is a base for the other sizes on WordPress, and might be only seen when the user click on the image to see a bigger version. From that original image, other image sizes are created depending on your WordPress settings (Settings -> Media). If you need more image sizes, there are many plugins to do so.

So now, how does WP Retina 2x work? First you need to install it, then go check the Basics settings. In my case, I only use the thumbnail, the medium, and large sizes. The other sizes are related to my theme, and I don’t need Retina for them. Please opt-out the sizes you do not need in Disabled Sizes. You can then check Auto Generate, this will create the “@2x” images automatically whenever you upload or replace them.

The Advanced settings let you choose a method. We have seen them before, and I recommend you using the first one. Then you can tick “Debug Mode” if you always want to have Retina images delivered : this is useful to test your website even if you don’t have a Retina device (you can check what kind of images is downloaded from the server).

The next step is to create all those Retina files for your existing images. Check the new menu in Media where you will find the Retina Dashboard. You can click on Generate for all files and if you are lucky, that will be all you need to do! But quite likely you will be asked  to Upload bigger pictures. Retina requires an original image that is equal or more than double the size of the image size you are showing.

PS: This “Upload” button will only appear if you have installed the “Enable Media Replace” plugin, which I strongly advise you to do so.

Are the icons clear enough for you? You can hover over with your mouse to know a bit more about them. Basically, the tick tells you everything is fine, the clock means that the plugin is ready create the @2 files but you need to click on Generate first, the exclamation point tells you that the original file resolution (you can see it on the left, under the image name) is too small, and here in our example above it says that a minimum of 800×800 is required. The others small icons simply indicate that those sizes are ignored by the system (later we can think about having a few more options here, there are always webmasters with special cases).

The Retina Dashboard is mostly used at the beginning, right after you installed the plugin, but it can also be used for troubleshooting purposes. Most of the time, of course, you will only be using the Media Library. Please notice that there is a Retina column available now.

The Media Library will always keep you informed of any issues with your files. If everything is set up correctly at the beginning then you will not have to do anything other than your normal tasks. All you need to do is to understand how it works from the start then everything will be smooth and magical.

That is my advice: understand how WordPress works with images exactly (using the image sizes), adapt your website accordingly, understand how the plugin works, and then you will have nothing else to do at all. And again, my most important piece of advice: never use the “Full size” image, I am sure now you understand why. Please now make your website beautiful as well

DOWNLOAD & THANKS

Check it out on the WordPress Plugins Repository: WP Retina 2x.

Please comment or contact me directly if you need any help, new features, or when you find any annoying bug.