For low quality placeholders, an option to write a new file instead of inlining base64 encoded string about eleventy-plugin-lazyimages

[MaybeThisIsRu]

Hi @liamfiddler :)

Unfortunately, even though the syntax matches with what LazySizes have specified in their documentation, it just doesn't appear to be working the way they claim it should. That said, since this is the case, I am altogether dropping the LQIP pattern from my site, and sticking to just native lazy loading with no polyfilling. The extra JavaScript is not worth it in my scenario anymore.

Since this deviates heavily from the goal of this plugin, I believe it makes sense for me to just create a simple plugin instead. Doing only one thing - adding a loading="lazy" attribute to all img tags, unless one exists already, and adding width and height attributes. It will be a heavily stripped down version of your plugin.

[liamfiddler]

No problem. I'll close this issue and the PR.

[MaybeThisIsRu]

I have an open PR with an (almost) working solution: #21

There's one thing I still can't figure out. I want the browser to load all images specified in the src attributes, but lazyload higher res versions specified in data-src or data-srcset. This doesn't appear to work either with lazysizes, or with native lazy loading.

Lazysizes says this is possible. But it doesn't appear to be the case, even if I set preferNativeLazyLoad to false and ensure only LazySizes is used.

[liamfiddler]

👋 Hi @hirusi !

That isn't a use case I considered but it sounds useful. I'll look at the PR over the next few days. Thanks!

I'm not sure about the second problem - it's not something I've tested before.

Setting preferNativeLazyLoad is the correct approach to ensure Lazysizes is always used.

If that didn't work I'd recommend you look at the markup in your built site (particularly the parts generated by this plugin) and confirm it matches the markup expected by lazysizes.