Gutenberg and variable image sizes

Images embedded via Gutenberg are not always optimized automatically for different resolutions – pay attention to the pitfalls!

New technology also brings new problems that were already solved in the past – this is about variable image sizes.

There are various web techniques that ensure that images are loaded in the correct resolutions in current browsers – Gutenberg partially supports them. However, the following scenarios are currently not considered:

Multi-column layouts

Images in multi-column layouts that are wrapped with the “image” block are loaded in a resolution as if the layout was single-columned – that is, full width of the content.

Cover-Block

The cover block always displays pictures in their original size – pictures in camera resolution can then be up to 6000 pixels wide. Although WordPress automatically creates multiple resolutions for an image when uploading to the library, cover blocks always uses the original resolution. The reason is that the image is embedded as a background image. Again, there are technical alternatives that are not used.

Solutions

Manually reduce the image

Edit the image in WordPress so that it gets a lower resolution.

Meanwhile, you can participate in the discussion on GitHub.