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
  • Endless Theme for Genesis
  • 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.