WordPress Retina Images

Apple’s “Retina” display (a.k.a. high-DPI or HiDPI) devices have changed the way all websites can be viewed. Here’s a list of Apple’s current Retina devices’  display dimensions:

• iPad 3: 2048-by-1536-pixel resolution at 264 pixels per inch (ppi)
• iPhone 4 and iPhone 4s: 960-by-640-pixel resolution at 326 ppi
• MacBook Pro (15″ Retina): 2880-by-1800 resolution at 220 ppi
• Future device resolutions will be found at Apple’s Tech Specs site

In OS X, there are four times as many pixels for a given area on a high-resolution display. An increase in pixel density means that drawing is more precise, resulting in sharper text, extremely detailed photos, and a more defined user interface.
- Apple.com’s High Resolution Explained: Features and Benefits

Knowing each device’s specific dimensions isn’t really important. What’s important is recognizing that higher-quality displays are coming to your website, hungry for higher-quality images.

Retina Display Quick Tips (non-WordPress)

I’ll give you the quick and dirty Retina bullet points here and then provide an easy “WordPress how-to” afterwards.

• Retina displays provide twice as much image resolution horizontally and twice as much vertically.
• The easy answer to tailoring images to Retina displays is to upload a 400 x 400 image and display it in a 200 x 200 area on the webpage. (FYI: 400 times 400 = 16,000 and 200 times 200 = 4,000 -> 4 times the number of pixels because of double horizontal and double vertical.)
• To do this, you would upload a 400 x 400 image and set the HTML img tag’s width to 200 and height to 200.
• This method causes one, big, important concern — bandwidth. If your images are twice as big in file size (roughly), and the large majority of viewers won’t benefit from your double-size images, you’re wasting bandwidth (i.e. longer page load times).
• So the elegant solution is to only serve higher-quality images to devices that benefit from them. At this writing, only the Safari web browser (on Macs) actually benefits from receiving double-size images, and Safari has its own CSS media query, -webkit-min-device-pixel-ratio. Basically, if -webkit-min-device-pixel-ratio = 2, display for Retina devices. If = 1, display for non-Retina devices.
• So, yes, you need 2 versions of each image file. Let’s say filename my-square-logo.png is 200 x 200. You’ll need a second image that is 400 x 400 and has a filename of my-square-logo@2x.png (like Apple recommends). Then you would use some JavaScript or other solution to display the appropriate image based on the CSS media query results, either the Retina @2x version (400 x 400 image in a 200 x 200 area on the webpage) or the non-Retina version (200 x 200 image in a 200 x 200 area on the webpage).

A WordPress plugin that does it all

Based on the information above, you might feel like shying away from providing Retina-quality images at all. However, there’s a great WordPress plugin that has all the features you need, WP Retina 2x:

• Generates the @2x versions of every image size, for existing and future Media Library uploads
• Displays the @2x versions only to Retina devices
• Finds @2x images that you upload manually (e.g. when themes use images outside the Media Library)
• Activate the plugin’s Debug mode (i.e. force always displaying the @2x versions)
• Integrates with the Enable Media Replace plugin, for when you want to replace an image that doesn’t have large enough dimensions with one that does

Example, with Screenshots

For my example, I am using images from Orman Clark’s 5 Bokeh Effect Backgrounds, free for personal or commercial use. All 5 images are 2,500 x 1,500, and the preview.jpg image is 570 x 1,020. Here’s a screenshot of how these 2 images appear in the wp-admin Media Manager:

Retina images in wp-admin Media Manager (click for full-size view)

The screenshot above shows the added “Retina” column in the Media Manager. The “Upload a new file” button appears in the Retina column because of having the Enable Media Replace plugin activated. I also added the code to functions.php to show the user-uploaded image’s actual dimensions (my code is here).

The screenshot below shows the original image files (bokeh-1.jpg and preview.jpg) and the auto-generated images of various sizes. The plugin recognized the original bokeh-1.jpg as large enough to have Retina versions (@2x) created, but not the preview.jpg file.

Auto-generated images alongside original uploads in the wp-content uploads folder

The following screenshot of the plugin’s wp-admin area shows the images that were large enough to generate @2x versions for and images that have issues, along with actions to take.

WordPress Retina plugin Media Manager display page

Here are 2 screenshots showing the image source loaded when the plugin’s “Debug” mode is enabled, forcing all images to be sourced with Retina-quality versions:

Forced displaying Retina-quality images

Force displaying Retina-quality images does not work on full-size image inserts

As the plugin’s FAQ states, the plugin won’t work when you source a full-size image in your post because there’s no way to make it double in size (you can resize images down but not up). That’s also evidenced by the screenshot above showing the files in the uploads folder (1 with @2x versions, 1 with issues).

Should you “Retina-ize” your website?

I think so. It just takes some getting used to and a bit more bandwidth for those users who have purchased devices that tell you they want higher-quality viewing. If you have a featured image size of 200 x 100, you’ll need to upload 400 x 200 images from now on. Even if you don’t have a Retina display device of your own, your website will be ahead of the times… which will eventually become the norm.

The plugin author, Jordy Meow, has provided a comprehensive plugin. All you need to do is get in the habit of uploading bigger images. It’s so easy that you don’t have an excuse to avoid adding Retina-size images to your WordPress site. Try the free WP Retina 2x plugin today.

Credit: Lauren (eye image) by BSC Photography

Related posts:

1. Daily Tip: Display Images, Videos and Media in WordPress with the prettyPhoto Media Plugin Check out this new lightbox plugin that handles any kind of media you want to display on your blog....
2. How to Add a Caption to WordPress Images This is a simple trick that many may have overlooked....
3. Quick Tip: Add Dynamic Images to Your WordPress Blog Give your WordPress site a bit of extra visual spice by using dynamic images....
4. Spice Up Your WordPress Theme with Special Effects on Post Images Does your WordPress theme need a little face lift? Want to make your site stand out from all the cookie...
5. Daily Tip: Sharpen Resized JPG Images in WordPress Have you noticed that when JPG images get resized they can become a little fuzzy? Here's how you can fix...