Optimize Gravatars for Retina Display

As a designer and someone who pays close attention to detail, I’m continually searching for ways to make my website look the very best.

When Apple released the Retina display, they pioneered a flawless onscreen performance that remains unmatched. Currently this is available on select MacBook Pros, iPads and iPhones.

These devices pack twice as many pixels into the same space as older devices, giving us an opportunity to serve images that are amazingly crisp.

Spotting the Difference

This tutorial will cover the use of Gravatar images, which are often seen in multiple places on a Genesis-powered website.

The Author Box and Entry Comments are two examples of locations that you’d find a Gravatar being displayed. Below you will see how easy it is to optimize these images for Retina display.

Before we get there, I want to show you the difference in clarity between an unoptimized Gravatar and an optimized Gravatar.

Brian Gardner Gravatar
Normal resolution
Brian Gardner Gravatar
2x resolution

The image on the left is 150px by 150px in size, and being displayed at the same dimension. The image on the right is actually 300px by 300px in size, but resized with CSS and being displayed at 150px by 150px.

If you are viewing this tutorial on a non-Retina device, you won’t be able to see the difference. I highly suggest getting one, for what it’s worth.

Retina Display and Themes

Now that you’ve seen the difference in clarity, let’s move onto putting this into practice. As I mentioned above, the Author Box and Entry Comments are two locations where Gravatars are being displayed.

Thankfully Genesis offers separate filters for you to use in order to change the output in Gravatar size for each location respectively.

Below is the code to modify the Gravatar size in the Author Box:

Below is the code to modify the Gravatar size in the Entry Comments:

I’ve chosen to output both at 96px, which you can change to whatever size you wish. In order to optimize your Gravatar for Retina display, you’ll want to use some CSS to control the size they actually display on your website.

Since we’re choosing to output the Gravatars are 96px, we want to display them at half the size. In this case, that would be 48px.

Styling the Gravatars

By default, the Gravatars have the generic .avatar class applied, so we’ll target each by looking for the container they specifically reside in.

For the Author Box, the class would be .author-box and for the Entry Comments the class would be .entry-comments.

Below is the CSS that you should add to modify the Gravatar size in the Author Box and Entry Comments of your website:

There are other CSS declarations that you might want to add to style your Gravatars, such as 50% border radius for circles, but the code above shows how to control the height and the width of them.

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.