Responsive and retina-ready images in WordPress

Images are an important part of people’s web experience, and for many businesses (like tourism companies for instance) images are a key marketing tool.

Yet another reason to keep your WordPress installation up to date!

How Images Worked in WordPress Before 4.4

Traditionally, when users uploaded images into WordPress, it automatically resized or cropped the image to create smaller versions for different purposes on a website or blog, depending on the images required by the WordPress theme.

For example, if you uploaded an image that was 1200 x 900 pixels, the image sizes might look like this:

• Full Size: 1200 x 900 pixels
• Large: 600 x 450 pixels
• Medium: 300 x 125 pixels
• Thumbnail: 150 x 150 pixels.

When the full size image was attached to a WordPress post or page, users on computers and mobile devices would see the full size image if the theme allowed it.

What Changed in WordPress 4.4

It never make sense to deliver and display the full size image on a standard mobile device, because the browser would be loading a larger file than the display could show clearly.

Responsive images support in WordPress 4.4 added srcset and sizes attributes, so the software can now automatically display the right image based on the user’s screen size. If you attach a full size 1200 x 900 image to a post in WordPress 4.4, many mobile devices will see the large or medium-sized image instead.

What about Retina Displays?

But what about when a mobile device or computer has a retina display? “Retina display” is the registered trademark used by Apple for new screen technology that has crisper images and smoother font rendering because it has a much higher resolution than a typical mobile device with more dots per inch (or DPI).

We want people using these devices to see an image in it’s full glory and a sometimes an image of even 1200 x 900 won’t cut the mustard.

How to Add Retina Support with a Script.

For the technically adept it’s quite easy to add Retina support to an existing WordPress theme.

One way is to download the Retina.js script, add it to your theme’s js directory and then enqueue the script in your functions.php file.

Then, whenever you add a new image to the site, save one file as photo.png and another one twice the size as photo@2x.png and the script will detect which version to display. What size should you upload? The bigger the better, up to 2048 pixels wide if you can!

Did we get lose you about a paragraph ago? There’s another, even easier, way:

The WP Retina 2x Plugin

The WP Retina 2X plugin by TigrouMeow creates the image files required by retina devices automatically and displays them, so your website will look crisp on every device.

The trick is that the full-size images you upload might need to be 2048 pixels wide for the plugin to be able generate the full set of eight images required by your website. The dashboard will tell you the size you need to upload. If you don’t have images of this size, upload them as large as you can… the bigger the better!

Only pro users ($15 per year for up to 5 websites) have access to all the features of the WP Retina 2X dashboard such as filtered image listings, details for each image, replace images by drag-and-drop and direct support from the developer.