yireo / Yireo_NextGenImages

45 stars 27 forks source link

<img> attributes are being transfered to the <source> tag, rendering invalid HTML #78

Open jeroen-dhm opened 1 month ago

jeroen-dhm commented 1 month ago

I have created an <img> tag with the attributes alt, decoding, fetchpriority and loading. When NextGenImages converts the image to the WebP all of these attributes are being transfered over to the <source> element which holds the WebP image:

<picture>
    <source type="image/webp" srcset="https://www.ecobouwbescherming.nl/media/wysiwyg/categories/meubellakken.webp" alt="Meubellakken" decoding="async" fetchpriority="high" loading="eager">
    <img src="https://www.ecobouwbescherming.nl/media/wysiwyg/categories/meubellakken.jpg" alt="Meubellakken" decoding="async" fetchpriority="high" loading="eager">
</picture>

As per the HTML spec, this isn't allowed. The <source> HTML element only allows the media, sizes, src, srcset and type attributes. See below screenshot from the W3 HTML validator.

image

Would it be possible to change the NextGenImages implementation to filter out all invalid HTML attributes, thus making the HTML valid again?

jissereitsma commented 1 month ago

Good point: I think the following fix will repair this: https://github.com/yireo/Yireo_NextGenImages/commit/c3ad533a2d1b05a31a4375632cc93b828f0c4592 (to be released today)