How to enable lazy loading for JP2, WebP and JPG/PNG on a website/landing page?

Question

HTML

There is a site/landing on which by default the picture is indicated by the code:

img src="logo.png" alt="logo"

The task was to optimize the speed of loading images on the site, I took the code from active-vision:


picture
source srcset="logo.webp" type="image/webp"
source srcset="logo.jp2" type="image/jp2"
img src="logo.jpg" alt="logo"
picture

And put it before srcset > data- < and after image name > loading="lazy" <


picture
source data-srcset="logo.webp" type="image/webp"
source data-srcset="logo.jp2" type="image/jp2"
img data-src="logo.jpg "load="lazy" alt="logo"
picture

It doesn’t work for something, I haven’t tried srcset yet, but just data-src, to no avail ... The pictures are in place, the names are correct, the correct path is indicated in the code ... The lazy loading script is on the site and is indicated in the code between head. In the code, all opening and closing tags are affixed

. What's wrong?