Displaying Gravatars on Retina Screens

One thing that’s been bothering me for the last couple of months is how fuzzy and awful the avatars in the comments section of this site looked on my iPad.

Last week I fixed that. It’s pretty easy.

In the WordPress comments.php file, use this snippet to display the avatar:

<?php echo get_avatar( $comment, $size = '120' ); ?>

The number after $size = should be double the height/width in pixels that you’d like to use. On my site, avatars are 60 pixels. This code tells WordPress to display a 120 pixel by 120 pixel square image.

Then in my stylesheet, I add this bit of code:

.avatar {
    height: 60px;
    width: 60px;
}

WordPress automatically adds the .avatar class to the image it displays using get_avatar. This snippet of CSS tells WordPress to display that 120 pixel by 120 pixel image at 60 pixels by 60 pixels.

When retina displays expand the image, it will be pixel dense enough to retain it’s sharpness.