Improve author avatar resolution and fix a11y issues in legacy theme

[thelovekesh]

Summary

• Update gravatar image resolution to use the default size(96).
• Update default header color from #0a89c0 to #0A5F85 for better a11y.

Fixes #7491

Checklist

• My code is tested and passes existing tests.
• My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

[github-actions]

Plugin builds for 28bdcc3 are ready 🛎️!

• Download development build
• Download production build

[milindmore22]

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.

Image Size	36	96(default)
Size (kB)	2.7kB	12.9kB
Response time	7ms	27ms

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.

[thelovekesh]

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.

[westonruter]

I suppose it is overkill to add srcset to pick the right resolution?

[thelovekesh]

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.

[westonruter]

WordPress core isn't adding srcset so probably not.

[westonruter]

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.

[westonruter]

For example:

<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

cf. https://web.dev/codelab-density-descriptors/

[westonruter]

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>

[thelovekesh]

https://web.dev/codelab-density-descriptors/

Thanks for the link. Density descriptors were unknown to me.

[westonruter]

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

[westonruter]

@milindmore22 How are these changes now looking for you, re: #7492 (comment) ?

[milindmore22]

This is a good approach, works as expected