[wp-meta] [Making WordPress.org] #4214: Theme preview images are loaded inefficiently.

[Making WordPress.org]

#4214: Theme preview images are loaded inefficiently.
-----------------------------+-----------------------------------
 Reporter:  jonoaldersonwp   |      Owner:  (none)
     Type:  defect           |     Status:  new
 Priority:  lowest           |  Milestone:
Component:  Theme Directory  |   Keywords:  seo speed/performance
-----------------------------+-----------------------------------
 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.

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