How to use optimized Retina images on your WordPress site for top user experience on Apple devices

Share this Tweet about this on TwitterShare on Google+Share on FacebookShare on RedditDigg thisEmail this to someone
use optimized retina images on your WordPress website
Retina Display Logo

In this article I will show you how to use optimized Retina images on your website, in order to offer an amazing user experience on Apple devices.

Retina is a special type of display present on Apple devices, having a higher pixel density than usual displays. This display allows images to have an extremely crisp look, as if they were printed, by using double resolution images, instead of the usual resolution images for the same screen space.

When an Apple product has a Retina Display, each user interface widget is doubled in width and height to compensate for the smaller pixels. Apple calls this mode HiDPI mode.

What does this mean for your (WordPress) website?

If you don’t provide images with double resolution on your website, your images will look on a Retina display the same as they look on a lesser pixel density screen. Nothing gained, nothing lost.

But if you provide these images, your website will look more shiny and crisp on these devices, thus being  more appealing to your visitors. This seems like the sensible alternative for a well maintained website, and for this you need to take a few simple steps.

A plugin like WP Retina 2x automatically creates the Retina enhanced images for your WordPress website, storing them alongside your usual images – you can identify them in the uploads folder by their specific @2x suffix – and takes care of displaying them when needed.

There are some downsides, though. Retina images are double the pixels for each size, meaning they can be four times bigger in size which means they take more space on your hosting and, most important take more time to be downloaded to your visitors’ devices thus harming users’ experience with your site.

In order to cope with this downside, optimizing your images is crucial. For this, you can use an image optimization plugin that also optimizes the Retina images, like our ShortPixel Image Optimization plugin.

ShortPixel Image Optimizer features, starting with version 4.1, automatic Retina images optimization. if you activate the option present in the Advanced tab of the ShortPixel Settings. This means that the ShortPixel Image Optimization plugin, while optimizing images, will detect any existing Retina specific (@2x) images and optimize them too. Big images like the Retina specific images will benefit most of ShortPixel’s powerful adaptive algorithms so optimization rates of 80% are quite frequent.

In conclusion, I strongly recommend to use optimized Retina images on your website as it’s good for user experince and quite straightforward too. It boils down to this: install  the two plugins – WP Retina 2x and ShortPixel Image Optimizer – and activate the Retina image optimization in the Advanced tab of the ShortPixel Settings. From then on, the two plugins will do the job automatically for you.

Share this Tweet about this on TwitterShare on Google+Share on FacebookShare on RedditDigg thisEmail this to someone
  • murrayac

    If we do activate Optimise Retina Images do we have to change Resize large Image sizes for retina?

  • ShortPixel

    Hi,
    if you activate the “Optimize Retina images” option then ShortPixel plugin will look for any files that contain “@2x” inside their name and optimize these as well. Resize option shouldn’t affect this process.

  • Peter Z

    If you’re looking for a more light weight Retina plugin, check out https://wordpress.org/plugins/retina-2x/ – it’s much more simple and your website will remain fast!