WebP Picture conflict with Lazy Loading

  • Resolved nK

    (@nko)


    4 years, 1 month ago

    Hey guys.

    We use our own lazy loading implementation and it is conflicting with your WebP module.

    • We use WP filter wp_get_attachment_image_attributes to add lazy loading attributes to our images and it is working fine.
    • We remove srcset and sizes attributes
    • We overwrite src attribute and add our placeholder to it
    • We add data attributes for lazy loading script data-src, data-srcset, data-sizes

    As result, our lazy loading is not working properly, as images loads on page load from srcset attribute.

    Also, you add src attribute with a prefix, but ignore the original src attribute without prefix, which some lazy loading plugins still use to display placeholders (as ours) or LQIP images.

    You can see the problem also with Autoptimize plugin.

    Result HTML:

    Result HTML without WebP:

    As you can see, in image tag without your WebP replacements there is an src attribute and there are no srcset and sizes attributes.

    Please, could you look at it and fix it in the next plugin update. We use your plugin for image optimization on our sites and we only need to fix this small problem.

    Regards, nK.

    • This topic was modified 4 years, 1 month ago by nK.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Gerard Blanco

    (@sixaxis)

    Hi nK,

    Thanks for your message; sorry to hear about this issue! ??

    We built two solutions for delivering the WebP images to the compatible browsers, but they don’t work for all WordPress installations due to the variety of themes, plugins and/or CDNs they use.

    I recommend you to have a careful read at this article, especially the Troubleshooting section: https://help.shortpixel.com/article/286-how-to-serve-webp-files-using-spio

    If the second method (via .htaccess) doesn’t work either, then I’d suggest to try another plugin to deliver your WebP generated by ShortPixel, like Cache Enabler or WP Rocket.

    Another option would be ShortPixel Adaptive Images, but it lazy loads your images and I guess that will conflict with your solution.

    Best,

    Thread Starter nK

    (@nko)

    Hey Gerard.

    Thank you, I saw almost all of these recommendations in your documentation, but it is not what I wanted to hear from you.

    Just tell me, will you fix this issue with a picture tag in the next update or no? You provide a picture tag as the main option to use WebP images (and this is a better choice for Nginx servers and for Cloudflare users). This is why I ask you to fix it. And since it is not the problem for our plugin only, I gave you an example of a conflict with the Autoptimize plugin (which you recommend in your documentations).

    In our plugin (Visual Portfolio) we use lazy loading with our attributes (for example data-vpf-src) and your plugin does not add picture tag on our images. In the next plugin update, we wanted to change these attributes to data-src, which your plugin supports. And we wanted to recommend your plugin to our users to work with WebP images, but we can’t do this, because of the issue described above.

    Please, look at this issue and let me know if you can’t change the current behavior. Actually, I don’t understand why the prefix is not added, when it should be.

    p.s. Your recommendations regarding WP Rocket was helpful. Since we use WP Rocket on our sites but haven’t seen the option for WebP before. For now, on our sites WebP working ok with this combination ??.

    Regards, nK.

    Plugin Support Gerard Blanco

    (@sixaxis)

    Hi nK,

    Our developers were taking a look at this but it is still not clear what the problem is. Could you please elaborate and tell us step-by-step, with as many details as possible, how we can reproduce this, what the expected result is and what the actual result is?

    Thank you,

    Thread Starter nK

    (@nko)

    Hey Gerald.

    As you can see in my first message, I provided examples with screenshots. The first screenshot is how your plugin replaces the image, the second – img tag output without your plugin enabled.

    See on the screenshot, what exactly is confusing me (red marks):

    For proper lazy loading, removed attributes from img tag – srcset and sizes. But your plugin restores it. Because of it, lazy loading actually stopped working, as images loads immediately from srcset attribute. Furthermore, src attribute used for base64 placeholder, but your plugin removes it.

    I don’t know why it is happening, maybe this is required by specifications or something. Maybe you can clarify this (or fix).

    p.s. this lazy loading practice used by many plugins. Example for Autoptimize available in my first message.

    Regards, nK.

    Plugin Support Gerard Blanco

    (@sixaxis)

    Hi nK,

    Thank you. We’ll take a look at it and get back to you if we have any questions.

    Unfortunately I can’t tell you if or when this is going to be fixed, as this requires a deeper investigation by our developers.

    Cheers,

    Thread Starter nK

    (@nko)

    Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘WebP Picture conflict with Lazy Loading’ is closed to new replies.