[wp-meta] [Making WordPress.org] #5638: Improve homepage screenshots markup

[Making WordPress.org]

#5638: Improve homepage screenshots markup
----------------------------+-----------------------------
 Reporter:  jonoaldersonwp  |      Owner:  (none)
     Type:  enhancement     |     Status:  new
 Priority:  normal          |  Milestone:
Component:  General         |   Keywords:  seo performance
----------------------------+-----------------------------
 The HTML markup used to display the admin dashboards screenshots on the
 wp.org homepage(s) - in the `.screenshots` section, should be improved for
 performance, accessibility, and SEO reasons.

 {{{
 <div class="screenshots">
   <img class="dashboard" width="800" height="452"
 src="https://i1.wp.com/s.w.org/images/home/screen-themes.png?w=800"
 srcset="https://i1.wp.com/s.w.org/images/home/screen-themes.png?w=1600 2x"
 loading="lazy" alt="A WordPress admin interface, on a desktop device" />
   <img class="dashboard-mobile" width="200" height="421"
 src="https://i1.wp.com/s.w.org/images/home/mobile-themes.png?w=200"
 srcset="https://i1.wp.com/s.w.org/images/home/mobile-themes.png?w=400 2x"
 loading="lazy" alt="A WordPress admin interface, on a mobile device" />
 </div>
 }}}

 Note that:
 - These changes shouldn't affect layout at all.
 - I've butchered the i1.wp.com CDN format in order to make use of on-
 demand resizing via the `w` parameter. If there's a cleaner way of doing
 this, by all means update the markup.
 - The mobile image is only available up to `385px`, but should be
 displayed at `400px` on `2x` displays. Do we have / can we get or make a
 higher resolution flavour of this image available?

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/5638>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org