Optimize Your 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.

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. Carl Hancock says

    It makes a difference even on a non-retina display. Here’s a screenshot on my non-retina MacBook Air:

    http://d.pr/i/xm2O

    You’ll notice the one on the left Brian’s cheek line is a little bit jaggy and the one on the right the same cheek line is smoother.

    So it has benefits for retina displays while also making images smoother on non-retina displays.

    • says

      I figured that there’d be some difference on a non-Retina Display, but the clarity on Retina is off the charts. The best way to explain it is the experience you have watching a sporting event on non-HD vs. HDTV.

      • Carl Hancock says

        Yep. The same difference exists between 4K and HDTV. I saw true 4K footage on my Dad’s new 4K television last weekend and was blown away. I discounted it thinking you wouldn’t be able to visually see a difference vs. HDTV. I was completely wrong.

  2. says

    Even with no image compression, there is a difference for anyone viewing the image with image zooming on, which is quite a few people. I have a 14″ 1920×1080 screen, so I regularly zoom in just to boost the size to a more reasonable level, and those higher res. images sure do look a lot better then.

    On the flip side, it balloons your download size :/

    • says

      On the flip side, it balloons your download size :/

      I don’t know if “balloons” is quite accurate — “increase” may be a better word. The difference in file size between a 96px and a 48px version of my Gravatar is 2kb. Even a page with 100 comments means that you’re only loading an additional 200kb.

Leave a Reply

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