Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
recap of 6177 (written at the end of February 2021, last updated 2021-08-30

The issue - https://github.com/WordPress/gutenberg/issues/6177 is overwhelming and has sort of stagnated.

Since being the issue was written in April 2018, the block editor and WordPress has changed.

This here summarizes the deficiencies that remain in Gutenberg related to images mentioned in https://github.com/WordPress/gutenberg/issues/6177

At its core (pun intended), the primary issue is: larger than necessary images (by pixel size (dimensions) as well as by resolution quality) are loaded for an end user when they visit a page with images. This behavior occurs when WordPress and core theme defaults (e.g. no alignment specificed, default image size created) are used. This is applicable for both core gallery block and the image block. Although PR 25940 improves the image and gallery block experience (and I thank everyone who's contributed to that), the core issues below will still be applicable after that PR is merged. (PR 25940 decreases code duplication and increases consistency between the gallery block and the image block).

original issue discussing this: https://github.com/WordPress/gutenberg/issues/5674)

this is also recapped in https://github.com/WordPress/gutenberg/issues/20778 and https://core.trac.wordpress.org/ticket/49966

To reproduce:

  1. change browser's screen size to ipad (768x1024)
  2. add image block
  3. Upload an image whose dimensions are at least 3000x3000px (assuming you do not have a hidpi aka retina monitor)

You can use this image - (ref: https://cplorg.contentdm.oclc.org/digital/collection/p4014coll10/id/433; license is CC BY-SA; download it as a full-size image (ref: https://cplorg.contentdm.oclc.org/digital/collection/p4014coll10/id/434; license is CC BY-SA; download this other full image

  1. change the image size to large.
  2. publish
  3. view page
  4. open browser's (control+shift+e for firefox, control+Shift+i for chrome, then go to the network tab)
  5. press reload/refresh

What happens: When viewing the image in the inspector > network tab, the image's width is more than the responsive screen size and is unnecessarily large. Although it is resized to appear smaller using HTML, a smaller image (with a lower file size) could be loaded without distorting the image's Ratio or decreasing the perceived quality of the image.

If you follow the directions above (and used the theme twentywenty) and the example image specified above, the following images would be created:

p4014coll10-433-full-1024x762.jpg

p4014coll10-433-full-1200x893.jpg

p4014coll10-433-full-150x150.jpg

p4014coll10-433-full-1536x1143.jpg

p4014coll10-433-full-1980x1473.jpg

p4014coll10-433-full-2048x1524.jpg

p4014coll10-433-full-300x223.jpg

p4014coll10-433-full-768x571.jpg

p4014coll10-433-full.jpg

p4014coll10-433-full-scaled.jpg

(The scaled file name is from https://make.wordpress.org/core/2019/10/09/introducing-handling-of-big-images-in-wordpress-5-3/ and this filter is enabled by default)

Similar issues that address this:

For example, we have a 300px wide sidebar where we output an image. The sidebar is never larger than 300px, and even is that size in our responsive site on mobile. The srcset outputs a 150px, 200px, 300px, 600px, 768px and 1240px, based on the sizes registered in our installation and the built-in ones. Logisitically, all that is really needed for this layout is 300px and probably the 600px version. We have all sorts of examples like this where the srcset includes either smaller or larger sizes than are physically possible in a given layout. from https://core.trac.wordpress.org/ticket/40469

(the goal being that when someone uploads a 9MB 10000x10000 pixel and even if they select 'full image' in the image block; that 9MB image is not loaded but one that is the dimensions of 10000x10000px and has an 'optimal' level of compression applied that decreases the file size)

https://github.com/WordPress/gutenberg/issues/6177#issuecomment-442681998 test cases from mort

Additional issues linked in the repository:

https://github.com/WordPress/gutenberg/issues/11529

https://github.com/WordPress/gutenberg/issues/21836

https://github.com/WordPress/gutenberg/issues/26121

https://github.com/WordPress/gutenberg/issues/4505

https://core.trac.wordpress.org/ticket/45407

https://github.com/WordPress/gutenberg/issues/15091

Additional comments:

https://github.com/WordPress/gutenberg/issues/6177#issuecomment-434866356

https://github.com/WordPress/gutenberg/issues/6177#issuecomment-435017363

https://github.com/WordPress/gutenberg/issues/6177#issuecomment-574732541

https://github.com/WordPress/gutenberg/issues/6177#issuecomment-442953527

from the media meeting (2021-02-18): It sounds like, at root, we need mechanisms for defining an image’s context better, so we can select the right size. Having a clear map for steps and goals would probably help - just need to identify a set of discrete stages that can be worked on.- Joe Dolson

From discussion at that meeting, https://core.trac.wordpress.org/ticket/45407 was a good place to start for the next step.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment