2.0: Why is there an svg placeholder image instead of an empty one?

[janvitos]

Hi,

For plugin version 1.4.9, the there was no placeholder image and the src attribute was empty, as recommended by verlok (https://github.com/verlok/lazyload#do-not-use-placeholder-images) for better perceived performance.

I noticed that in version 2.0, there is now an svg placeholder image. I know this is easily changable by using the rocket_lazyload_placeholder filter, but before changing anything, I was curious to know why it was decided to switch back to a placeholder image instead of an empty one?

Thank you.

[janvitos]

Hey @Tabrisrp, I'd be interested in knowing why you switched back from an empty placeholder to an svg. That is all, thanks!

[remyperona]

We had report of users having broken images displayed because of the empty src attribute. We also are going to test a way to preserve the image space to prevent content reflow, and this will require a svg placeholder to achieve.

[janvitos]

Hi @Tabrisrp, thanks for your answer.

I reported the broken image in a previous ticket, but that was related to CSS code needing to be added. Please note that even if there's an SVG image, you still need to add CSS to prevent a broken icon from showing (I'm not sure why the SVG shows a broken image). Here's the CSS code in question:

For empty SRC:
img[src=""] { visibility: hidden; }

For SVG:
img[src^="data:image"] { visibility: hidden; }

[janvitos]

By the way @Tabrisrp, the reason the SVG still shows as "broken" is probably because of this error that I'm getting on every image when using the w3 HTML validator:

Bad value data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1 1\'%3E%3C/svg%3E for attribute src on element img: Illegal character in scheme data: space is not allowed.

Should I open another ticket for this bug or can I leave it here?