[Support request] Image srcset

Home Forums Support Image srcset

  • This topic has 3 replies, 2 voices, and was last updated 5 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1290848
    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

    #1291438
    David
    Staff
    Customer Support

    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.

    #1294832
    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 ?

    #1294953
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.