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
- 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 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
- change the image size to large.
- 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 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:
(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:
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
- Optimize full size images (covered in https://core.trac.wordpress.org/ticket/37840 and https://github.com/WordPress/gutenberg/issues/11822
(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)
Allow theme to control the sizes attribute based on alignment https://github.com/WordPress/gutenberg/issues/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 https://github.com/WordPress/gutenberg/issues/20778 more details at https://github.com/WordPress/gutenberg/issues/6177#issuecomment-400095305
re-evaulate the content_width variable: https://github.com/WordPress/gutenberg/issues/5650
Add additional default image sizes (by default and account for 2x/3x/retina/hidpi displays) https://core.trac.wordpress.org/ticket/45406 and https://github.com/WordPress/gutenberg/issues/11821 (both same issue)
https://github.com/WordPress/gutenberg/issues/6177#issuecomment-442681998 test cases from mort
Additional issues linked in the repository:
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.