Images Not Lazy Loading

Hi and thanks for the feedback. I’ll try to answer your questions one by one.

I need a lazy load plugin that works with the picture element, as all the others except for one, do not support this element.
I haven’t explicitly tested the plugin with the picture element, but if my memory is correct, the plugin doesn’t transform the picture element html to be lazy loading friendly yet. The lazysizes library should support this, so I’ll try to get this added in the future.

I am having trouble with the Extra/Divi theme by Elegant Themes. Do you know how to make your plugin compatible with this theme?
I can look into it, but it would depend on how the theme is coded. If the theme is using wp_get_attachment_image that could be one reason why it doesn’t work.

How do you recommend changing it to get_lazysizes_html( wp_get_attachment_image($id) as you suggest?
There’s sadly no easy way. You could just replace wp_get_attachment_image($id) (or whatever the $id part is named in the theme code) with get_lazysizes_html( wp_get_attachment_image($id), but that would break on theme update. I would recommend making a child theme (see the child theme docs), copying the files using wp_get_attachment_image and changing them in the child theme instead, which would make sure they don’t get overwritten. It is also possible that your theme has built-in hooks for changing stuff like this (so you wouldn’t have to copy whole files), but I’m not sure. The themes documentation should specify that. I can see if I can find out if that’s the case. Also, as you might have understood, this does require a bit of technical knowledge at the very least.

Is there any reason this plugin doesn’t natively support wp_get_attachment_image?
wp_get_attachment_image generates a complete string of HTML code for an image tag, and I’m not aware of any way this plugin could influence this HTML to allow for lazy-loading. I can do some research to see if there is a way (maybe see what other plugins are doing), but until then, I’m afraid the plugin can’t support it.
Upon further inspection it appears that I could use the hook wp_get_attachment_image_attributes to modify the image attributes. I will do some testing and see if I can add this to the next version of the plugin.

Again, thanks very much for your feedback. It is greatly appreciated, and as you said, could help me make this plugin benefit more people. I’ll make sure to see what I can do.

– Patrick Sletvold

• This reply was modified 5 years, 9 months ago by Patrick Sletvold. Reason: Updated info

Just an update on two points @martychc23:

I need a lazy load plugin that works with the picture element, as all the others except for one, do not support this element.
I originally said I didn’t think the plugin supported the picture element, and I still haven’t tested it explicitly. I do realize though that the plugin description might be a little misleading on this point. I will double-check and update the description accordingly.

Is there any reason this plugin doesn’t natively support wp_get_attachment_image?
I’m planning on having a go at implementing this as the next thing I do. If all goes well it will be part of the next version of the plugin, which is coming along great so far.

Hi Patrick,

Based on the description on Githun, I was under the impression that the picture element was fully supported. But as i was unable to use the plugin, I can’t confirm this myself.

I’m pleased to hear you will be supporting wp_get_attachment_image. As previously mentioned, your plugin was the only lazyload plugin that didn’t work on my site. So hopefully adding this support will greatly increase the amount of people who can use this plugin.

Look forward to the next release. Do you have an ETA for it?

@martychc23 I looked through the code and confirmed that the PHP side of the plugin doesn’t yet transform picture elements fully (only the img within them). Currently I’m working on improving this so the plugin will have full support of picture, as well as video and audio when the source if specified using source tags. To do this properly, I’m planning to refactor the HTML transforming code to be easier to work with, which should also allow me to implement wp_get_attachment_image. This was planned to be part of version 0.3.0, but because of the bigger changes, I’ll release 0.3.0 with the existing changes first (today most likely), and then work on this. Hopefully I’ll have version 1.0.0 ready in a few days, maybe a week depending on how well it goes.

@16patsle Just to clarify, i am using the picture element for images only such as:

<picture>
    <source srcset="large.jpg" media="(min-width: 300px)">
    <source srcset="medium.jpg" media="(min-width: 150px)">
    <img srcset="thumbnail.jpg">
</picture>

@martychc23 That’s what I would have guessed. In the current implementation, the img tag will get transformed, but if the conditions in the source tags are met, they will be downloaded immediately by the browser, basically making the plugin output this (slightly simplified):

<picture>
    <source class="lazyload" srcset="large.jpg" media="(min-width: 300px)">
    <source class="lazyload" srcset="medium.jpg" media="(min-width: 150px)">
    <img class="lazyload" data-srcset="thumbnail.jpg" src="data uri for temporary image here">
    <noscript>
        <img srcset="thumbnail.jpg">
    </noscript>
</picture>

The challenge with making it work the way it should, is that ideally there should be a noscript tag containing the original picture tag, while the source tags should also be transformed. This combination turned out to be difficult to solve for all edge cases with the current structure of the code, because the picture tag basically has to be processed twice.

Doesn’t the plugin on Github natively support the picture element? It makes numerous references to supporting it: https://github.com/aFarkas/lazysizes

The lazysizes library this plugin uses does support it yes. It’s just that the WordPress plugin doesn’t yet transform the picture elements so the js library can do it’s job. That’s the part I’m working on.

Hi there! ??

That sounds great, that you work on this stuff – I also have a problem with lazyloading picture elements. It works as planned in Chrome, but in Safari (mobile version) and Firefox (on Android) the images won’t load.

By the way, I’m also using WebP images in combination with JPGs / PNGs, if that matters here…

Thank you for putting in the work & have a nice day! ??

Hi!

I posted an answer on your review. As mentioned there, I think the issue is basically due to lacking support for the picture element. The refactor of the plugin code is almost complete, and I’ll hopefully make good progress on picture element support today. Let me know if you’d be interested in trying a pre-release version when the picture element support is in.

– Patrick Sletvold

Hey Patrick, pleased to hear you are making good progress.

I would be happy to test the pre-release version.

Hi from me to ??

I’m also very happy to hear about your progress with the plugin – I would be also interested in testing the pre-release version ??

Good to hear there’s interest. The implementation for the picture tag should be mostly done now, I just need to do some more cleanup.If all goes well, I’ll hopefully be able to give you a pre-release tomorrow.

Hello everyone!

I’m fairly confident that the support for the picture tag is now working properly. If you want to test it, go to the 0.4.0-beta page on GitHub and download the source code zip file. You should be able to install this like any other plugin in zip form. Let me know if any issues occur. If you’re familiar with GitHub, feel free to open an issue there. After I’ve implemented support for get_attachment_image and done more testing, I’ll release this as the stable version 1.0.0 on wp.org.

– Patrick Sletvold

Hey Patrick,

I tested out the beta but it’s still not lazy loading images using the Extra theme.

Did you test this out with Extra/Divi?