Optimize Images in Your Blog Posts for Retina Display

A few weeks ago I wrote about optimizing Gravatars for Retina display. This used CSS to resize images of authors and those who leave comments on your blog.

But what about images inside the entry content of your post?

Well I took matters into my own hands, and decided to do a little research. One could argue that the same process as optimizing Gravatars would work with post images, but there’s a cost involved with that.

Typically images that are found in posts can range anywhere from 400-1000 pixels in width. If we chose the @2x method, this would mean that each image would be between 800-2000 pixels in width.

Serving images that large on every page load could result in a tremendous resource hog, not to mention it would eat away at your bandwidth.

As I was doing my research on a better way to serve optimal images to folks with a Retina display, I found a script that came highly recommended by many.

Retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.

How Retina.js Works

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

The script assumes you use Apple’s prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server.

If you have an image in your blog post that looks like this:

The script will check your server to see if an alternative image (appended with @2x) exists, and if it does, will output that image along with the original height and width. The new HTML would look like this:

Below is a sample image that is dynamically being served with the retina.js script. The image you see was added to this post with the first set of HTML you see in the code above, but output as the second set of HTML code.

Golden Gate Bridge in San Francisco

(Note: If you’re reading this post via email, you won’t be able to see what I’m talking about. Head over to the browser version of the post for the good stuff.)

How to Implement Retina.js

Now that I’ve sold you on adding the retina.js script to your site, I’ll walk you through how to implement it. It’s quite a simple process, so don’t sweat it.

The first thing you need to do is download the retina.js files. Unpack the zip file and you’ll see a folder with two files inside. (retina.js and retina.min.js)

Copy the retina.min.js file, and place that into the /js/ folder inside your theme. If your theme doesn’t contain a /js/ folder, just create a new one and then upload the file onto your server.

Now you need to properly enqueue the retina.min.js file your functions.php file. Most themes already have an enqueue function that is loading other scripts (such as responsive menu js file) or styles such as Google Fonts or Dashicons.

Here’s how the enqueue function looks in my theme. Notice the second line of the wp_enqueue_script — that is where I’m loading my retina.min.js file.

Creating Retina Images

Now that you’ve got the retina.js loaded on your website, it’s time to talk about the images you want to show on your blog post.

Because you will be serving @2x images, you need to figure out what the width of your content area is, and then create images that are twice the size. For instance, my content width is 720px, so I create images that are 1440px wide.

The image of the Golden Gate bridge above is 1440px by 720px, but I also need to have a smaller version of that with half the dimensions that will be served on displays that are non-Retina.

When I want to show an image, all I have to do is upload both the regular size version (720px by 360px) as well as the @2x size version (1440px by 720px) through the Add Media option in my post editor.

Because both files are being uploaded into the same directory, the retina.js script finds the Retina-optizmed version and displays that when necessary.

I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.

Get the Good Stuff

If you're interested in web design or the Genesis Framework, here's where you take the next step in growing your business. I'll be writing about my experiences with these topics.

Sign up for immediate access to the following:

  • Genesis Simple Share Plugin
  • Minimalist Theme for Genesis
  • Mobile First Theme for Genesis
  • Quote Graphic PSD

You will also be notified every time I publish on my blog.

Want to get FREE content? Click here to register.

Comments

  1. says

    Thanks for the great post!

    So when using this script and uploading files with both resolutions, which version should I actually include in my post? Do I just insert the non-retina version and then the upload (but not insert) the retina version and the script will do the switch when it detects a retina display?

    • says

      Hey Chris — yes, just as you described. The HTML for the image in your post should be the non-Retina version and the script will automatically detect if there’s a @2x image, and serve that dynamically.

      If your images are large in file size and take time to load, you can actually refresh your page and watch the @2x slowly fade in on a Retina machine. In other words it loads the smaller one first, make the detection and then replaces on the fly.

  2. says

    Is there a way to limit it to larger devices? For instance, if I load your site on an iPhone, there’s 256px width of your content area. The non-retina one you uploaded is 720px wide, so on an iPhone that’s already scaled down to 2.8x.

    Loading the larger version makes the image 5.6x, which is a waste since it looks exactly like the 2.8x version on that screen. It also increases the file size by 333%, which isn’t great for a bandwidth-constrained device like a mobile phone.

    It would be nice if, before replacing the image, it looks at the current device’s screen and the current image to see if it would benefit from a larger version. Since that photo is already 2.8x on iPhone, no need for larger version. But on an iPad, desktop or laptop it would replace the image.

    • says

      These are great questions, Bill, and certainly ones to consider when using the retina.js script. It’s worth noting that this tutorial and method might not be optimal if you have a post with multiple images, as the potential for a performance issue is there.

      In other words, use this responsibly. I generally only show a one (if a few, they are small in size) images, so it’s less of an issue.

      Ideally there’d be a way through the script or a plugin to set parameters on use, etc.

  3. Marcel says

    Great Tutorial. But the resizing isnt working on my ipad if i visit my website. The image ist displayed with the original high (from the @2x) on my ipad and not compressed?
    What is wrong?
    Thank you ;)

Thoughts

Your email address will not be published. Required fields are marked *