Blurry Gravatar Image on my website?

Question

Okay so I have been trying to style my users Gravatar image. The problem is, the image becomes so blurry when I try to enlarge it even when the photo I uploaded on the test account is really at high res. I have seen gravatars on other sites that are about H:200px W:200px and the resolution of the photo is perfect. Now I think I may have tried to resize the photo in the incorrect way

<img class="img-circle" height="200px" width="200px" src="<?php echo $profile->get_gravatar($profile->getField('email'), false, 54); ?>"/>

I added the height and the width right after the img class="img-circle" which I believe is probably incorrect? Here is also images of what it looks like, and what it should look like.

Correct (coming from photoshop)

Incorrect and blurry ( live from site). Notice the server distortion.

I guess what I need is to tell the CSS to pull the original size of the photo from Gravatar and display it at its regular resolution because just adding the width and size directly to the tag will just blow it up on the site. Any ideas on how to fix this?

Answer 1

When you get the Gravatar image URL, you tell the server what resolution to fetch. Right now you are asking for a 54x54 pixel image:

<?php echo $profile->get_gravatar($profile->getField('email'), false, 54); ?>

Change that last number to 200 (to match the size you want to display) and you should be fine.