Theme preview images are loaded inefficiently.

[jonoaldersonwp]

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.

[diddledani]

Replace theme preview img tag with picture element with appropriate intermediate sizes for differing screens

[jonoaldersonwp]

Great patching!
Apologies, though, I made a mistake in the sizes markup. I've corrected it below (removing the full size on the fallback)!

<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}}" srcset="{{image-2x}} 2x" alt="{{ALT}}">
</picture>

[diddledani]

It looks like I made a mistake in the diff, anyway, so I'm rolling both your fix and repairing my mistake into the next attachment...

[diddledani]

Re-roll to fix a mistake and ensure the fallback url is correct

[jonoaldersonwp]

Nice one!

[dingo_d]

It would be great if somebody could test this patch :)

[coffee2code]

In 9706:

Theme Directory: Load a more efficiently sized theme screenshot on theme permalink pages based on viewport size.

Props diddledan, jonoaldersonwp.
Fixes #4214.

[coffee2code]

FYI, committed differences from 4214.1.diff​:

• Patch had the base image size as 576px (and 1152px for 2x). These seem like they should have been 572px and 1144px respectively.
• Incorporated loading="lazy" since added for #5062.