A few weeks ago I received a frantic call from Natalie Franke saying that she had just set up her new iMac and our images looked horrible on her retina display. Not exactly the words a photographer wants to hear.
Up until that time, we had been uploading images set to the width of our blogs to make sure that our sites loaded more quickly. But now, with better visual technology, it is important to optimize images for retina display.
Monitors have 2x as many pixels – which means that images on a retina display are sized to be twice as large.
Not everyone will notice the difference, but if you’re someone who makes a living selling beautiful images, it’s important to make sure your photos look great on as many devices as possible.
At this point, if you’re anything like me you’re probably thinking “wonderful, another thing I need to pay attention to when I create blog posts.” As if there weren’t already enough things to keep in mind, but I promise that making the switch to retina display isn’t as bad as it sounds.
There are two ways to make sure your images look great on retina monitors.
LET CSS OPTIMIZE IMAGES
A lot of sites use CSS to automatically make sure that images stay within the space they’re supposed to on a site. So for example, my site is set up to prevent images in blogposts from displaying any wider than 595px. Which means that if I upload an image that is twice that size (1190px) and let the CSS scale my image down, it will look great on both retina and non-retina displays.
Loading images that are twice the size they need to be in a post feels funny and it makes the editor part of your site a little difficult to read, but when you hit publish, if you have great CSS, the image should look the correct size in the post.
Some WordPress themes don’t automatically size images to fit within their container – meaning that you just tried to upload an image and when you hit publish it looks something like this:
If your site looks something like what you’re seeing in the image above, you could try finding your theme’s style sheet (or the Advanced section of ProPhoto) and adding this bit of code to the very bottom:
.image{
height: 50%;
width: 50%;
}
img{
height: 50%;
width: 50%;
}
You may be tempted to upload full resolution images because in theory, it sounds like a lot less work than sizing your images for 2x the width that they need to be, but larger images ultimately slow your site down and can hurt your SEO.
OPTION 2: ADD A PLUGIN TO OPTIMIZE IMAGES
So the second way to make sure your images look great on retina devices is to add a plugin. If your site is already set up to size images to fit correctly on the blog page, then this is something you can ignore (because running lots of plugins slows sites down too).
However, if your CSS doesn’t size the post images correctly and that little bit of code above sounded scarier than skydiving without a parachute, I would try installing the plugin WP Retina 2x.
To get started: Go to “add new” in the plugins menu, then search for “WP Retina 2x” and install the plugin.
Once the plugin is installed and activated, go to the “settings” menu tab and then down to “retina.”
Afterwards you’ll need to go to the “Media” tab and then click “retina.” If you click the “bulk generate” button in the top right corner, the plugin will go back and automatically generate larger image sizes for all previous images.
I don’t trust plugins to make sure all of my images look perfect every.single.time – which is why I prefer the CSS method. But this plugin is really great for older images and any sites with CSS that doesn’t set image sizes.
THE WEB IS STILL CATCHING UP
The two solutions above are a really great start to solving the issue of retina displays, but it’s important to keep in mind that the internet is still catching up to retina displays. Only a small percentage of people use them at this point.
These solutions won’t fix every image on your site – especially if you’re using a slideshow or gallery plugin – but they should help make sure the images in your blog posts look great!
