Archived topic
Gravatar Blurry on Desktop
1 reply · Started by Kevin Wabiszewski on July 21, 2021
Hello, I noticed that my gravatar image is blurry on desktop but looks great on mobile. Do you have any idea what could be causing this?
Example page: https://www.marineapproved.com/reverse-tanto-blades/
Thanks for your time.
Hi there,
it looks ok to me :) But then my eyes are old lol.
First off the avatar image size being requested is 96px ( the default size ). And its currently being displayed at 45px.
So we have a couple of options:
1. Adjust the CSS for sizing the image from:
.single-post .entry-meta .meta-gravatar img {
width: 45px;
border-radius: 50%;
}
to:
.single-post .entry-meta .meta-gravatar img {
width: 48px;
border-radius: 50%;
}
This little adjustment means we have an even split of pixels ( 48 into 96 ) when its resized. This can improve the sharpness as we have no stray pixels to be cut away.
And/OR we can increase the size of the original avatar image.
Referring back to this topic, where we provided the code for the Post Meta:
https://generatepress.com/forums/topic/styling-gravitar-date-author/#post-819566
You will see this line, which makes the request for the Avatar image:
get_avatar( get_the_author_meta( 'ID' ) )
We can change it to this:
get_avatar( get_the_author_meta( 'ID' ), 135 )
The 135 is the size in pixels of the image to be loaded ( it defaults at 96px ) - by increasing that number you can request a higher resolution image. Note it does come at a cost of the image file size being slightly larger. But more pixels should improve quality and again; the size set here is best as an exact multiple of the width value in your CSS.