Validation W3C

[michalkolek]

Expected Behavior

Running validator https://validator.w3.org on basic <picture> elements as per setup config should not result in errors.

Current Behavior

Currently when running validator on:

<picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="images/thumbs/04.jpg" data-alt="">
    <source srcset="images/thumbs/04.jpg" media="(min-width: 1280px)">
    <source srcset="images/thumbs/05.jpg" media="(min-width: 980px)">
    <source srcset="images/thumbs/06.jpg" media="(min-width: 320px)">
    <!-- NO img element -->
    <!-- instead of img element, there will be the last source with the minimum dimensions -->
    <!-- for disabled JS you can set <noscript><img src="images/thumbs/04.jpg" alt=""></noscript> -->
</picture>

Validator will give error: Element img is missing required attribute src.

Possible Solution

Setting up <nosript> tag with <img src=(...)> results in Element noscript not allowed as child of element picture in this context.

When adding <img src=(...)> tag without <noscript> surrounding it, html parser will simply output 2 images...

Steps to Reproduce (for bugs)

Run validator on any website with lozad setup

Context

Trying to get a clean sheet from validator.

[joepagan]

This should be in the docs imo as people will not realise it's not w3c valid in this way (obviously should be checking anyway), but:

lozad.js will overwrite an existing src attribute, so, you can preset it with an inline data uri. As an example:

<img class=lozad" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/brochure.png" alt="">

Would be helpful if a library of various inline data images like this existed.

[joepagan]

Turns out you can get w3c errors still if you use the data-srcset attribute and an accompanying sizes attribute... sigh

The sizes attribute may be specified only if the srcset attribute is also present.

[Jab2870]

This is something else that #144 would fix I believe

[joepagan]

Hah, just fixed with:

const observer = lozad('.lozad', {
          loaded: (el) => {
            el.setAttribute('sizes', el.dataset.sizes);
            el.removeAttribute('data-sizes');
          },
        });

Should be built in though, if you can do the same with data-srcset

[gchtr]

@joepagan This probably fixes the issue with W3C validator. But in a quick test, only Chrome and Firefox downloaded the correct sizes for images. Other browsers like IE and Safari were ignoring the sizes attribute when it’s updated in the loaded callback. I assume that the sizes attributes would have to be updated before the srcset attribute is updated.

[joepagan]

Well, what I suggested is just a temp work around, I think lozad should deal with this really.

Maybe a more suitable fix is to leave the sizes attribute on the element

[kevinmu17]

Any news on this? it has been a while and there is still no fix

[kashish609jain]

hey @ApoorvSaxena please assign this issue to me

[Giovancruz]

+1