[wp-meta] [Making WordPress.org] #6617: Replace plugin page banner markup

[Making WordPress.org]

#6617: Replace plugin page banner markup
------------------------------+---------------------
 Reporter:  jonoaldersonwp    |       Owner:  (none)
     Type:  enhancement       |      Status:  new
 Priority:  low               |   Milestone:
Component:  Plugin Directory  |  Resolution:
 Keywords:  performance seo   |
------------------------------+---------------------
Description changed by jonoaldersonwp:

Old description:

> The hero banner image on plugin pages uses suboptimal markup, which has a
> negative impact on performance and SEO. The following minor changes
> should significantly benefit end-users.
>
> - Remove the inline `<style>` tag (which sets the image as the background
> of the banner container).
> - Remove all styling applies to `.plugin-banner`, except for the existing
> margin attribute(s).
> - Add CSS targeting `.plugin-banner img` to set `object-fit: cover;
> width: 100%;`
> - Add an `<img>` inside `.plugin-banner`, using the markup below.
>

> ==  Image markup
> `<img decoding="async" fetchpriority="high" src="https://ps.w.org
> /wordpress-seo/assets/banner-772x250.png?rev=2643727" width="930"
> height="304">`
>
> When a `1544x500` version is available, add a `srcset` attribute, to
> produce a result as follows:
>
> `<img decoding="async" fetchpriority="high" srcset="https://ps.w.org
> /wordpress-seo/assets/banner-1544x500.png?rev=2643727 2x"
> src="https://ps.w.org/wordpress-seo/assets/banner-
> 772x250.png?rev=2643727" width="930" height="304">`

New description:

 The hero banner image on plugin pages uses suboptimal markup, which has a
 negative impact on performance and SEO. The following minor changes should
 significantly benefit end-users.

 - Remove the inline `<style>` tag (which sets the image as the background
 of the banner container).
 - Remove all styling applied to `.plugin-banner`, except for the existing
 margin attribute(s).
 - Add CSS targeting `.plugin-banner img` to set `object-fit: cover; width:
 100%;`
 - Add an `<img>` inside `.plugin-banner`, using the markup below.


 ==  Image markup
 `<img decoding="async" fetchpriority="high" src="https://ps.w.org
 /wordpress-seo/assets/banner-772x250.png?rev=2643727" width="930"
 height="304">`

 When a `1544x500` version is available, add a `srcset` attribute, to
 produce a result as follows:

 `<img decoding="async" fetchpriority="high" srcset="https://ps.w.org
 /wordpress-seo/assets/banner-1544x500.png?rev=2643727 2x"
 src="https://ps.w.org/wordpress-seo/assets/banner-772x250.png?rev=2643727"
 width="930" height="304">`

--

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/6617#comment:2>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org