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.
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:
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
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.
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.
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:
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