How to properly set Retina images for your WordPress

Retina images can make your site shine on the iPads and iPhones, but they are also larger than the standard images. That’s why is important to optimize your Retina images and serve them only for the visitors with compatible devices. Poorly implemented Retina images will make your site slower for all users and will “angry” the mighty Google.

You could easily recognize Retina images, their naming convention is a bit different than the regular images.

A standard image: http://your-website.com/image-name.jpg
A Retina image includes @2x in its name: http://your-website.com/image-name@2x.jpg

Why are Retina images larger?

Retina images usually have twice as many pixels for each side of an image compared to a standard image, but they are displayed as they had the normal sizes. Basically, more pixels are squeezed in the same area which a standard image uses. That’s why images look sharper and brighter.

Wikipedia
In practice, thus far Apple has converted a device’s display to Retina by doubling the number of pixels in each direction, quadrupling the total resolution. This increase creates a sharper interface at the same physical dimensions. The sole exception to this has been the iPhone 6 Plus, which renders its display at triple the number of pixels in each direction, before down-sampling to a 1080p resolution.

Or as, Apple documentation states:

Apple.com
When you run a high-resolution-savvy app on a high-resolution device, the text, vector drawing, and UI controls are sharp. This is due to the increased pixel density—pixels are smaller and there are more of them per unit area. Each point in user space is backed by four pixels. The increase in pixel density results in higher details for drawing and text rendering.

So, do I need larger images? Yes and No. Yes for Retina users, and No for regular users. Imagine that Retina images are like a big sized thumbnails and it makes sens to display them only on Retina displays. Otherwise, you will have images too large for their placeholder without any real benefit. A non-Apple modern device will not recognize the @2x images and will treat them like bigger images.

Optimize Retina Images with ShortPixel

Before generating Retina images, be sure that you did setup ShortPixel to optimize Retina images. You can check this by going to the ShortPixel Settings, Advanced tab.

You can install ShortPixel plugin from the Plugins section of your WordPress dashboard, and read more about it one WordPress.org!

How to have and serve Retina images

The best known tool for generating Retina images for WordPress sites is WP Retina 2X.  It also serves regular images for users with no Retina screens.

The downside of using this WP Retina 2x plugin is that its free version presents some limitations. You cannot see some conversion details in the plugin menu and it doesn’t create the Retina versions of the original files.

How to test that your site serves proper images in right conditions?

You are sure that you follow all the right steps, the @2x images are in your library, and your site is looking good on the Retina displayed, but are you sure that the images you see are the right ones? Or, how do you know that the high-density images are served for the dedicated displayed if you don’t have an Apple device to test them?

A easy way to do it is from Chrome developments tools. You need to follow these steps:
– Go to Chrome Menu and select More tools,
– Choose your Developer Tools,
– Click on the Toggle device toolbar button,

– choose the proper viewport,
– and use your inspect tool to check the name of a particular image. If it contains the naming convention suggested by Apple – @2x – then congratulations, you have done everything right.

You could watch this demo made by the BrianWoodTraining for a more detailed presentation of this method:

Retina images look amazing on Apple mobile devices, being one of those things which convert regular users in hard die fans. If you implement them well, then Google will not complain that you have Images too large for their placeholders, and Apple products owners will thank your for the better user experience.

Image credits
Tran Mau Tri Tam