Gravatar

WordPress Retina 2x Plugin

Written by Jordy Meow. Published on June 12, 2014.

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. Article originally written in 2012 but updated in 2014.

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.

MacBookPro Retina

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!

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.

Using WordPress, for now, I believe the users should write their articles the same way as before. Only everything on your website will have to be doubled. This already works on retina enabled-browsers, the texts look better and all but not 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.

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.

THE WORDPRESS PLUGIN: 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 (you can do it if you really want but you will have to upload the retina file by yourself). 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.

 

retina-basics

The Advanced settings let you choose a method to deliver those images. Depending on your server and setting, you might have a favorite method. You can also try them one by one to see which one fits best. Meanwhile, I suggest you to go with the PictureFill method. 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). A log is also generated (check your retina folder).

 

retina-advanced

 

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: By drag & drop, you can replace the images on your WordPress (on this dashboard) by dropping the new images coming from your PC! Try it out.

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 @2x 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.

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 in there.

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.

Now, here is my advice: understand how WordPress works with images exactly (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 but I am sure now you understand why. And make your website beautiful!

DOWNLOAD & THANKS

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

Updated on June 12, 2014.