[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  |   Keywords:  performance seo
------------------------------+-----------------------------
 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 attributes from `.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>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org