Just checked the Recent Visitors list, and this is what the uploaded avatar looks like, the size of the avatar is smaller than the anonymous avatars.

https://imgur.com/NFMIZNR

Does this give a clue of what is going on here?

Regards
Carsten

Hi there, I’m using this snippet to use different default avatar based on BuddyPress Member Types.

The image size was set to 300×300 so maybe this was causing the issue?

I changed the avatar sizes to 50×50 so now they are all blurry. What can I do about that?

https://imgur.com/b3lHV9e

Regards
Carsten

//Using different default avatar based on BuddyPress Member Types

 function buddydev_set_default_use_avatar_based_on_member_type( $avatar, $params) {
    $user_id = $params['item_id'];
 
    $type = bp_get_member_type( $user_id );
 
    if ( $type == 'man' ) {
        $avatar = 'https://domain/wp-content/uploads/2021/08/Avatar-man-50x50-1-e1679832244590.jpeg';
    } elseif( $type =='woman' ) {
        $avatar = 'https://domain/wp-content/uploads/2021/08/Avatar-woman50x50-1-e1679831984556.jpeg';
    } else {
        $avatar = 'https://domain/wp-content/uploads/2022/08/mystery-man.jpeg';//get_template_directory_uri() . '/assets/images/unknown.png';
    }
 
    return $avatar;
}
 
add_filter( 'bp_core_default_avatar_user', 'buddydev_set_default_use_avatar_based_on_member_type', 10, 2 );  

Hi Brajesh, thanks for in detail pointing at where the issue is in my custom css file.
I’t strange, because I tested the issue with another theme, bypassing my custom css, but it was still blurred. It might have been a caching issue.

The images is still not as sharp as when they are in the cropping tool, but I guess this is befor the 50×50 px compression. When the avatar then is enlarged like in this mobile view, it gets a little blurred.

https://imgur.com/9HqXuoL

For having the avatar full size on mobile, covering the cover image and the whole item header, I’m using this css code:

@media (max-width: 768px)
#item-header-cover-image #item-header-avatar img {
    width: 450px;
    padding-top: 20px;
}

Does this code setting the width to 450px, effect the sharpness as well, as the css you pointet out?

If yes, how do I achieve an avatar in full width on mobile without blurring?

Should I be using the snippet from here

https://buddydev.com/changing-default-avatar-size-croppedused-by-buddypress/

Setting the BP_AVATAR_FULL_WIDTH’, to 450px?

Is that how I should understand the use of this snippet?

Regards
Carsten