Lazyloaded Images do not appear

any JS errors on the browser console dainocenciowp ?

There’s this error but doesn’t appear to be JS related:

Uncaught ReferenceError: $ is not defined
at (index):181

Indeed not sure this would cause lazysizes to break (as this JS library is standalone and does not need/ use jQuery), but it is a problem nevertheless: $ is shorthand for jQuery but should not be used in WordPress really.

Other then that; do you have a non-prod where you could leave things broken for a while?

Sorry I don’t have a none-prod, I just activated lazyload on the site I gave but excluded first 6 images (bottom images don’t appear).

PS. In case you have an idea, would you know how I could address the “Uncaught ReferenceError”? ??

re. the ReferenceError; you’ll have to (ask the developer of the theme/ plugin responsible for that code to) replace $ with jQuery, see https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/ for more info/ alternatives.

re. lazyloading; if you disable imagify (no need to enable shortpixel) do all images load in that case?

Thanks for the Jquery tip!

Re: lazyload, the images are now loading when I deactivate Imagify. What could be causing the conflict?

I decided to revert back to using Shortpixel (SPIO) as it works well with AO. Tried SPAI but appears to have loading issues as well.

Will mark as resolved

I assume you have both Imagify & SPIO configured to use the picture tag to switch between webp & jpeg?

It would be interesting to compare the HTML generated by SPIO with the one generated by Imagify, because it is somewhere in the <picture HTML markup that the reason for the lazyloading issues must be found ..

Yes I used the picture method for both.

Not sure where to look and how to compare, but I can share the generated tags here. I reinstalled Imagify and reprocessed one image to generate the tag:

Imagify
<div class="wp-block-latest-posts__featured-image"><noscript><picture class="attachment-medium size-medium wp-post-image" style="max-height:400px;">
<source type="image/webp" srcset="https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px-600x400.jpg.webp 600w, https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px-768x512.jpg.webp 768w, https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px.jpg.webp 1500w" sizes="(max-width: 600px) 100vw, 600px"/>
<img width="600" height="400" src="https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px-600x400.jpg" alt="investment-booklet-smartphone-coffee" />
</picture>
</noscript><picture class="attachment-medium size-medium wp-post-image lazyloaded" style="max-height:400px;">
<source type="image/webp" data-srcset="https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px-600x400.jpg.webp 600w, https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px-768x512.jpg.webp 768w, https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px.jpg.webp 1500w" srcset="data:image/svg+xml,%3Csvg%20xmlns=%22https://www.w3.org/2000/svg%22%20viewBox=%220%200%20600%20400%22%3E%3C/svg%3E" data-sizes="(max-width: 600px) 100vw, 600px">
<img width="600" height="400" src="//www.w3.org/2000/svg%22%20viewBox=%220%200%20600%20400%22%3E%3C/svg%3E" alt="investment-booklet-smartphone-coffee" />
</picture>
</div>

This one’s for SPIO
<picture class="attachment-medium size-medium wp-post-image sp-no-webp" style=""><source data-srcset="https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px-600x400.webp 600w,https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px-768x512.webp 768w,https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px.webp 1500w" sizes="(max-width: 600px) 100vw, 600px" type="image/webp" srcset="https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px-600x400.webp 600w,https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px-768x512.webp 768w,https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px.webp 1500w"><source data-srcset="https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px-600x400.jpg 600w, https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px-768x512.jpg 768w, https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px.jpg 1500w" sizes="(max-width: 600px) 100vw, 600px" type="image/jpeg" srcset="https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px-600x400.jpg 600w, https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px-768x512.jpg 768w, https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px.jpg 1500w"><noscript><img src="https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px-600x400.jpg" alt="investment-booklet-smartphone-coffee" height="400" width="600" /></noscript><img src="https://dietrichinocencio.com/wp-content/uploads/2020/09/Investing-1000px-600x400.jpg" alt="investment-booklet-smartphone-coffee" height="400" width="600" /></picture>

• This reply was modified 3 years, 11 months ago by Jan Dembowski.
• This reply was modified 3 years, 11 months ago by Jan Dembowski. Reason: Formatting

OK, I tested with Imagify and was able to identify the reason: both Imagify and Autoptimize use the output buffer and due to the default configuration Autoptimize will first add the lazyload tags to the <img tags after which Imagify turns those <img tags into <picture, removing the lazyload class from <img adding it to <picture instead, which does not work for lazysizes (the JS library that does the lazyloading in AO).

The workaround: forcing AO to retake control of the output buffer -allowing Imagify to first turn <img into <picture and AO changing that for lazyloading purposes afterwards- by adding below line to your wp-config.php;

define( 'AUTOPTIMIZE_INIT_EARLIER', true );

frank

Thanks for the feedback Frank! Will test it out