srcset attribute is output in the rendered DOM but not in the page source

I’ve implemented a solution so now I get HTML validation right. I’ve followed Alexander Farkas (lazysizes developer) advice in https://github.com/aFarkas/lazysizes/issues/500 plus a complementary fix –which is necessary– provided by him as well in https://stackoverflow.com/questions/29788868/w3c-validation-of-srcset.

In src/Plugin.php, I’ve replaced $img->removeAttribute( 'srcset' ); on line 271 with:

$img_width  = $img->getAttribute( 'width' );
$img->setAttribute( 'srcset', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 ' . $img_width . 'w' );
$img->setAttribute( 'width', $img_width );

Please, notice that:

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

is a safer version of:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

https://stackoverflow.com/questions/6018611/smallest-data-uri-image-possible-for-a-transparent-image. I’ve replaced it on line 56 so we don’t get an extra query.

If you find this solution acceptable probably it should be applied to the picture element on line 354.

I hope this makes sense, my programming skills are pretty basic.

• This reply was modified 6 years ago by diegocanal.
• This reply was modified 6 years ago by diegocanal.
• This reply was modified 6 years ago by diegocanal.
• This reply was modified 6 years ago by diegocanal.

Hi @diegocanal,

happy you like the plugin! Somehow I missed your initial post, sorry. Thanks for the code and research! I’m not sure if the width for srcset is necessary, the quote from the spec in the Stackoverflow post sounds like that is necessary there because one image has a width.

I will implement that and — if you don’t mind — send you a link to a beta version for testing?

Thanks again,
Florian

Hi Florian,

Regarding:

I’m not sure if the width for srcset is necessary, the quote from the spec in the Stackoverflow post sounds like that is necessary there because one image has a width.

I had to implement the width because after adding the srcset attribute without it I started getting a new (different than the one I was getting before) validation error, which was:

Error: Bad value data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 for attribute srcset on element img: No width specified for image data:image/gif;base64,R0l…AAAAALAAAAAABAAEAAAIBRAA7. (When the sizes attribute is present, all image candidate strings must specify a width.)

After adding the width the new error went away and now it validates fine. Perhaps there is another way (not having to add the width) to prevent that new validation error, but I couldn’t find it.

Note: I’ve used https://validator.w3.org/nu/ to do the HTML validation testing.

I’ll be glad to test your fix. You can find me in slack if you need to comment anything more directly.

Thanks!

• This reply was modified 6 years ago by diegocanal.

Hi,

ah okay, will take a look at it!

Best,
Florian