Lazy load srcset support

  • Resolved Jonathon Leathers

    (@jtleathers)


    5 years, 9 months ago

    The lazy loading feature currently does not support srcset after the image has been loaded which causes issues if the screen size changes after the image has been loaded.

    For example:
    Upload an image that is 2000px width.
    Content area max-width is 1920px.
    Browser window is at 1000px when the page loads so it grabs the “Large” crop of 1024px width.
    Expand the browser window out to 1920px.
    The image will stop at 1024px instead of continuing to expand with the content width.

    The current implementation can break layouts when resizing the browser on desktop or changing from portrait to landscape on phones/tablets.

    For comparison, the lazy loading feature of Jetpack switches data-srcset to srcset so that the images are properly responsive once on screen. This seems like the correct way to handle this to actually support responsive images and I would love to see it implemented so that this plugin can handle even more tasks for me!

    (Not necessarily a deal breaker like above but I really dislike the fade in. The trigger should be set before the image is in the viewport so that the plugin doesn’t have to implement a design feature like every image fading into the screen when all I want is the optimization feature of lazy loading images.)

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Hristo Pandjarov

    (@hristo-sg)

    SiteGround Representative

    Make sure you have the responsive lazy loading enabled. If you talk about WooCommerce products, proper support is added in the upcoming 5.1 version. As for the provided example, I will look into it and see how we can improve it for furture updates.

    Thread Starter Jonathon Leathers

    (@jtleathers)

    Maybe I didn’t explain it well enough but I’m saying the way you have your responsive images feature built will break layouts.

    Currently you’re using information from data-srcset to define the value of the “src” attribute. I assume you’re getting the viewport width via Javascript to figure out which image to use. But if the viewport width changes, the browser has no access to the other images defined in data-srcset because you are never setting the “srcset” attribute.

    What happens is you end up with a small image even if the screen width gets larger and there are larger images available.

    Basically, the “srcset” attribute needs to be added otherwise this is not actually a responsive image.

    Plugin Author Hristo Pandjarov

    (@hristo-sg)

    SiteGround Representative

    Do you want to check version 5.1 ??

    https://sgoptimizer.com/sg-cachepress.zip

    We’ve fixed it there but I’d love to have your feedback.

    Thread Starter Jonathon Leathers

    (@jtleathers)

    This is why I love SiteGround!

    Yeah, that works great in 5.1. Thanks for the change and update Hristo!

    Plugin Author Hristo Pandjarov

    (@hristo-sg)

    SiteGround Representative

    Awesome ?? We will push the update monday!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Lazy load srcset support’ is closed to new replies.