Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add additional default image sizes for srcset to accommodate wider viewports #11821

Open
mor10 opened this Issue Nov 13, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@mor10
Copy link
Contributor

mor10 commented Nov 13, 2018

Related to #6177 and #6131. Filed as separate issue because #6177 is getting too big.

Problem

Images aligned to wide will need proper size options from the srcset attribute. Currently the sizes generated for a large image (eg 4000px wide) are:

  • original
  • 300px
  • 768px
  • 1024px
  • 1568px

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. 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)
  • 1568px (covers <=1568px and 768x2 widths)
  • 1920px
  • 2304px (covers <=2304px and 768x3 widths)
  • 3380px (covers 1568x2 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.

@mor10

This comment has been minimized.

Copy link
Contributor Author

mor10 commented Nov 23, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.