[Support request] Image srcset

[ROHART]

Hi,

By continuing my search for a non-mobile friendly site, I found that the images were displayed in their original size.

Who generates the code? Generatepress ? WordPress ?
And how to fix this problem ?

<picture class="ss-on-media-img aligncenter size-full wp-image-63260">
<source type="image/webp" srcset="https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33.jpg.webp 1800w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1024x683.jpg.webp 1024w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1550x1033.jpg.webp 1550w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-400x267.jpg.webp 400w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-775x517.jpg.webp 775w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-240x160.jpg.webp 240w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-540x360.jpg.webp 540w" sizes="(max-width: 1800px) 100vw, 1800px">
<img data-lazyloaded="1" src="https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33.jpg" data-src="https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33.jpg" alt="Observatoire du Parc ornithologique de Pont de Gaud" width="1800" height="1200" data-srcset="https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33.jpg 1800w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1024x683.jpg 1024w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1550x1033.jpg 1550w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-400x267.jpg 400w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-768x512.jpg 768w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1536x1024.jpg 1536w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-775x517.jpg 775w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-240x160.jpg 240w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-540x360.jpg 540w" data-sizes="(max-width: 1800px) 100vw, 1800px" class="litespeed-loaded" sizes="(max-width: 1800px) 100vw, 1800px" srcset="https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33.jpg 1800w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1024x683.jpg 1024w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1550x1033.jpg 1550w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-400x267.jpg 400w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-768x512.jpg 768w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1536x1024.jpg 1536w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-775x517.jpg 775w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-240x160.jpg 240w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-540x360.jpg 540w" data-was-processed="true"><noscript><img src="https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33.jpg" alt="Observatoire du Parc ornithologique de Pont de Gaud" width="1800" height="1200" srcset="https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33.jpg 1800w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1024x683.jpg 1024w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1550x1033.jpg 1550w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-400x267.jpg 400w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-768x512.jpg 768w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1536x1024.jpg 1536w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-775x517.jpg 775w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-240x160.jpg 240w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-540x360.jpg 540w" sizes="(max-width: 1800px) 100vw, 1800px"/></noscript>
</picture>

Thanks for your help.

Gregory

[David]

Hi there,

WordPress would normally be responsible for the image HTML within your content.
Whereas that code looks like it has been ‘generated’ by a plugin or two. I can see markup from Social Snap and maybe another plugin that is generating the lazy load.

Maybe try disabling Social Snap to see if that changes how the browser treats the different image sizes.

[ROHART]

Hi David,

Even if I desactive Social Snape on pictures and the lazyload Litespeed, it’s wrong.

Withouth Social Snap on pictures :

<img data-lazyloaded="1" src="https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33.jpg" data-src="https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33.jpg" alt="Observatoire du Parc ornithologique de Pont de Gaud" width="1800" height="1200" data-srcset="https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33.jpg 1800w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1024x683.jpg 1024w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1550x1033.jpg 1550w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-400x267.jpg 400w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-768x512.jpg 768w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1536x1024.jpg 1536w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-775x517.jpg 775w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-240x160.jpg 240w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-540x360.jpg 540w" data-sizes="(max-width: 1800px) 100vw, 1800px" class="litespeed-loaded" sizes="(max-width: 1800px) 100vw, 1800px" srcset="https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33.jpg 1800w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1024x683.jpg 1024w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1550x1033.jpg 1550w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-400x267.jpg 400w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-768x512.jpg 768w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1536x1024.jpg 1536w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-775x517.jpg 775w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-240x160.jpg 240w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-540x360.jpg 540w" data-was-processed="true">

Without Social Snap on pictures AND the lazyload Litespeed :

<img src="https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33.jpg" alt="Observatoire du Parc ornithologique de Pont de Gaud" width="1800" height="1200" srcset="https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33.jpg 1800w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1024x683.jpg 1024w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1550x1033.jpg 1550w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-400x267.jpg 400w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-768x512.jpg 768w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-1536x1024.jpg 1536w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-775x517.jpg 775w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-240x160.jpg 240w, https://www.my-wildlife.com/wp-content/uploads/2020/05/parc-ornithologique-pontdegaud-gregoryrohart-33-540x360.jpg 540w" sizes="(max-width: 1800px) 100vw, 1800px">

So I have to change my code on wordpress ? Where Can I do that ?

[David]

There is nothing actually wrong with that markup – it looks as it should.

I ran a GT Metrix test on the post you provided a link for.
It displayed 13 images that were being resized by CSS.
I checked a few of them and they were present in the Gallerys and the Related Posts.

So either the Gallery and related posts plugins are resizing using CSS
OR
Those plugins are conflicting with the changes made by Social Snap and Lazyloading.

To check – disable the Social Snap and Lazy Loader and run a GT Metrix test on the page. If you still see 13 images requiring resizing then we know its the Gallery and Related Post plugins causing an issue.

[Author]

Posts