[Resolved] IMG size attribute wrong, leading to huge traffic

[Thomas]

Hi!

I like uploading large images as they will fit future designs. I even include them in Gutenberg in “full” size, the browsers have to fetch the correct resolution anyway.

The HTML is something like this:
<img loading="lazy" width="2560" height="1706" src="https://pflaume.netaction.de/wp-content/uploads/2020/12/pexels-pixabay-531321-scaled.jpg" alt="" class="wp-image-1871" srcset="https://pflaume.netaction.de/wp-content/uploads/2020/12/pexels-pixabay-531321-scaled.jpg 2560w, https://pflaume.netaction.de/wp-content/uploads/2020/12/pexels-pixabay-531321-300x200.jpg 300w, https://pflaume.netaction.de/wp-content/uploads/2020/12/pexels-pixabay-531321-1024x683.jpg 1024w, https://pflaume.netaction.de/wp-content/uploads/2020/12/pexels-pixabay-531321-768x512.jpg 768w, https://pflaume.netaction.de/wp-content/uploads/2020/12/pexels-pixabay-531321-1536x1024.jpg 1536w, https://pflaume.netaction.de/wp-content/uploads/2020/12/pexels-pixabay-531321-2048x1365.jpg 2048w" sizes="(max-width: 2560px) 100vw, 2560px">

This is fine except the sizes attribute:
sizes=”(max-width: 2560px) 100vw, 2560px”
It should reflect the container width depending on the breakpoints. At the moment browsers load the srcset resolution that would fit to window width which is way too large most of the time.

Both Generatepress and Generateblocks know their widths and breakpoints. Would it be the task of Generatepress to fix the image blocks? At the moment, a small page with two or three images easily wastes 1MB traffic because of wrong usage of srcset attributes.

Even if this is not a bug of Generatepress, I think there should be a documented fix as Generatepress is known as high performance theme.

Regards
Thomas

[David]

Hi there,

i believe this Gutenberg github issue/proposal is what you’re looking for:

https://github.com/WordPress/gutenberg/issues/6177

It looks to be part of much wider scale proposal to handle responsive images.

[Thomas]

So we have to stop relying on srcset and use the size settings. Lesson learned. No author will obey this rule.

Luckily, lightbox plugins don’t use the “medium” size but fetch the image by its ID and show the image full screen with working srcset.

Thanks David!

[David]

Yeah – theres lot of open issues regarding the Image Block – lets hope we see some advancements.

Glad to be of help!

[Author]

Posts