Skip to content

Instantly share code, notes, and snippets.

@skorasaurus
Last active April 20, 2024 20:44
Show Gist options
  • Save skorasaurus/a01249d4302226bf12c80dd979322303 to your computer and use it in GitHub Desktop.
Save skorasaurus/a01249d4302226bf12c80dd979322303 to your computer and use it in GitHub Desktop.
recap of Issue 6177. This document was first written in February 2021, last updated 2023-10-08)

The issue - WordPress/gutenberg#6177 is one of the most discussed issues in the Gutenberg project but its discussion is overwhelming and progress has stagnated.

Since the issue was first written in April 2018, the block editor and WordPress have changed and improved but many improvements to improve displaying images remain.

This document summarizes the remaining deficiencies of image loading mentioned in WordPress/gutenberg#6177

At its core (pun intended), the primary issue is: larger than necessary images (by pixel size (dimensions)) and as well as higher resolution than necessary, are loaded for an end user when they visit a page with images.

This behavior occurs when WordPress' and a theme's usual defaults (e.g. no alignment specificed, default image size created) are used.

This issue is applicable for the gallery block and the image block. Although PR 25940 improved the image and gallery block experience (and I thank everyone who's contributed to that), the core issues are still applicable after that PR was merged. (PR 25940 decreases code duplication and increases consistency between the gallery block and the image block).

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 Bridges and Concrete and Steel as test cases. Download Concrete and Steel in its full resolution. Download Bridges in its full resolution. Both images are by Sheffield Harold Kagy and have a CC BY-SA license.

  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 greater than the responsive screen size and is unnecessarily large. Although the image is resized to appear smaller using HTML, an image with lower dimensions (with a lower file size) can 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 twentytwenty theme) 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 was introduced in WordPress 5.3 and is enabled by default in WordPress).

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#comment:description

(the goal is 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)

WordPress/gutenberg#6177 (comment) test cases from mort

Additional related issues not already mentioned:

WordPress/gutenberg#11529

WordPress/gutenberg#21836

WordPress/gutenberg#26121

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

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

Additional comments:

WordPress/gutenberg#6177 (comment)

WordPress/gutenberg#6177 (comment)

WordPress/gutenberg#6177 (comment)

WordPress/gutenberg#6177 (comment)

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