Test loading adaptive images

https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Адаптивные изображения

https://developer.mozilla.org/ru/docs/Web/HTML/Element/picture
Элемент picture

https://webdesign.tutsplus.com/ru/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015
как использовать HTML "picture" для адаптивных изображений

https://web.dev/serve-responsive-images/
Адаптивная загрузка изображений

https://scottjehl.github.io/picturefill/
Picturefill
A responsive image polyfill

https://qna.habr.com/q/681143
Как использовать тег picture при создании адаптивных изображений?

https://html5book.ru/images-in-html

https://developers.google.com/speed/webp/gallery1
Make the Web Faster / WebP / Samples
support: FALSE
support: TRUE

Responsive image: auto select image size for screen width

<img class="" alt=""  loading="lazy"
srcset="image_w360.jpg 360w,
	image_w375.jpg 375w,
	image_w480.jpg 480w,
	image_w640.jpg 640w,
	image_w768.jpg 768w,
	image_w920.jpg 920w,
	image_w1024.jpg 1024w,
	image_w1170.jpg 1170w,
	image.jpg 1280w"
sizes="(max-width: 360px) 100vw,
	(max-width: 375px) 100vw,
	(max-width: 480px) 100vw,
	(max-width: 640px) 100vw,
	(max-width: 768px) 100vw,
	(max-width: 1024px) 100vw,
	(max-width: 1170px) 100vw,
	(max-width: 920px) 100vw,
	1280px"
src="" />
support: FALSE
support: TRUE

Responsive image: auto select image size for screen width, tag PICTURE 

<picture>
    <source srcset="image_w360.jpg" media="(max-width: 360px)">
    <source srcset="smaller_landscape_480px.jpg" media="(max-width:480px) and (orientation: landscape)">
    <source srcset="image_w375.jpg" media="(max-width: 375px)">
    <source srcset="image_w480.jpg" media="(max-width: 480px)">
    <source srcset="image_w640.jpg" media="(max-width: 640px)">
    <source srcset="image_w768.jpg" media="(max-width: 768px)">
    <source srcset="image_w920.jpg" media="(max-width: 920px)">
    <source srcset="image_w1024.jpg" media="(max-width: 1024px)">
    <source srcset="image_w1170.jpg" media="(max-width: 1170px)">
    <img srcset="image.jpeg" alt=""/>
</picture>
		
<picture>
	<source type="image/svg+xml" srcset="pyramid.svg">
	<source type="image/webp" srcset="pyramid.webp">
	<img src="pyramid.png" alt="">
</picture>
		
<picture>

    <source media="(max-width: 450px) and (orientation: portrait)"
 srcset="img_20120101_081157_w300.jpg">
 
    <source media="(max-height: 400px)"
 srcset="img_20120101_081157_h300.jpg">
 
    <source media="(min-width: 451px)"
 srcset="img_20120101_081157_w600.jpg">
 
    <img
 src="img_20120101_081157_w600.jpg"
 alt="default image">
 
</picture>