webp lazyload CLS issue

  • Resolved windorz

    (@windorz)


    1 month, 2 weeks ago

    I’m using Autoptimize’s LazySize. When I directly upload a WebP file to the media library and display it in an article, the placeholder size does not correspond to the width/height of the img tag. This causes a CLS issue.

    <img class="wp-image-259775 ls-is-cached lazyload" src="https://sample.com/wp-content/uploads/2025/01/content_image_6-719x1024.webp" data-src="https://sample.com/wp-content/uploads/2025/01/content_image_6-719x1024.webp" width="719" height="1024" data-srcset="https://sample.com/wp-content/uploads/2025/01/content_image_6.webp 926w,  211w, https://sample.com/wp-content/uploads/2025/01/content_image_6-719x1024.webp 719w,  768w" srcset="https://sample.com/wp-content/uploads/2025/01/content_image_6.webp 926w,  211w, https://sample.com/wp-content/uploads/2025/01/content_image_6-719x1024.webp 719w,  768w">
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    The lazyload placeholder would (should) use the width and height from the <img tag, so width="719" height="1024".

    hope this clarifies,
    frank

    Thread Starter windorz

    (@windorz)

    The img tag has width=”719″ and height=”1024″, but when the image is in WebP format, the placeholder does not match those dimensions.

    • Rendered size:877 × 585 px
    • Rendered aspect ratio:877∶585
    • Intrinsic size:225 × 150 px
    • Intrinsic aspect ratio:3∶2
    • File size:68?B
    • Current source:data:image/svg+xml,%3Csvg%20xmlns=%22https://www.w3…22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E
    <img class="wp-image-259775 ls-is-cached lazyload" src="data:image/svg+xml,%3Csvg%20xmlns=%22https://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E" data-src="https://sample.com/wp-content/uploads/2025/01/content_image_6-719x1024.webp" width="719" height="1024" data-srcset="https://sample.com/wp-content/uploads/2025/01/content_image_6.webp 926w, https://sample.com/wp-content/uploads/2025/01/content_image_6-211x300.webp 211w, https://sample.com/wp-content/uploads/2025/01/content_image_6-719x1024.webp 719w, https://sample.com/wp-content/uploads/2025/01/content_image_6-768x1093.webp 768w" srcset="https://sample.com/wp-content/uploads/2025/01/content_image_6.webp 926w, https://sample.com/wp-content/uploads/2025/01/content_image_6-211x300.webp 211w, https://sample.com/wp-content/uploads/2025/01/content_image_6-719x1024.webp 719w, https://sample.com/wp-content/uploads/2025/01/content_image_6-768x1093.webp 768w">
    • This reply was modified 1 month, 2 weeks ago by windorz.
    Thread Starter windorz

    (@windorz)

    There was an extra space and it wasn’t enclosed in double quotes.

    width = 729
    width="729"

    It had nothing to do with webp, it works now.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    ah, that would indeed cause AO not to be able to find the width and height in which case it falls back on a default value. glad you were able to find & fix the problem! ??

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