[wp-trac] [WordPress Trac] #45406: Add additional default image sizes for srcset to accommodate wider viewports

[WordPress Trac]

#45406: Add additional default image sizes for srcset to accommodate wider
viewports
--------------------------+-----------------------------
 Reporter:  mor10         |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Media         |    Version:  5.0
 Severity:  major         |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 Related Gutenberg issues:
 - 6177 https://github.com/WordPress/gutenberg/issues/6177
 - 6131 https://github.com/WordPress/gutenberg/issues/6131
 - 11973 (PR) https://github.com/WordPress/gutenberg/pull/11973

 Duplicate of Gutenberg issue 11821
 https://github.com/WordPress/gutenberg/issues/11821.

 == Problem
 Images aligned to `alignwide` and `alignfull` need proper size options
 from the `srcset` attribute. Currently the sizes generated for a large
 image (eg 4000px wide) by core are:

 - original
 - 300px
 - 768px
 - 1024px

 (Themes and plugins can generate additional sizes.)

 This means for image displays wider than 1024px, the original size image
 file will be used which imposes a significant performance hit on the end-
 user.

 These sizes should be closely tied to real-world data about viewport
 widths. Currently the only readily available data is screen sizes. One
 source is StatCounter's worldwide screen resolution stats
 http://gs.statcounter.com/screen-resolution-stats. They break down as
 follows (October 2018):

 ||= Screen size =||= Usage percentage =||
 || 360x640 || 20.04% ||
 || 1366x768 || 11.84% ||
 || 1920x1080 || 9.4% ||
 || 375x667 || 5.07% ||
 || 1440x900 || 3.26% ||
 || 768x1024 || 2.61% ||


 == Proposal
 Align automatically generated image sizes to browser stats taking into
 account 2x and 3x displays.

 Proposed new sizing array:

 - 375px (covers <=375px widths)
 - 768px (covers 768px and 375x2 widths)
 - 1125px (covers <=1125px and 375x3 widths)
 - 1440px (covers <=1440 widths)
 - 1920px
 - 2304px (covers <=2304px and 768x3 widths)
 - 2880px (covers <=2880px and 1440x2 widths)
 - 3840px (covers 1920x2 widths)

 This might seem like a lot, but for most images only the smaller sizes
 will be generated. For larger images, providing these additional sizes
 available for the `srcset` attribute will ensure the browser pulls down
 the smallest possible image for wide images displayed in wider viewports.

 == Note
 This permanently disassociates the physical image sizes from the classic
 display widths defined by WordPress. Which makes sense because the old
 modality of pixel widths defining small/medium/large image sizes no longer
 applies anyway.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/45406>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform