Post featured image block use full size image => huge impact on performance

[thomask]

I use a standard 23 theme and in that and for example for the latest posts overview I use a standard post template with a Post featured image block.

The problem is that this block, unlike for example the gallery, does not have a definition of how big the image should be used and then uses the full size on the frontend, even if it is a view where maybe a medium or even a thumbnail would suffice.

This has a pretty significant impact on the loading speed of the images and therefore the whole site.

It is possible to see the result, for example, at www.exteriery.cz in the latest posts section

I know this ticket should probably belong under gutenberg but because of the impact on performance in the default installation I'm putting it here, it will probably affect a lot of sites

[ironprogrammer]

Thanks for the report, @thomask!

How does the block function under different browser widths? During test triage it was pointed out that the block uses srcset, so should utilize an appropriately sized alternate. If this isn't working as expected, then having those details would be helpful.

Rather than closing for upstream reporting, I'm leaving this open for additional test reports and feedback. Note that the browser may not load a smaller size if a larger is already cached, so testing with a cleared cache is recommended.

[thomask]

I have created test demo site ​https://test.kapler.cz/ with clear wordpress instalation with few lorem ipsum posts with some big featured images.

From what i see, full version of the image is offered. so even they are never bigger than 385 × 238 px full many megapixel images are downloaded. And there are smaller media sizes defined even by default wp.

the code then looks like

<a href="https://test.kapler.cz/?p=18" target="_self" style="height:max(15vw, 30vh)">
<img width="2560" height="1704" 
src="https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-scaled.jpg" 
class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Amet" decoding="async" 
style="height:max(15vw, 30vh);object-fit:cover;" 
srcset="https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-scaled.jpg 2560w, 
https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-300x200.jpg 300w, 
https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-1024x682.jpg 1024w, 
https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-768x511.jpg 768w, 
https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-1536x1023.jpg 1536w, 
https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-2048x1363.jpg 2048w" 
sizes="(max-width: 2560px) 100vw, 2560px"></a>

so there is srcset defined, but when i look to the network tab in devtools, my desktop browser with max with of screen where the image is 385 × 238 px it gets full version ​https://test.kapler.cz/wp-content/uploads/pexels-ylanite-koppens-796602-scaled.jpg. If i resize the window to 601 px, where the images on screen are 163×237 px, it still downloads up to 1536x1151 images (see the new attachement)

I think there should be a way how to setup the maximum and use e.g. a medium size for desktop default or even have some custom size for the theme that would fit the maximum sizes for mobile/desktop for the 1 / 2 and 3 columns and then use the proper sizing based on number of columns...

[thomask]

showing what sizes are downloaded with minimum image size needed