The images on my site looked decent and loaded quickly. I thought that was enough. Then I invested some time in making them Retina-ready and WOWZA, the upgraded photos looked phe-nom-e-nal! Now there’s no way I can go back.
Retina devices have more pixels per inch, so they require high-resolution images to fill in those extra pixels. But Apple devices aren’t the only pixel gobblers. Surface tablets, Android phones, iPhones, they all require Retina-ready images.
In this post, I’m going to show you how I created high-resolution images in WordPress for Retina devices. I’m going to teach you how to take your photos from this…
…to this…
…all while making sure that you deliver the most optimized file you can because these beautiful high definition images are enormous and will slow down your site big time if not served correctly.
P.S. If the images above look the same, that’s because your device doesn’t support high definition images, but they’re becoming increasingly popular so you should take the time to optimize for high-resolution screens.
The WordPress Guide to Retina Images
Your screen consists of thousands (maybe millions if you have a big screen) of tiny squares, called pixels. To render an image, the image file has instructions for each pixel on your screen, telling it which color it needs to be in order to produce the image.
Image resolution highly affects how your image appears on screen, but not in the way you might think. We assume resolution on screens works the same as resolution on paper, but it doesn’t.
So let’s test your assumptions with a pop quiz!
1. Which resolution produces the smallest file size?
A) 72 DPI
B) 150 DPI
C) 300 DPI
D) All of the above
2. At what resolution should you save your images so they look high quality on the web?
A) 72 DPI
B) 150 DPI
C) 300 DPI
D) Who cares?
The answer to both questions is D.
Somewhere along the way, I learned that 72 DPI was the standard resolution for the web. I assumed that if I wanted my images to look nice on Retina screens, I should double that number. I chose 150 DPI because it was a nice round number that gave me a little extra, so I started saving all the images on my site at 150DPI.
I now know that I was totally wrong.
For one, DPI doesn’t affect how an image appears on your site. DPI stands for dots per inch on paper. Here’s what’s really going on.
Check out these three images that were saved at different DPIs:
They all look the same and they all have the same file size. Download them and open them in Photoshop if you don’t believe me.
They all have the same file size because they all have the same instructions for the same number of pixels.
Your screen doesn’t give a hoot about DPI, but your printer does. DPI tells your printer how densely to pack together the pixels on the screen when it prints out the image on paper.
Here’s what those three images look like when I printed them:
Resolution communicates how densely you want the image data to display. If I have a 100px by 100px image, I have data for 10,000 pixels.
- In a high-resolution image, I’m packing that data into a smaller space, producing more detail.
- For a low-resolution image, I’m spreading that data out over a larger area.
The image resolution doesn’t change the amount of data in the image, just how densely that data appears.
Miss-iss-i-PPI
PPI or pixels per inch is a measure of how many pixels a screen can display in an inch.
Retina screens have twice as many pixels, vertically and horizontally, which means that the space that used to be occupied by one pixel, now has four pixels!
As we know from above, we don’t have enough data to give instructions to all those new pixels. This is why regular images on Retina screens look so dang blurry. Here’s that bug again.
Rather than serving up a beautiful but tiny image to preserve the detail like with print, Retina screens try to spread the data out. The poor neglected pixels who don’t have data of their own, try to use the data from the pixels around them to figure out what color they should be, like a bunch of jockers.
They’re doing their best, but let’s be honest, they’re doing a crappy job.
To fix this we need to provide WordPress with denser images so there’s enough data to go around. Which brings us to how to make retina images, step 1…
How to Make Images Retina Ready?
Step 1. Produce images with double the pixels
Step 2. Serve Retina Images to Retina Devices
Step 3. Upload Retina Images to your Website
Step 1: You need to produce images with double the pixel dimensions for your site
If you’re following best practice, then you know that you need to scale your images to the right size before you upload them. To produce Retina images in WordPress with enough data for every pixel, you need to double the pixel dimensions for every image you upload.
If you have a large hero image that is 1600px wide and 400px tall, you need to produce an image that is 3200px wide and 800px tall. If the width of your blog is 800px, then the images for your blog posts will have to have a width of 1600px and so forth.
You only need to double the pixel dimensions for the largest possible size that your image will display at. You do NOT need to create images with double dimensions for every possible responsive size.
You could save your images with @2x in the filename before the file extension, but it isn’t necessary since the plugin below will do this for you.
How to make Retina images for images that I’ve already uploaded?
Making your site Retina-friendly can be a time-consuming process if you already have a site with lots of content because you have to go back to the original images you downloaded from the web or your camera and produce the appropriate size. You can’t simply download the image and upsize it in Photoshop or you’re going to get the same blurry results.
If you weren’t scaling your images and were uploading a huge image, you might get lucky if the images are big enough. If you were uploading a large image size (2000px x 800px) for all your images, even if they were only going to appear in the body of the blog at 800px, then you don’t have to upload a large replacement. You already have an image with enough data that will suffice, even if it is a bit oversized; however, it is best practice if you produce the exact size you need for performance benefits.
Step 2: Serve Retina Images to Retina Devices
There a lot of different ways to do this. I’m going to show you two. First I’ll show you manual way so you code lovers can see what is going on. Then, I’ll show you the quick and easy way for all you code haters 😉
Option 1: Manually Modify Srcset in WordPress
One of the better ways to serve Retina images is by using the srcset attribute. Here’s how it works. Instead of using the src attribute to share one image, you give the browser a list of images to choose from. The browser then picks downloads and displays the most appropriate image for the visitor’s device. This not only works for Retina images, but you can use it to serve different images sizes or different formats too.
We’re going to focus on Retina images, so in our srcset attribute, we need to include a regular image for non-Retina devices and a Retina image for Retina devices. You don’t want to waste time downloading and serving oversized images on non-Retina screens, so it is important that you include both. You also need to include the usual src tag for browsers that don’t support srcset yet.
This is what it will look like:
<img srcset="logo_regular.jpg 1x, logo_retina.jpg 2x" src="logo_regular.jpg"/>
See the 1x and 2x? This helps the browser identify which image is the regular version and which is the Retina version. If the user has a Retina device, the browser wills serve the 2x image. If they don’t, it’ll serve the 1x version. And if the browser doesn’t support srcset, then it’ll use the one in the src attribute.
Easy right? You just add the srcset attribute to your HTML code when you’re inserting images and you can serve up Retina images…except it’s never that easy.
The problem is you’re not giving the browser smaller images for smaller devices. In other words, the above code doesn’t produce responsive images. You could serve a huge Retina photo on a tiny iPhone over 4G.
Here’s where it can get complicated because you need to add a lot more attributes to organize all the different options you want to give the browser.
First, you’ll need to graduate to the HTML5 <picture> element.
The <picture> element has a lot more going on:
<picture>
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="my image" width="100" height="100">
</picture>
See how the <img> is nested within the <picture> element? Browsers that don’t support the HTML5 <picture> element will fall back to the image specified in the <img> element. In fact, the <img> is a requirement (or the image will fail to render) and must appear last.
But the coolest part about the <picture> element is the <source> element that is tucked inside. The <source> elements allow media queries in the media attribute. To give the browser different responsive image options, you’ll insert multiple <source> elements in the <picture> element and tell the browser when it is appropriate to use it, with the media attribute. You’ll then add a Retina image and a regular image to the srcset attribute in the <source> element. Let’s get a gist going because it is a lot.
Well…that escalated quickly. And you don’t even wanna know how much longer it gets when you add WebP image options.
I wouldn’t recommend modifying all your images to include all this extra code manually. You definitely want to use a tool to help automate this process or a plugin to modify your HTML. Which brings us to the WP Retina 2x plugin.
Option 2: Install and Configure the WordPress Retina 2x plugin
WP Retina 2x is a free plugin in the WordPress repository with a Pro version. The free version will suffice for this tutorial.
Why is WordPress Retina 2x the best plugin for the job?
- You won’t have to manually edit your HTML code to add Retina images
- Unlike some other Retina plugins, WordPress Retina 2x doesn’t require you to rename all your images with @2x to identify them as Retina images.
- WordPress Retina 2x is compatible with caching plugins, which can’t be said for all Retina plugins.
- It has a media library view (see below) so you can keep track of what images need to be Retina-fied. This is useful if you have a site with a lot of existing images.
- The plugin gives you multiple options for how to serve up your Retina images in WordPress, so if one method is incompatible what your site, you can switch to another method.
- It integrates well with Smush and Smush Pro
Let’s focus on that last reason because image optimization becomes even more important when working with Retina images.
With the beetle photo above, you can see how the Retina image file size is twice as large as the regular image. If you have a lot of images per page, then this will drastically slow down your site.
Smush can help you optimize your images, but Smush Pro will give you an extra advantage. The Smush Pro CDN can automatically convert your images to WebP files, which are much smaller than comparable JPEGs and PNGs. The Smush Pro CDN also automatically resizes your image, so if your media library has oversized images, the Smush Pro CDN will serve up the right size. Try Smush Pro free here.
How to Configure the WordPress Retina 2x plugin to Make Images for Retina Display
Let’s go over some available settings in the WordPress Retina 2x plugin.
Basic Settings
Disabled Sizes allows you to avoid converting certain image sizes to Retina in order to save disk space.
Retina Quality allows you to set the compression quality for JPEG.
The important setting on this page is Method. You have several options for serving up Retina images.
PictureFill
PictureFill is the recommended method for serving Retina images. It uses the JS polyfill to load the images or rewrites the HTML to use the srcset attribute in WordPress.
Responsive Images
To use the Responsive Images method, you must be using WordPress 4.4 or later, which automatically uses the srcset attribute in WordPress. The plugin adds the Retina images to the source set.
Retina.js
This method relies entirely on JavaScript. The HTML loads both the normal image, then if Retina support is detected, it also loads the Retina image, so both image files are downloaded.
HTML Rewrite
HTML rewrite changes the src tags when a Retina device is detected, but could potentially have issues when used with some caching plugins.
Retina -Images
The Retina images method will modify your .htaccess files in order to serve the appropriate files. This method will not work if you’re using a CDN such as the Smush Pro CDN.
Advanced Settings
In the advanced settings section, you need to enable Auto-Generate so new uploads automatically get a Retina file created. Then save your settings by pushing the blue button.
Step 3: Upload your Retina Images to WordPress and Use Them on Your Site
After you’ve created Retina images and configured the plugin, it’s time to upload them to your site. The upload process is the same although you may have to adjust your site settings so you can upload huge files to your media library.
When you’re going to use the image on your site, you’ll want to use the image variation that is half the width and height of the full size.
The plugin only recognizes images that are created through the media library. For images that the plugin doesn’t recognize, such as theme icons and logos, you’ll have to add @2x to the file name, before the .png or .jpeg extension. Then upload the file to the same place as the original for the WP Retina 2x plugin to recognize it as a Retina file and serve it on compatible devices.
So for example, if you have a site icon that is 200 x 200px with the filename icon.png, you’ll create a 400 x 400px version and name it icon@2x.png and upload it via FTP or SFTP to the same folder as the original icon.png. The plugin will take care of the rest.
As I mentioned earlier, if you’re working on a site with a lot of existing images, the WP Retina 2x Pro plugin has some time-saving tools to make the process of uploading and replacing the existing images easy.
Possible issues with WP Retina 2x
Be aware that you may experience issues using the WP Retina 2x plugin if you’re using certain slideshow plugins or incompatible CDNs. The WP Engine CDN, for example, is known to cause issues so you’ll have to modify the re-writing rule in your WP Engine settings, instructions here. If you’re using Amazon S3, you shouldn’t use WP Retina 2x at all.
If you’re looking for a CDN that just works with WP Retina 2x and doesn’t slow down WordPress, might I suggest you give Smush a try? You can use the free version to optimize and improve your images, but in order to get access to the CDN and really take some weight off of those heavy Retina images, Smush Pro is going to give you what you need. You can sign up for a free trial of Smush Pro here.
To activate the Smush Pro CDN, install the Smush Pro plugin. Then in the Smush settings, go to the CDN section and push the Get Started button.
Once you activate the CDN, I suggest enabling WebP conversion. WebP image files are substantially smaller so converting your images will make your pages load much faster. You can get a full break down on benefits here.
You’ll also want to turn on automatic image resizing. This way if you have oversized images, you won’t use up so much file space serving up a larger image than you need. Just flip the Enable automatic resizing of my images switch in the Smush Pro CDN settings.
The Smush CDN will allow you to serve up the most efficient Retina images so you can get the quality you want without the bloat that slows down your site.
That’s All
While using the Smush Pro CDN and the WP Retina 2x plugin is the best way to serve up most Retina images in WordPress, SVG images are also an option for simple graphics such as flat logos and icons. You can learn more about this tricky file type here.
Retina images are only served to visitors with capable devices, other visitors won’t experience a change in performance. With the WP Retina 2x plugin, they’ll still get the same images they always have, that is, until they upgrade.
Retina devices are becoming more and more popular so you should start upgrading your site. The best place to start is by making sure all the new images you add to your site are Retina-ready. Then, modify the largest, most visually impressive images on your site by creating a Retina version and replacing the existing image. Then, go through and scale all the oversized images that are left in the body of blog posts and what not. You’ll have a gorgeous site with fantastic photos before you know it.