The best solution for everything! ... except SEO.

[Max-Knyazyev]

First of all, my respect to Alexander Farkas.
I'm not a coder and I personally can't create something like "Lazysizes".

The src="" attribute of the tag is used to load a placeholder image with low quality.
For other cases src="" not used at all.
As a result - Google indexes photos with low quality / Google doesn't index anything at all.
Both are not good.
For the absolute ideal, all you need to do is - release the attribute src="" for classic use, put big "fat" pictures in it for Google.
For the low quality image placeholder use any date-* attribute.

The data-sizes="auto" and "Low quality image placeholder" pattern - amazing!

[Max-Knyazyev]

1