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:
- change browser's screen size to ipad (768x1024)
- add image block
- 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.
- change the image size to large.
- publish
- view page
- open browser's (control+shift+e for firefox, control+Shift+i for chrome, then go to the network tab)
- 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).
-
Replace static with Dynamic Image Sizes for inserted images https://core.trac.wordpress.org/ticket/35094
-
How to remove full size image path from srcset and more intelligent choices in srcset candidate list https://core.trac.wordpress.org/ticket/40469
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
- Optimize full size images (covered in https://core.trac.wordpress.org/ticket/37840 and WordPress/gutenberg#11822
(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)
-
Allow theme to control the sizes attribute based on alignment WordPress/gutenberg#6131 (2021-06-16 Update: Issue 6131 has been fixed and this document needs to be updated in relation to 6131)
-
larger images than necessary are being loaded in the gallery block WordPress/gutenberg#20778 more details at WordPress/gutenberg#6177 (comment)
-
re-evaulate the content_width variable: WordPress/gutenberg#5650
-
Add additional default image sizes (by default and account for 2x/3x/retina/hidpi displays) https://core.trac.wordpress.org/ticket/45406 and WordPress/gutenberg#11821 (both same issue)
WordPress/gutenberg#6177 (comment) test cases from mort
https://core.trac.wordpress.org/ticket/45407
https://core.trac.wordpress.org/ticket/49966
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.