id summary reporter owner description type status priority milestone component version severity resolution keywords cc focuses 45406 Add additional default image sizes for srcset to accommodate wider viewports mor10 joemcgill "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." defect (bug) assigned normal Future Release Media 5.0 major