Is Your WordPress Retina Ready?

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.

Apple explains Retina

 

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)

 

How to add Retina.js to WordPress

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.

Copy the URL

 

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.

Extend your site

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:

Retina.js integrated in Extend Your Site

 

Now you’re done with adding codes to your WordPress to get it retina ready.

Using retina ready images in WordPress

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!

Share this post with your friends & followers:

Supercharge your email list

Supercharge Your Email List is a proven, repeatable system you can use to turn your existing email list into a predictable income source.

It works even if your past email newsletters never got any sales or new clients.

See on

Get Your First Sponsor

Learn an easy process to sell sponsorships for your podcast, newsletter, or virtual summit.

You don't have to love cold pitches or have a gazillion followers for this strategy to pay off.


See on

Hey, I'm Jan!

Jan Koch

I run the Uncommon Solopreneur to help solopreneurs like you and me get paid for our content.

It's great to have you here!

Discover The 5 Reasons Your Email Subscribers Don't Buy.

You've got an email list yet are struggling to grow it and earn any revenue with the newsletters you send.

Enter your details below and I'll send you the five reasons your subscribers don't buy (which I learned from sending over 735,000 newsletters) and how to improve your email newsletter's performance.
envelope linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram