WordPress.org

Making WordPress.org

Opened 3 months ago

#4214 new defect

Theme preview images are loaded inefficiently.

Reported by: jonoaldersonwp Owned by:
Milestone: Priority: lowest
Component: Theme Directory Keywords: seo speed/performance
Cc:

Description

See, e.g., https://wordpress.org/themes/twentynineteen/.

The largest size the theme preview image is displayed at is ~700px, but is loaded via a query parameter (?w=) which loads at 1142px.

This causes unnecessary load, and, browser jank.

My suspicion is that this particular value has been chosen to account for retina displays. Regardless, we should adapt the code as follows to solve for all cases (using the w param to generate/request each size):

<picture>
  <source media="(min-width: 782px)" srcset="{{image}}, {{image-2x}} 2x">
  <source media="(min-width: 481px) and (max-width: 782px)" srcset="{{image-large}}, {{image-large-2x}} 2x">
  <source media="(min-width: 401px) and (max-width: 480px)" srcset="{{image-medium}}, {{image-medium-2x}} 2x">
  <source media="(max-width: 400px)" srcset="{{image-small}}, {{image-small-2x}} 2x">
  <img src="{{image-full}}" srcset="{{image-full-2x}} 2x" alt="{{ALT}}">
</picture>

Note on size choices
The image scales fluidly from min to max size, so I've chosen some somewhat-arbitrary breakpoints which align with existing breaking behaviour on the page (on the assumption that these are sensible transition points), and selected the largest size of the image in that range.

With that in mind:

  • The base w value of {{image}} should be 572.
  • {{image-large}} should be 700.
  • {{image-medium}} should be 420.
  • {{image-small}} should be 344.
  • {{image-full}} should be 1200.

All 2x versions should set twice the w value as their equivalent image.

Note on retina images
1200 appears to be the maximum valid value, so the size of {{image-full}} and {{image-full-2x}} will be the same. At some point in the future, we should review this limitation, but this isn't necessary for V1.

Change History (0)

Note: See TracTickets for help on using tickets.