Validation W3C

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]

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

[Giovancruz]

+1