WordPress.org

Making WordPress.org

Opened 9 months ago

#5638 new enhancement

Improve homepage screenshots markup

Reported by: jonoaldersonwp Owned by:
Milestone: Priority: normal
Component: General Keywords: seo performance
Cc:

Description

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?

Change History (0)

Note: See TracTickets for help on using tickets.