Do not use any GIF placeholder for faster loading (omit src and srcset)

[gerdneuman]

'src="data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs=" sets a white 1x1 GIF as placeholder. This looks really ugly if the background is anything other than white. A transparent GIF would be much better: https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/

That is, data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

Hope you can change this to transparent and also update the docs at https://docs.wp-rocket.me/article/130-manually-apply-lazyload-to-an-image

[gerdneuman]

2 occurences I can see:
https://github.com/wp-media/rocket-lazy-load/search?q=data%3Aimage%2Fgif%3Bbase64%2CR0lGODdhAQABAPAAAP%2F%2F%2FwAAACwAAAAAAQABAEACAkQBADs%3D&unscoped_q=data%3Aimage%2Fgif%3Bbase64%2CR0lGODdhAQABAPAAAP%2F%2F%2FwAAACwAAAAAAQABAEACAkQBADs%3D

But I am not sure why one occurrence hard codes the placeholder instead of using the given apply_filter.

[gerdneuman]

fwiw, Lazysizes also uses a transparent gif which is data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== for that. It's even 4 characters shorter ;-)

https://github.com/aFarkas/lazysizes#tip-specifying-image-dimensions-minimizing-reflows-and-avoiding-page-jumps

[gerdneuman]

Actually, the LazyLoad author strongly suggest not to use any placeholder at all. I tested this myself and perceived performance is so much better without a placeholder because Progressive JPEG (and even baseline JPEG) shows so much faster.

See:
https://github.com/verlok/lazyload#do-not-use-11-pixel-gif-placeholders

[gerdneuman]

Sorry, correct link is:
https://github.com/verlok/lazyload#do-not-use-placeholder-images
(or search for placeholder in above URL)

[remyperona]

I'm going to integrate this in the next minor version to see how it feels and if we get any feedbacks.

Thank you for your contribution and pointing to this reference in the lazyload repo.

[gerdneuman]

@Tabrisrp

Current lazyload js version had a severe SEO issue, see verlok/vanilla-lazyload#215 (comment)

Just to inform you so you can update the plugin which should be just replacing the JS version.

[remyperona]

Tested version 10.11 and noted a bug where all images on the page are loaded directly instead of being lazy, so I reported it to verlok/vanilla-lazyload#225 and waiting for a fix before creating a new version.