So, I’m learning more about the <picture> HTML standard. I had read several tutorials about it stating that your <source> element shouldn’t have both the sizes attribute and the media attribute set. In fact, when looking through the standard, this isn’t true!
The third rule of the standard is that if any of the srcset strings has a width descriptor, e.g. srcset="/images/flamingo-320w.png 320w, /images/flamingo-640w.png 640w" then you are required to have a sizes attribute! Crap!!! Looks like I have to rejigger the plugin to allow for the size attribute to be added to sources. Apologies to anyone who has already downloaded this plugin. Once I get a new version completed I will notify everyone and they can download it yet again!
You mean like in the code I posted earlier this week (used data-sizes="auto" in LazySizes) ? Did not know it was a requirement. But that’s why you have updates
Regards,
David
<picture> <source media="(max-width: 475px) and (orientation: portrait)" type="image/webp" data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset=" responsive-images/home-back/bg-Phone-webp/bg-home-phone_i2pozi_c_scale%2Cw_480.webp 480w, responsive-images/home-back/bg-Phone-webp/bg-home-phone_i2pozi_c_scale%2Cw_890.webp 890w, responsive-images/home-back/bg-Phone-webp/bg-home-phone_i2pozi_c_scale%2Cw_1200.webp 1200w" class="lazyload"> <source media="(max-width: 475px) and (orientation: portrait)" data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset=" responsive-images/home-back/bg-Phone-jpg/bg-home-phone_i2pozi_c_scale%2Cw_480.jpg 480w, responsive-images/home-back/bg-Phone-jpg/bg-home-phone_i2pozi_c_scale%2Cw_890.jpg 890w, responsive-images/home-back/bg-Phone-jpg/bg-home-phone_i2pozi_c_scale%2Cw_1200.jpg 1200w" class="lazyload"> <source media="(min-width: 476px) and (orientation: portrait)" type="image/webp" data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset=" responsive-images/home-back/bg-Tablets-webp/bg-home-tablet_m1dp98_c_scale%2Cw_768.webp 768w, responsive-images/home-back/bg-Tablets-webp/bg-home-tablet_m1dp98_c_scale%2Cw_1207.webp 1207w, responsive-images/home-back/bg-Tablets-webp/bg-home-tablet_m1dp98_c_scale%2Cw_1536.webp 1536w" class="lazyload"> <source media="(min-width: 476px) and (orientation: portrait)" data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset=" responsive-images/home-back/bg-Tablets-jpg/bg-home-tablet_m1dp98_c_scale%2Cw_768.jpg 768w, responsive-images/home-back/bg-Tablets-jpg/bg-home-tablet_m1dp98_c_scale%2Cw_1207.jpg 1207w, responsive-images/home-back/bg-Tablets-jpg/bg-home-tablet_m1dp98_c_scale%2Cw_1536.jpg 1536w" class="lazyload"> <source media="(max-width: 4800px)" type="image/webp" data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset=" responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_800.webp 800w, responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_1733.webp 1733w, responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_2379.webp 2379w, responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_2951.webp 2951w, responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_3499.webp 3499w, responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_3840.webp 3840w, responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_5000.webp 5000w" class="lazyload"> <img data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset=" responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_800.jpg 800w, responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_1733.jpg 1733w, responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_2379.jpg 2379w, responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_2951.jpg 2951w, responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_3499.jpg 3499w, responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_3840.jpg 3840w, responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_5000.jpg 5000w" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Full screen foto van een panorama over de Voerstreek in Belgie met een uitzicht over heuvelachtig landschap met een helder blauwe lucht."> </picture>
I just updated the plugin (again!) and also recorded a video. I’m not always coherent in it, but I tried!! EDIT@AllMediaLab helpfully pointed out that I got bandwidth/file size mixed up between JPG and PNG. Sorry about that - too much speaking off the cuff and not thinking!
This picture element is using lazyload and will not be indexed for SEO purposes due to the fact you have a transparent image for the src. Only the src is indexed so you should add it back in and then add srcset as the transparent image that way it will prevent the src from downloading.
This plugin in great , I’m glad useful PG features are still being added even if it’s not by the PG team (vs adding support for 3rd party suppliers). Am I correct that when converting to WordPress PG does not recognize these as images and automatically prepend the image directory? Or is that just a local issue for me.
Huh - I have to admit that I rushed this plugin out the door and didn’t try it out in WordPress PG. I’ll try to get on that this weekend and then get back to you! Thanks a lot!!
BTW The features of this plugin will soon be part of the core plugin. I’m sure Matjaz will do a better job than me with testing!!!
@jonroc got tied up with covid nonsense, so I didn’t get around to this quite yet. Is there any way you can send me a short demo file that illustrates the problem to speed things up?
, I’m glad useful PG features are still being added even if it’s not by the PG team (vs adding support for 3rd party suppliers). Am I correct that when converting to WordPress PG does not recognize these as images and automatically prepend the image directory? Or is that just a local issue for me.