Loading small images in Post Featured Image block

> but it loads quite slow because for each post the full size featured image of ~2 MB is loaded

Ya, of course it does.

Why are you loading massive files?
https://www.allesreiziger.nl/wp-content/uploads/2021/08/col-de-l-aiguillon-uitzicht-villar-d-arene.jpg
https://www.allesreiziger.nl/wp-content/uploads/2021/09/cime-de-la-bonette-top.jpg

Fiz the image dimension and file size before you upload it.
You are access an images that is 2000px w, but you’re asking the HTML to output it like 360px X 260px.

Same for all of the images in the post(s):
https://www.allesreiziger.nl/wp-content/uploads/2021/08/lac-du-pontet-kraam-met-terras.jpg

Use tools like this:
https://www.birme.net
and this:
https://tinypng.com
before uploading.

Hi,

The original size of 2000×1333 px is for showing the images on full width in the blog posts. In the post grid with 3 columns, I would like to use the smaller size images that are automatically generated by WordPress.

In the Image block it works perfect. I can select thumbnail, medium large or original size in the WordPress editor. As an example I have selected large on this blog post and now it picks the 900×600 px images:
https://www.allesreiziger.nl/frankrijk/circuit-de-trecolpas/

In the code of this example I noticed that the class size-large was set in addition to wp-block-image. So I added size-large as extra class in the WordPress editor for the Post Featured Image block on the page https://www.allesreiziger.nl/frankrijk/
The class is added to wp-block-post-featured-image in the code, but still it loads the ful size images.

Any idea how I can get the sizing behavior of the Image block also working for the Post Featured Image block?

Thanks

You could try this:
wp-block-getwid-template-post-featured-image img {
height: auto;
max-width: 510px;
}

Or if you are not using this class anywhere else,
.real-content img {
height: auto;
max-width: 510px;
box-sizing: border-box;
}

Unfortunately the two suggestions don’t do the trick. I have applied both of them on the page https://www.allesreiziger.nl/frankrijk/. In the source you can see that the css is added to the page, but the images are still the full-blown original size.

See screenshot:

View post on imgur.com

It doens’t work bc the dimension is being explicit in the template.
You’ll need to remove that first.

The Post Featured Image block is part of WordPress, so I guess there is no way to control the image dimension in the template.

After some more searching on the Internet, I found out that there is a pull request on the WordPress project to solve the issue: https://github.com/WordPress/gutenberg/pull/38044. So I’m looking forward now to the next WordPress release:-)

Just ran into this issue working on a site on WP 6.0. Thanks for identifying and raising the issue.

@bozzmedia In case it is not yet working properly in WordPress, you can download the Gutenberg plugin. That solved the issue for me a couple months back.