- This topic has 3 replies, 2 voices, and was last updated 1 year, 6 months ago by David.
December 5, 2020 at 8:20 am #1568571Thomas
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.
ThomasDecember 6, 2020 at 4:27 am #1569121DavidStaffCustomer Support
i believe this Gutenberg github issue/proposal is what you’re looking for:
It looks to be part of much wider scale proposal to handle responsive images.December 12, 2020 at 9:23 am #1577632Thomas
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!December 12, 2020 at 5:17 pm #1578005
- You must be logged in to reply to this topic.