lazysizes
lazysizes copied to clipboard
aFarkas
[Docs] the example for the LQIP technique with a blur effect is not complete - alts and src attributes are missing
The code sample that's included on the blur-up plugin page is incomplete. src and alt attributes are missing. These things not only affect SEO but also make HTML code invalid. On the other hand If we add alt attribute then the loading effect is broken, because instead of blank placeholders we end up with blank placeholders with alt text :/
So we need both: alt and src attributes, but in turn, adding these breaks the smooth loading effect because the initial image is not blurred out.
So, IMO the soultion would be to include alt and src atteibutes and improve the CSS code - add blur effect for the initial image as well. Thanks to this the low-quality image would be blurred-out before the JS code does its magic.
You can simply add an alt attribute. About the src: This plugin was created because people wanted not to use the lqip markup and instead also wanted to lazyload the low quality source. As I understand your issue you don't want to use data-lowsrc but you want to use the lqip src for the fadeover effect, right?
You can simply add an alt attribute.
Not really, because If we add the src attribute then the initial image (the image that's loaded before JS code is processed) is not blurred out. Some CSS changes would be required in order to blur-out the initial image too. It would be great if the code sample contained such a CSS code.
As I understand your issue you don't want to use data-lowsrc but you want to use the lqip src for the fadeover effect, right?
Yes, and I also want to use alt attributes - because images without alts are not valid and also not SEO friendly. If I add alt attributes but omit the src attribute then alt text is shown for a fraction of a second before JS code is processed. That looks bad.
So my point is that the example is not complete and produces code that's not w3c compliant.
