Imagify + Lazy Load creates weird code in image’s src attribute

  • Resolved huyngofrea

    (@huyngofrea)


    5 years, 2 months ago

    Images affected by Imagify plus a Lazy Load setting that’s turned on from my theme creates a strange code into the picture’s source srcset tag and at the image’s src tag as well. A link to the image with inspect code is here: https://ibb.co/PMg7n1L

    A copy of the inspect code is below:

    <picture class="attachment-medium_large size-medium_large" loading="lazy">

<source type="image/webp" data-srcset="https://testing.fidelityrealestate.com/wp-content/uploads/2021/03/Top-Golf-Courses-in-the-US-768x432.png.webp" srcset="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20768%20432%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E">

<img width="768" height="432" src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20768%20432%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src="https://testing.fidelityrealestate.com/wp-content/uploads/2021/03/Top-Golf-Courses-in-the-US-768x432.png" alt="Top Golf Courses in the U.S." loading="lazy">
</picture>

    Imagify works just fine without the Lazy Load option on but I require that the lazy load option is turned on from my theme to decrease load times for the site.

    Has anyone seen something similar or why the strange code would be generated in the srcset and src attributes?

    Here are my settings for Imagify:
    General
    Optimization Level: Aggressive
    Auto-Optimize images on upload

    Optimization
    Webp Format
    Create webp versions of images: Checked
    – Display images in webp format on the site: Checked
    – – Use <picture> tags (preferred)
    – – If you use a CDN, specify the URL: (blank)

    I’ve also thought about an option of turning off my site theme’s Lazy Load and have it be handled by another script or plugin so that it wouldn’t generate the code in the scr attributes.

    Any help would be much appreciated.

Viewing 1 replies (of 1 total)
  • Plugin Author WP Media

    (@wp_media)

    5 years, 2 months ago

    Hi @huyngofrea!

    This is Joseph from Imagify, and I’ll gladly assist you here!

    Yes, unfortunately, sometimes lazy loading and Imagify’s “Use picture tags” option will not work well together. The lazy loading script should replace the value in the srcset attribute with the value that is in the data-srcset attribute, but when the img tags are replaced with picture tags, this can cause the script to not be able to do that.

    We often suggest changing to Imagify’s “Use rewrite rules” option as a solution for these kinds of issues, but given that the site analysis tool I use is telling me you’re using Cloudflare, that would be ruled out, as any first visit on your site will trigger the cache creation in Cloudflare, and if that visit is from a browser that supports WebP, the WebP versions will be cached. Future visitors would be served these WebP images from cache whether they use a browser that supports WebP or not, causing blank space where the image should be at times.

    Since the solution suggested above won’t work for you (if you are using Cloudflare), then it may not be possible for WebP image display to work for you, given your specific site setup, unless you can turn off lazy loading.

    I’m really sorry, I wish there was another solution I could recommend for you. Please let me know what you think, and if you have any further questions I’ll be glad to continue assisting!

    Best regards,
    Joseph

Viewing 1 replies (of 1 total)

The topic ‘Imagify + Lazy Load creates weird code in image’s src attribute’ is closed to new replies.