Improve author avatar resolution and fix a11y issues in legacy theme#7492
Conversation
|
Plugin builds for 28bdcc3 are ready 🛎️!
|
|
The Default size of gravatar is 96 if we go with default settings it will slightly increase the size of the image and the response time.
Some images recommend different sizes like 48, also not sure how it will behave with low res images, in my findings using size 36 on the anonymous image also worked for me. |
|
Lighthouse on Chrome 111 displays a failed audit for the gravatar size below 48, although PageSpeed Insights and Lighthouse 10 do not provide the same results and pass the audits with a size of 36. So I think we can keep the default size as 36 in legacy themes? Or we can keep it 48, exactly double of height/width we have specified for Gravatars. |
| <div class="amp-wp-meta amp-wp-byline"> | ||
| <?php if ( function_exists( 'get_avatar_url' ) ) : ?> | ||
| <amp-img src="<?php echo esc_url( get_avatar_url( $post_author->user_email, [ 'size' => 24 ] ) ); ?>" alt="<?php echo esc_attr( $post_author->display_name ); ?>" width="24" height="24" layout="fixed"></amp-img> | ||
| <amp-img src="<?php echo esc_url( get_avatar_url( $post_author->user_email ) ); ?>" alt="<?php echo esc_attr( $post_author->display_name ); ?>" width="24" height="24" layout="fixed"></amp-img> |
There was a problem hiding this comment.
I suppose it is overkill to add srcset to pick the right resolution?
There was a problem hiding this comment.
Indeed, I believe. Here browser needs an image with the proper resolution for the specified "24x24" size ratio which is going to be same on all devices.
There was a problem hiding this comment.
WordPress core isn't adding srcset so probably not.
There was a problem hiding this comment.
But why 96? If we're targeting 3x pixel density, then shouldn't it be 72 (3*24)?
Indeed, I believe. Here browser needs an image with the proper resolution for the specified "24x24" size ratio which is going to be same on all devices.
I don't think that's right, as some devices have 3x pixel density (e.g. "Retina") others have 2x density, and others have 1x.
There was a problem hiding this comment.
For example:
<img src="flower.jpg"
srcset="flower-1x.jpg 1x,
flower-2x.jpg 2x,
flower-3x.jpg 3x">There was a problem hiding this comment.
So I think the very best here would be something like:
<amp-img
src="<?php echo esc_url( get_avatar_url( $post_author->user_email, [ 'size' => 72 ] ) ); ?>"
srcset="
<?php echo esc_url( get_avatar_url( $post_author->user_email, [ 'size' => 24 ] ) ); ?> 1x,
<?php echo esc_url( get_avatar_url( $post_author->user_email, [ 'size' => 48 ] ) ); ?> 2x,
<?php echo esc_url( get_avatar_url( $post_author->user_email, [ 'size' => 72 ] ) ); ?> 3x
"
alt="<?php echo esc_attr( $post_author->display_name ); ?>" width="24" height="24" layout="fixed"
></amp-img>There was a problem hiding this comment.
Thanks for the link. Density descriptors were unknown to me.
There was a problem hiding this comment.
I guess I didn't share the best link. Here's a better more general one: https://web.dev/learn/design/responsive-images/#pixel-density-descriptor
|
@milindmore22 How are these changes now looking for you, re: #7492 (comment) ? |
westonruter
changed the title
westonruter
changed the title
|
This is a good approach, works as expected |
westonruter
added
the
Changelogged
3 participants
Summary
#0a89c0to#0A5F85for better a11y.Fixes #7491
Checklist