Getting your WordPress retina ready is crucial, as more and more devices with retina displays come on the market.
Especially when you're using WordPress for business purposes and to generate leads and revenue online, you want your images to look amazing.
You’re wondering what all this means? Let me take a step back.
Retina devices are devices that have a monitor with a very high resolution. That monitor makes things like images or text look razor-sharp.
Examples of retina devices are the latest iPhone or MacBook from Apple, but Google and Samsung also have very high-resolution displays.
The problem is that these displays rely on images in better resolution, normally retina ready images are twice as big as the normal versions.
If you’re not providing these retina ready images on your WordPress site, your images might look blurry on retina devices.
These blurry images can result in a loss of authority and credibility. And we all don’t want that, right?
To get your WordPress retina ready, it needs to detect the resolution of the monitor of your user, and then display either the retina or non-retina version of an image.
So for normal devices the normal image is loaded. But for retina devices your WordPress needs to load the bigger version of the image.
Sounds complicated?
Luckily there’s a pretty straightforward way to achieve just that without a lot of codes.
In this video, you can see the three steps to making your WordPress retina ready (or just keep on reading if you don't like to watch video tutorials)
With the help of the JavaScript library Retina.js we’ll make your WordPress retina ready in no time.
Let me share the exact configuration that I use on my personal blog. What you need to do is to add some scripts to your WordPress site.
First of all head over to RetinaJS on Github and download their script.
When you click on “Download Zip” you’ll download a zip file including two files, retina.js and retina.min.js.
Then open your WordPress admin panel and go to Media -> Add New.
Upload the retina.min.js file you just downloaded.
Most web hosts should let you do that. If you can’t upload retina.min.js you’ll need to upload it via cPanel. Leave a comment below if you experience issues.
Once you successfully uploaded the retina.min.js file to your media library, copy the URL to the file. You’ll need it later.
The next step is to tell WordPress to load and use the Retina.js library you just uploaded.
If you’re using a child theme, you can do that by editing the functions.php file of your theme by going to Appearance -> Editor. Then select the theme you’re using and locate the functions.php file in the files list on the right side.
If you’re not using a child theme, please don’t edit the functions.php file of your theme.
You'll lose changes to the functions.php file when you update the theme. Since you don't update child themes, this method works perfectly for child themes.
But it's not the way to go if you're not using a child theme.
In this case, I recommend a different way of adding the code snippets to get your WordPress retina ready.
I created the free Extend Your Site plugin for this purpose that you can download here.
This plugin allows you to add code to your theme without losing it when you install updates.
Got the Extend Your Site plugin running? Great. Then go to Plugins -> Extend Your Site -> Edit.
This is the code you need to add to either your functions.php file or to the Extend Your Site plugin:
// Make WordPress Retina Ready
function jk_retina_script() {
wp_enqueue_script('jk_retina', 'path_to_your_retina_min_js_file', null, '', true);
}
add_action( 'wp_head', 'jk_retina_script' );
Replace “path_to_your_retina_min_js_file” with the URL you copied from the media library (make sure to leave the quotation marks!).
This is how it should look if you're using the Extend Your Site plugin:
Now you’re done with adding codes to your WordPress to get it retina ready.
In order to have WordPress use the retina versions of your images, you need to upload them and name them properly.
You can edit your images with free tools like PicResize or FotoR online. Editing your images is important, as you want to edit the size of your images.
Say you’re uploading the image with filename apple.jpg to your post. apple.jpg has a resolution of 400x400 pixel.
The retina version of apple.jpg needs to have 800x800 pixel, the exact double size.
The file name of the retina version needs to be apple@2x.jpg.
Since you added Retina.js to your WordPress and thus made it retina ready, it will recognize the “@2x” in the filename and automatically use it as retina version for apple.jpg.
You need to do that for all images on your website because there’s no way your website can automatically create retina versions of your images (without them look blurry).
There’s a caveat though: the normal version and retina version of an image need to be in the same folder!
Since WordPress organizes file uploads in folder grouped by months and years, this might be a problem.
But here’s a simple workaround:
When editing older images, delete the old image from your media library.
Then upload the normal version and the retina version again.
This method will make WordPress save them in the same folder, and you’re good to go!
