Computer and device manufacturers are cramming more pixels into tighter spaces. Apple’s trademarked name for it is Retina Display, and it’s rolled out on many of the newer iPhones, iPads, Macbooks, iMacs, and even the new Apple Watch. Other companies also use their own versions of high density displays. I’m going to use Retina as the short-hand for high density displays for simplicity, but whatever name it goes by, high density display result in crisper images, icons, and text.
If you’re using one of these devices, the first thing you’ll probably notice is how crisp the text is, but that crispness is also very noticeable on photos. But if your website isn’t set up to accommodate high density displays, your images can end up not looking as good as they could look. And, if you’re a photographer, chances are you want your images to be as crisp as possible.
The issue is caused by the way in which Retina displays are hardwired to automatically compensate for high density pixels. If Retina displays didn’t do that compensation, everything that wasn’t optimized specifically for a Retina display would suddenly become postage stamp-sized. But that compensation means that images get stretched, much like looking at a photo at 200 percent (or more). The large photo at the top of the post gives an emulation. The part of the left is blockier and less detailed than the higher resolution version to its right.
Once upon a time, you could count on nearly all monitors and displays using the standard 72ppi, which means that in any given inch of display space there were 72 pixels crammed in. It’s no longer that simple. Even Apple’s Retina Display has different versions and different resolutions according to the device, ranging from 218pp up to a current maximum of 401ppi for the iPhone 6 Plus. Other manufacturers use their own numbers. And it will almost certainly become even more complicated as new devices are released and manufacturers compete for the wow factor of the sharpest and clearest displays.
If you’re using Wordpress, there’s a plugin to help. It’s by Jordy Meow–I’ve previously posted on his Lightroom to Wordpress publish plugin.
WP Retina 2x
In broad strokes, the WP Retina 2x plugin handles two main functions.
One is to create multiple new alternate high resolution versions of your images. The other is to automatically detect when a Retina display is being used and then use the high resolution version of an image rather than the regular one.
While it sounds simple enough, there’s a lot going on under the hood, and this plugin does an impressive job of making the defaults work effectively as well as giving additional power for tweaking if you’re so inclined.
Creating Retina Versions
If the high resolution versions don’t exist there’s no way to display them, so the first step is to create those high resolution versions.
You can select which of your Wordpress image sizes you want to apply the Retina settings to by going to your Wordpress Dashboard > Settings > Retina. If you’re only using the three default image sizes of your theme (WP Dashboard > Settings > Media), then you’ll only have those three showing up. But if you’re using extra custom images sizes that display in different parts of the site, like I do, those custom sizes will also show up in the list. (I have a post on adding extra custom image sizes in Wordpress here.)
I don’t need Retina versions generated for all those image sizes, so I can select which sizes to omit from processing.
You can also choose whether or not to generate the Retina versions when you upload new images and, if you’ve paid for a Pro license, you can choose whether the Retina settings are applied to the full size images that you upload if you’re using the full size option when embedding images in your posts.
Advanced Options
The Advanced tab gives you a bunch of options for controlling how the Retina versions are created and used. The default Picturefill method is a good place to start, but as you can see you have a lot more control if you want it. The plugin developer does a much better job of explaining the specific options than I can; you can find the plugin documentation here and a very useful tutorial here.
Pro Options
You’ll also notice that some of the options on the Advanced tab are only available with a Pro subscription. You can find prices and terms here. If you decide to buy a Pro license you enter the details in the Pro tab.
Generating Retina Versions
Once you’ve decided which image sizes to create Retina versions for you can go ahead with actually generating those images. That’s handled in a different menu: WP Dashboard > Media > Retina.
It’s here that you manage the generation process. You can use the Bulk Generate button at the top, or you can process each image individually. You can also replace your originals with higher resolution versions so that the plugin starts off with much more to work with.
Color-coded indicators tell you whether the original is large enough to generate Retina versions for any given WP image size. You can get a rundown of making sense of the colors and what they mean here.
Once you’ve generated the Retina versions you can see the resulting images that have been created by clicking on the Details button for an image. The Retina versions will have the same name as the originals except for the addition of “@2x” appended to the end of the filename.
Serving the Images to Users
The other main function of the plugin happens silently behind the scenes. When a user views a page the plugin detects what kind of display they’re using and then serves the Retina version of the image or images as appropriate. There are multiple different methods to handling that; you choose which one to use on the settings page. The developer has a rundown of the pros and cons of each method.
But basically that all happens silently. If a user’s display is a standard pixel density, they’ll get the standard version. If they’re using a Retina display, they’ll get the higher-resolution Retina version for crisper display.
Potential Issues
There are a few things to keep in mind before diving in.
Generating a bunch of new high resolution images is naturally going to mean more storage space. If you only have a few images, that’s not much of an issue. But if you’re working with thousands it might be something to factor in.
Serving Retina versions means that the user’s browser will receive high resolution versions. Some photographers don’t like making high resolution versions online because they’re too easy to steal. So you’ll need to make your own judgment on that. By all means watermark the images if you think that helps, but the crux of the matter is that displaying large images publicly on your website means users can save those large images one way or another to their hard drive.
Serving larger images also means that delivering them consumes more bandwidth. There’s an option in the plugin to ignore mobile devices, but it’s also a factor in the speed with which pages load even on desktops or laptops. Optimizing your images also helps (as it does with regular resolutions, for that matter).
Wrap-Up
There is some setup involved in getting this plugin to work and generating the new Retina versions, and you might have to replace some of your originally uploaded images with higher-resolution versions, but if having your users see the best versions of your images possible then it’s worth checking out WP Retina 2x. You’re not going to see anything different if you’re using a regular display, but if you, or more importantly, your site’s visitors, are using a Retina display they should see your images looking much better. I’m now using it on my main site and the differences if very noticeable in the crispness of the photos.
The basic version of WP Retina 2x is free and includes all the functionality you need to generate and display Retina versions. There’s no limit on the number of images. A paid Pro license adds some extra options for further fine-grained control along with a few options for speeding up the workflow.
You can find the plugin documentation here and a very useful tutorial here.
And you can download the plugin in the Wordpress plugin repository here.
