Blurry Avatar and Cover Images
-
The Avatar and Cover images are showing up blurry. I tried adding the below code to my functions file (via snippets plugin) and it did nothing. I need to change the quality of the images to 100% not be so blurry looking, they just look terrible (I changed nothing, just using default BuddyPress). How do I tell BuddyPress to use the full image size and just scale it down to fit the image size vs. using the thumbnail size, since typically in WordPress those images are horribly blurry.
Here’s the code I added which only alters the image sizes not QUALITY.
<?php // Define Buddypress Avatars Dimensions. if ( ! defined( 'BP_AVATAR_THUMB_WIDTH' ) ) { define( 'BP_AVATAR_THUMB_WIDTH', 50 ); } if ( ! defined( 'BP_AVATAR_THUMB_HEIGHT' ) ) { define( 'BP_AVATAR_THUMB_HEIGHT', 50 ); } if ( ! defined( 'BP_AVATAR_FULL_WIDTH' ) ) { define( 'BP_AVATAR_FULL_WIDTH', 150 ); } if ( ! defined( 'BP_AVATAR_FULL_HEIGHT' ) ) { define( 'BP_AVATAR_FULL_HEIGHT', 150 ); }
-
Hi @whyknott,
I’m a bit confused because I’m not sure what you mean by:
I need to change the quality of the images to 100%
Is this in reference to the JPG compression value? Additionally, I find this confusing, as well:
How do I tell BuddyPress to use the full image size and just scale it down to fit the image size vs. using the thumbnail size
As your code snippet indicates, there are 2 (two) image sizes (full & thumb) for Avatars and the default sizes are 50 x 50 for thumb and 150 x 150 for full, both are in pixels. So, if you wish to change the sizes, then you need to change the numeric values to something other than the default values. These are the sizes after a crop of the original image.
To help clarify some things, what is the size (width x height) of the original image that you are using to upload as an Avatar? Let’s start here and see if we can find a solution to your “quality” issue.
What I mean is, I’m uploading a perfectly crisp image that is 610×610 pixels in size and BuddyPress optimizes it and/or scales it down to fit the predefined image size, which is fine, however, in the process makes it look bad/blurry. I want the profile images to look better. Plain and simple.
I don’t want the images to be 610×610 because they are profile images but at the same time I don’t want them looking low res. I think if BuddyPress is setting them as ‘thumbnail’ size then it’s using WordPress built-in optimized image which those are typically horribly blurry.
Currently, there isn’t any updated documentation regarding Avatar’s. There is some outdated info/documentation which is missing some information and is inaccurate with other information. A goal of the BuddyPress Team (BP) is to make documentation available that is current and accurate. That stated this will be on my TODO list to release documentation regarding Avatars, although what I’m covering here would be considered a “developer” handbook chapter.
In the meantime, there are a number of CONSTANTS that define the size (Width x Height) of various aspects of an Avatar, some of which you already know. There are other parameters that specify the “quality” during a resize and/or cropping process and these processes utilize WordPress to accomplish these tasks.
For example the CONSTANT – BP_AVATAR_ORIGINAL_MAX_WIDTH – default set to 450 – triggers a resize of an uploaded image that exceeds the size defined by this CONSTANT at a “quality” level of 90 (default). In your case, the 610 x 610 image is resized to 450 x 450 at a “quality” level of 90. Assuming defaults for thumb (50) and full (150) the image (450 x 450 @ 90) is cropped based on the cropping boundary box to the sizes for thumb and full at a “quality” level of 82 (default). In this example, your 610 x 610 image has undergone 2 processes that has reduced the “quality” twice.
To mitigate the degradation process, you could set BP_AVATAR_ORIGINAL_MAX_WIDTH equal to or greater than 610. The point being this would be the max width size before triggering a resize. This now leaves the cropping process at a “quality” level of 82, of which, you could mitigate by setting the JPEG “quality” level to something greater than 82 (max would be 100), assuming that you are uploading a jpg/jpeg image. This is defined at the following URL:
I’ll assume you know how to create a filter with a callback to return the desired “quality” level. Whether what I’ve outlined will satisfy your requirements for not being “horribly blurry” is yet to be determined because there may be another reason for “horribly blurry” and this just represents another “process of elimination” step/stage.
This is what I came up with and I think it worked to fix the Avatar quality, however, it won’t impact the Profile images for Groups and Group cover photos. Can you point me in the correct direction for the Constants that work with those two?
Here’s my code:
// Set the BP_AVATAR_ORIGINAL_MAX_WIDTH to a higher value if ( ! defined( 'BP_AVATAR_ORIGINAL_MAX_WIDTH' ) ) { define( 'BP_AVATAR_ORIGINAL_MAX_WIDTH', 1024 ); // Set to match your largest expected upload size } // Adjust the quality of the avatar resizing process function custom_bp_avatar_quality( $args ) { $args['quality'] = 100; // Set to the highest quality return $args; } add_filter( 'bp_core_avatar_resize_args', 'custom_bp_avatar_quality' ); add_filter( 'bp_core_avatar_thumb_resize_args', 'custom_bp_avatar_quality' ); add_filter( 'bp_core_group_avatar_resize_args', 'custom_bp_avatar_quality' ); add_filter( 'bp_core_group_avatar_thumb_resize_args', 'custom_bp_avatar_quality' ); // Adjust JPEG quality for all images in WordPress add_filter( 'jpeg_quality', function() { return 100; // Set to the highest quality }); // Ensure high-resolution images are used in the HTML output function custom_bp_use_full_size_avatar( $html, $params ) { if ( isset( $params['object'] ) && in_array( $params['object'], array( 'user', 'group' ) ) ) { // Get the full-size avatar URL $full_avatar_url = bp_core_fetch_avatar( array( 'item_id' => $params['item_id'], 'object' => $params['object'], 'type' => 'full', 'html' => false, )); // Construct the new img tag with the full-size avatar URL $html = sprintf( '<img src="%s" class="%s" alt="%s" width="%d" height="%d"/>', esc_url( $full_avatar_url ), esc_attr( $params['class'] ), esc_attr( $params['alt'] ), (int) $params['width'], (int) $params['height'] ); } return $html; } add_filter( 'bp_core_fetch_avatar', 'custom_bp_use_full_size_avatar', 10, 2 ); // Add custom CSS to scale down the avatars function custom_bp_add_avatar_css() { $custom_css = " .avatar, .group-avatar img { width: 150px; height: 150px; object-fit: cover; /* Ensures the image covers the element's entire area */ } "; wp_add_inline_style( 'bp-parent-css', $custom_css ); // Adjust 'bp-parent-css' to match your theme's main stylesheet handle if necessary } add_action( 'wp_enqueue_scripts', 'custom_bp_add_avatar_css' );@why not advertising,
That’s great!
My users always complain about the avatar pixelation.
Hope this fixes it.Question: Will this fix the quality of already uploaded profile pics?
Or only for new uploads?
I hope it’s the former or else I can’t use it. My site has 20000 members.@thinlizzie No, I didn’t want to include that in the scripting because you can use the regenerate thumbnails plugin for that. Here’s one: https://wordpress.org/plugins/force-regenerate-thumbnails/ You can try that plugin on a few images from the media library first and then run it for your whole site if you find it to be successful. Just use caution.
Thanks, will test in my staging environment.
Just to confirm, this is the correct sequence:
– add your code snippet
– activate Regenerate Thumbnails plugin
– test on a few sample Media images
– test on all (staging) imagesCorrect?
Correct, I’m still working on adjusting that php code as it doesn’t seem to be impacting the Group Profile images and for me as I’m pretty picky, it doesn’t seem to be keeping the images at 100% quality as of yet. Go ahead and try it in your environment but please use caution. If you use the snippets plugin you can use the following line to put Snippets plugin into safe mode to get back into your site if it throws a fatal error.
define(‘CODE_SNIPPETS_SAFE_MODE’, true);
It get’s pasted just before this line in wp-config.php….
/* That’s all, stop editing! Happy publishing. */
Then once you gain access back to the admin you can change it to false like this…
define(‘CODE_SNIPPETS_SAFE_MODE’, false);
Just in case, during development it comes in handy.
@whyknott @thinlizzie avatar and cover images are not included as media attachments; the thumbnail generator plugins will not affect them. Avatar and cover image cropping are done when uploaded; any custom script will work only for new uploads.
@vapvarun I’m not recognizing any of the filters containing
resize_argsfrom the posted code snippet, do they ring a bell with you? Also, I think there is some misunderstanding about Avatars and Cover Images, i.e., the process thereof. I’m also thinking instead of all this coding requirement for end users, maybe a configuration screen would help facilitate the setting of the various parameters.Furthermore, we (BP Team) should revisit this process because it is not possible to regenerate the Avatars or Cover Images because, I believe, the original images are deleted. Thoughts?
@whyknott There are no CONSTANTS specific to Group Avatars; meaning an Avatar is an Avatar, regardless if it is used as a User Avatar or a Group Avatar, they just reside in different directories/folders. Additionally, there are 11 CONSTANTS that are associated with Avatar (if my count is accurate), you may find them in a list, along with other BP related CONSTANTS at the following URL:As to setting the “quality” level for when a resize is triggered, I’ll have to get back to you after I confirm that the filter you should be using for resize ‘quality’, does what it should. However, I need to build a tool to grab the resized image before it gets deleted, so that I can verify the ‘quality” level.
@vapvarun , thanks for the info.
I always wondered where the bp avatars were saved.
They clearly are not in the Media gallery.
Anyway, not important.So, as things stand, it seems impossible to improve the quality of previously uploaded profile pictures because the original hi-res image gets discarded after upload, leaving behind only the lo-res avatar?
I suppose I shall simply wait to see if any changes get implemented.
Thanks guys for considering this matter.
And thanks to @whyknott for his work so far.
@emaralive @vapvarun thank you for the information, I can try editing and looking into other solutions when I get a chance but this one seems like a warranted challenge for the BuddyPress Programming team.
@thinlizzie it might be a waste of time at this point until the code is revised to take into account other CONSTANTS and the issue with high resolution avatars, cover photos and group profile photos getting discarded after upload. On one hand, that is nice to save server resources, but on the other hand, it’s frustrating because the images look lousy. It cheapens the look of BuddyPress to be honest.The BuddyPress also needs more design customization options especially the social feed, it’s convenient to have it generate the “Social Feed” page automatically but that is causing me trouble. I’d love to be able to put that Social Feed as a WordPress Widget or in a shortcode to embed on any page template I want. This way, I can customize the background, add a custom title or whatever else I want. BuddyPress has a lot of Widgets available but I want the Social Feed as well with customization options.
@whyknott I would have posted this sooner, but I was looking into the relationship between the
BP_AVATAR_ORIGINAL_MAX_WIDTHCONSTANT and cropping preview area, which requires a deeper dig into this process. Neither here nor there, as previously mentioned, I don’t recognize any of the filters that end in ‘_resize_args’ and AFAIK, there are technically 2 (two) but the one I used has the hook name of:bp_after_attachment_avatar_edit_image_parse_argsTo elaborate further, there is a
bp_before_..._parse_argsand abp_after_..._parse_args, FWIW. Moving along, yourcustom_bp_avatar_qualitycallback function should work with this hook, IOW use the following to set the resize quality for Avatar:add_filter( 'bp_after_attachment_avatar_edit_image_parse_args', 'custom_bp_avatar_quality' );This should remove any questions or concerns about the jpg/jpeg compression level, i.e., “quality”. assuming that a value of 100 is used for resize and crop. If the Avatar is still “horribly blurry” or utilizing your new term “lousy” then the issue resides elsewhere, e.g., scaling/zooming the Avatar to something greater than 100%. Since I don’t know your scenario/situation, I’ll stop at this point.
- You must be logged in to reply to this topic.
