The easy way to add retina images to your WordPress website

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 Perfect Images plugin

Perfect Images 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 Perfect Images 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 Perfect Images 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 Perfect Images?

To set up the plugin, 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 Perfect Images. 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.