Do your blog posts look blurry on modern screens? WordPress guide to retina images

All mobile screens and most new, high-end laptops and computer screens now support high-resolution images referred to as “Retina” by Apple.

So how do you deliver the retina version of images to people viewing it on a retina device?

Here is a series of steps you can take to make your site ready for retina screens.

Theme vs Content

Before we get into how to set up retina images, it’s important you understand the difference between your theme and your site content.

Themes

In WordPress, the core design of the page is managed by a theme. The theme contains HTML / CSS and some images to show colors and shapes. Retina already displays HTML / CSS fine; it’s the images we need to worry about, so it’s important to know what is what.

For example, on this WP Curve Blog, you can see a white background around the sides, lines around the search box (top right), darker shaded areas in the footer etc. That is all HTML / CSS and will naturally look good on a retina screen. However, you will also notice the WP Curve logo (top left) and social media icons (in the footer). Those are images, and if they aren’t retina-ready, then they won’t look good on a retina screen.

WP Curve blog - WordPress guide to retina images

To fix these small images, it’s typically a very small one-off job by a developer like WP Curve. Normally all that is done is we would load an image that is twice the width of the actual image. For example if your logo is 200px, we would put a 400px version in there and set it to 200px wide in HTML. What happens is that it looks fine on a normal screen, but it also looks great on retina screens (because it’s a double resolution image). The problem with this approach for site content is the image size. For a tiny logo the difference is minor, but for large full-width images, the difference can be huge. Then take a blog post with 10 images, and we are talking megabytes of extra unnecessary data and seconds off your load times.

Content

The site content is everything you as the site owner puts on the site. For example, this blog post is 100% content. It sits inside the theme, and we’ve uploaded all of the content ourselves. Doing retina images for site content is an ongoing job because you are constantly updating the content on your site.

As we mentioned above, we can’t just add double size images in because the content would be unnecessarily huge. So for the site content, we use the following process and plugins to manage the retina images.

Step 1- Install plugin WP Dashboard Notes

The first step is to install the WP Dashboard Notes plugin. The reason we install this is so we can keep an easy quick reference to the image sizes you want to use, right in your WordPress dashboard.

Go to “Add New” in the plugins menu and search for “WP Dashboard Notes” and install the plugin.

WP Dashboard notes

Add your first note via the ‘Add note’ button in the ‘Screen Options’ on your WordPress dashboard.

WP dashboard notes 1

Then create a new note and save your image sizes in your dashboard.

wp dashboard notes 2

Step 2 – Install the pro version of WP Retina 2X

You can achieve retina-ready blog posts without a plugin, but generally you need to know how to code and it’s a lot more complicated. The pro version of the WP Retina 2X plugin makes it super easy, to the point where when you upload your images, you only need to upload 1 and it does the rest (assuming your site is setup properly, in line with this guide).

Go to “Add New” in the plugins menu and search for “WP Retina 2x” and install the plugin.

wp retina 2x plugin 1

Once installed, activate the plugin, and go to “Retina” via the Settings menu tab.

wp-retina-2x-plugin-2

Then check the box against “Generate retina images automatically when images are uploaded or re-generated.”

Step 3 – Change your default media sizes

When you write a blog post, best practice would have you using images that are the same width each time. For example on our blog we use images that are 640px by 350px.

This number should be the exact full width of your content area on your theme. Have a developer let you know what the size is if you aren’t sure. Quite often it’s 640px. If you are game, you can right click and choose ‘Inspect Element’ and see if you can figure out the width for yourself.

Once you know the standard size of the images you are going to use in your content you want to add these to the media settings in WordPress.

Visit Settings > Media and add the sizes in. We use 640px by 350px and use the ‘Large’ size in WordPress (more on this later).

media settings 2

Step 4- Make your images double width

The next time you upload an image, upload one at exactly twice the size of your chosen image size. For our blog, the image width is 640px, so we would upload an image at 1280px width.

When you upload the image in WordPress, make sure you choose the image size you used above (i.e. ‘Large’). When you do this, your double sized image will be used for retina screens, but WordPress will create a 640px wide image for you for normal screens.

media-settings-1

A Pingdom site speed test with only high-resolution images showing produces the following result.

pingdom test before

However, the speed test conducted again with the images set to their normal settings shows a slight speed improvement, since they default to the double size images every time.

pingdom test after 1

 

Final bits

The other images you might need to think about are your blog’s featured images. These are used on your blog homepage and sometimes at the top of your posts, depending on the theme. If your theme supports retina images for featured image this is great, but it may not. Your developer might choose to handle these in the same way as your logo by adding double size featured images for each new post. It’s not ideal, but for one image, it won’t make a huge difference.

Now that you know how to get your site ready for retina screens, you will need high-resolution images that you can use. Not to worry – we have a list of sites from which you can download free high-resolution images. Download the list from below.

High resolution retina images download

About

Vinay is the content marketing manager for WP Curve. Follow him @wpcurve

WordPress problems?

Our WordPress experts have you covered.

Hyper-responsive 24/7/365 WordPress support, maintenance and small fixes.