The Easy Way to add Retina Images to your WordPress Website

clearer-images-wordpress-website-water-drops

I’ve discovered a retina WordPress plugin that makes it easy to serve crystal clear images to visitors with high definition screens. It’s simple for non-techies to set up. It doesn’t even increase page load times for non-retina visitors. This makes it a win win.

Why do you need a WordPress retina plugin?

I’ve known about retina images for years. We’ve developed retina-enabled WordPress sites for clients that serve larger versions of images to users with high definition (HD) screens. However until I switched from PC to Mac a few months ago, I didn’t have direct experience of working with retina screens.

Because I wasn’t using an HD screen myself, I didn’t really take retina seriously. Website images looked fine on my PC so I assumed that they would look the same on a retina screen. I thought that adding a retina version of an image would make it even clearer, but that standard images would still look fine for retina users. That’s where I was wrong.

When I got my MacBook Pro with its HD retina screen, I was shocked at how bad most website images looked. The same images looked great on my old PC, but fuzzy and blurred on the MacBook. I have no idea why this is (if you do, please add a comment below!) but the fact is, standard website images look horrible on retina screens.

This means that retina images are important if you want your website to look professional.

Introducing the WordPress Retina 2x plugin

WordPress Retina 2x is a plugin that automatically creates retina and non-retina versions of your images.

Once you have set it up, the only thing you need to do differently is to add all your images twice the size you normally would. For example, the featured images on our blog are 440 x 290 pixels so I need to upload them as 880 x 580px. The WordPress Retina 2x plugin automatically creates two versions of each image – a normal one for standard screens and a bigger one for retina screens. It cleverly detects each user’s device and serves the appropriate image.

Will retina images slow down my site?

A retina images WordPress plugin will increase page load times slightly for visitors with retina screens. This is because they’ll be viewing images twice as big as standard images in order to achieve the high definition effect.

However there will be no performance impact for visitors with standard screens. The WordPress Retina 2x plugin cleverly serves standard images to non-retina users. This means the larger images are only used for users who will benefit from them.

How can I set up WordPress Retina 2x?

To set up the free version, install the WordPress Retina 2x plugin (Plugins > Add New in the WordPress admin). The plugin will automatically detect all your image sizes. When you upload new images to the Media Library, it will create a double sized version of each image size and serve them to users with retina screens.

For greater control, you can go to Settings > Retina. This lets you exclude any image sizes that you don’t need retina images for, which will save space on your hosting account. You can also tweak the more advanced settings.

retina-plugin-settings

The only setting in the ‘Advanced tab’ that I recommend for most people is ‘Ignore Mobile’. This tells the plugin not to serve HD images to mobiles, even if they have retina screens.

Why disable retina images on mobiles?

There are a few reasons why I would disable retina images on mobiles:

  1. Mobile users often access websites via slower connections (e.g. the mobile network). They’re likely to prioritise fast page load times over better quality images.
  2. Standard-sized images usually look fine on mobiles. This is a bit confusing so I’ll give you an example to help explain it. If you have a 1,000 pixel image on your website then the retina plugin will create a retina version of 2,000px. However an iPhone 6 screen is only 375px wide. If it has a 2x retina display then it needs images to be 750px in order to render them in HD, This is smaller than the standard 1,000px image on your website. As a result, mobile users often won’t benefit from retina images so there’s no need to serve bigger images to them.

To set up the plugin in more detail, I recommend following this tutorial. This covers the Pro version of the plugin which has some extra features such as a dashboard showing the retina status of all your images. However it’s useful for users of the free version too, which is what we’re using on this website.

Do you use retina images on your website?

Now it’s your turn! Do you use a plugin (or another method) to add retina images on your own WordPress website? Maybe you like WordPress Retina 2x. Do you use a different plugin? Is it worth accepting slightly slower page load times for retina users in return for sharper images? I’d love to hear your thoughts in the comments below.