[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   |
------------------------------+---------------------

Comment (by jonoaldersonwp):

 Ah, interesting!
 We can do something similar here, I think, and just move the background
 into an `<img>` el in the existing structure.

 - Remove the inline `<style>` tag (which sets the image as the background
 of `#plugin-information-title.with-banner`).
 - Add CSS targeting `.vignette > img` to set `min-width: 100%; object-fit:
 cover; object-position: top center;`.
 - Add an `<img>` inside `.vignette`, using the markup below.

 == Image markup

 `<img decoding="async" fetchpriority="high" src="%path-to-image%"
 width="755" height="250">`

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

 `<img decoding="async" fetchpriority="high" srcset="%path-to-2x-image% 2x"
 src="%path-to-image%" width="755" height="250">`

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