Lazy Loading removes max-width from sizes attribute

  • Resolved annemarietn

    (@annemarietn)


    5 years, 3 months ago

    We enabled Lazy Load and spotted that the max-width specified in sizes is being overridden.

    In WordPress in the page we have specified to use the “Medium” image (300px width). The original image tag (before lazy loading enabled) shows as this:

    The max-width setting is there under “sizes” attribute: sizes=”(max-width: 300px) 100vw, 300px”>

    However, when Lazy Load was enabled the image tag was converted to:

    The “sizes” attribute now shows just the current browser window width, and has lost the max-width setting: sizes=”1598px”

    This has resulted in the 500px image being blown up to 1598px width, so terrible quality. How can I fix it so that Lazy Load respects max-width settings?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter annemarietn

    (@annemarietn)

    Apologies, didn’t consider that the image tags would be rendered as the images.

    Image tag before Lazy Load:

    src="https://35z8e83m1ih83drye280o9d1-wpengine.netdna-ssl.com/wp-content/uploads/2019/04/bh-300x180.png" alt="" class="wp-image-110389" srcset="https://35z8e83m1ih83drye280o9d1-wpengine.netdna-ssl.com/wp-content/uploads/2019/04/bh-300x180.png 300w, https://35z8e83m1ih83drye280o9d1-wpengine.netdna-ssl.com/wp-content/uploads/2019/04/bh.png 500w" sizes="(max-width: 300px) 100vw, 300px"

    Image tag after Lazy Load enabled:

    alt="" data-srcset="https://35z8e83m1ih83drye280o9d1-wpengine.netdna-ssl.com/wp-content/uploads/2019/04/bh-300x180.png 300w, https://35z8e83m1ih83drye280o9d1-wpengine.netdna-ssl.com/wp-content/uploads/2019/04/bh.png 500w" sizes="1527px" data-src="https://35z8e83m1ih83drye280o9d1-wpengine.netdna-ssl.com/wp-content/uploads/2019/04/bh-300x180.png" data-sizes="auto" class="wp-image-110389 lazyautosizes ls-is-cached lazyloaded" src="https://35z8e83m1ih83drye280o9d1-wpengine.netdna-ssl.com/wp-content/uploads/2019/04/bh-300x180.png" srcset="https://35z8e83m1ih83drye280o9d1-wpengine.netdna-ssl.com/wp-content/uploads/2019/04/bh-300x180.png 300w, https://35z8e83m1ih83drye280o9d1-wpengine.netdna-ssl.com/wp-content/uploads/2019/04/bh.png 500w"

    @annemarietn,

    Could you please try the recent update. It should fix the max-width setting with lazy loading.

    Best regards,
    Anton

    Thread Starter annemarietn

    (@annemarietn)

    It has indeed fixed the issue, thanks so much Anton for a speedy fix!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Lazy Loading removes max-width from sizes attribute’ is closed to new replies.