How to Use WordPress Retina and WebP Images
When it comes to using WordPress and image optimization, the trick is always finding the best quality and still retaining the small image sizes for faster download times. KeyCDN designed the Optimus and Cache Enabler plugins to work in harmony together to deliver WebP files to supported browsers.
WordPress retina images
Retina is a term coined by Apple for displays on devices such as iPhones and Macbooks that have high resolution and pixel density. The term "retina images" is thrown around a lot, but basically it means they are high resolution. High resolution images are also used in the PC world on 4k monitors, Windows 10 laptops, and tablets. Everything is moving towards high pixel density displays and 4k, so when it comes to images on your website, now is the time to adapt.
Here are some common resolutions of devices that people are now using to browse the web. As you can see they are much higher than they used to be a few years ago.
- Macbook Pro, 13-Inch Retina Display: 2560 x 1600 resolution at 227 ppi
- Macbook Pro, 15-Inch Retina Display: 2880 x 1800 resolution at 220 ppi
- iPhone 6, 4.7-inch Retina Display: 1334 x 750 resolution at 326 ppi
- Lenova Yoga 900 QHD Display: 3200 x 1800 resolution at 276 ppi
- Surface Book HD Display: 3000 x 2000 resolution at 267 ppi
If you don't use retina images, your normal images, such as screenshots, will sometimes appear blurry on high resolution displays. Say you are working on a non-retina display. When you upload your image to WordPress, it might now appear blurry to those say on a Macbook Pro. That's definitely not good. How do you fix this? Well, you need to upload higher resolution images. How much bigger? Well, generally 2x the size is a good place to start.
How to use WordPress retina images
An option is a WordPress plugin called WP Retina 2x or you have a good theme that takes care of this. We have even updated our plugins to work with it. The plugin does two things: it creates image files required by the High-DPI devices and it displays them to your visitors accordingly. Now your website will look beautiful and crisp on every device! Since WordPress 4.4, there is support for responsive images. WP Retina 2x handles this well and nicely adds the retina images in the
srcset created by WordPress. Using
srcset means that you will be serving the correctly sized image per device so as not to harm your performance.
Here is an example of what actually happens to your code. It will generate your normal images using WP 4.4
srcset, but then also generate the @2x versions to display on retina devices.
<img srcset="image1-730x365.png 730w, image1-380x190.png 380w, image1-768x384.png 768w, image1-1024x512.png 1024w, firstname.lastname@example.org 1460w, email@example.com 760w" sizes="(max-width: 730px) 100vw, 730px" src="image1-730x365.png" width="730" height="365">
To work alongside our other WordPress plugins we recommend using the Picturefill method for displaying retina images. This is enabled by default under the "Advanced" settings. This is also the recommended method in the WP Retina 2x plugin.
You can see within the media library which image sizes have been converted by the plugin. By default images are converted automatically when uploaded to WordPress.
And that's it. You are now using WordPress retina images. Follow the next step below to also serve up WebP retina images for a major performance boost!
How to convert retina images to WebP
Even with using
srcset in WordPress 4.4, your retina images are still going to be much larger in size than you are used to. This is why image compression and file types are more important than ever! We updated our Optimus image compression plugin, along with WordPress Cache Enabler, to work with using
srcset. This means you can compress your images, convert them to retina, and also convert them to WebP. It is a great combination when it comes to web performance.
You can follow our tutorial on how to configure WebP in WordPress. When using all three of the plugins together your code will then look like this. As you can see the @2x retina versions are now both compressed and in the WebP file format.
<img srcset="image1-730x365.webp 730w, image1-380x190.webp 380w, image1-768x384.webp 768w, image1-1024x512.webp 1024w, firstname.lastname@example.org 1460w, email@example.com 760w" sizes="(max-width: 730px) 100vw, 730px" src="image1-730x365.webp" width="730" height="365">
If we take the file and compare the sizes, we can see that the retina WebP version is 26 KB, where as the retina PNG version is 34 KB. That is a decrease of 23.53% in file size just by converting to WebP! And it is now crisp for those high resolution screens.
As you can see using WordPress retina images along with WebP is a great combination which allows you to serve up beautiful crisp looking images, and still ensure they are small file sizes for fast loading. Have any other tricks when it comes to using WordPress retina images? If so, feel free to share them below.