What problem does this address?
There does not seem to be a way to specify an image sizes attribute when using a core Gutenberg image block. This means that even if you know your image will be 100vw, then 50vw at certain breakpoints a double sized image is always loaded unnecessarily between certain breakpoints. This is a huge waste of bandwidth.
What is your proposed solution?
I would like to be able to pass in my own sizes attribute to the image within Gutenberg or within a Gutenberg template. E.g.
<!-- wp:image {"width":2560,"height":1440,"sizeSlug":"full","sizes":"(max-width: 48em) 100vw, (max-width: 90em) 50vw, 2560px"} -->
Currently the default "(max-width: 2560px) 100vw, 2560px" is always used, which means even if you know the image will be shown at 50vw between 48em to 90em in your theme template, your user is always forced to load a larger image. This issue is most severe when using HiDPI devices.
I don't believe it is possible to change the sizes attribute at all currently. Another use case example is with Block patterns. If your pattern has 4 image columns, you always force the user to load much more data than necessary with "(max-width: {imgSize}px) 100vw, {imgSize}px". rather than "(max-width: {imgSize}px) 25vw, {imgSize}px"
This would be particularly useful for image blocks within a gallery block.
What problem does this address?
There does not seem to be a way to specify an image sizes attribute when using a core Gutenberg image block. This means that even if you know your image will be 100vw, then 50vw at certain breakpoints a double sized image is always loaded unnecessarily between certain breakpoints. This is a huge waste of bandwidth.
What is your proposed solution?
I would like to be able to pass in my own sizes attribute to the image within Gutenberg or within a Gutenberg template. E.g.
<!-- wp:image {"width":2560,"height":1440,"sizeSlug":"full","sizes":"(max-width: 48em) 100vw, (max-width: 90em) 50vw, 2560px"} -->Currently the default
"(max-width: 2560px) 100vw, 2560px"is always used, which means even if you know the image will be shown at 50vw between 48em to 90em in your theme template, your user is always forced to load a larger image. This issue is most severe when using HiDPI devices.I don't believe it is possible to change the sizes attribute at all currently. Another use case example is with Block patterns. If your pattern has 4 image columns, you always force the user to load much more data than necessary with
"(max-width: {imgSize}px) 100vw, {imgSize}px". rather than"(max-width: {imgSize}px) 25vw, {imgSize}px"This would be particularly useful for image blocks within a gallery block.