CSS: Адаптивные изображения в HTML

Отзывчивые изображения в HTML подразумевают адаптацию размеров изображения в зависимости от размера экрана устройства, на котором оно отображается.

1. Использование тега picture и параметра source для автоматического изменения изображения на экранах разной ширины.

Тег picture позволяет определить несколько источников изображений для разных размеров экрана и плотностей пикселей. Браузер выберет наиболее подходящий источник и отобразит соответствующее изображение.

Поддержка браузерами: https://caniuse.com/#search=picture%20source

<picture>				
	// изрбражение для экрана <= 570px (размер изображения + поля и отступы)
	<source media="(max-width: 570px)" srcset="sample-320w.webp">

	// изрбражение для экрана <= 820px (размер изображения + поля и отступы)
	<source media="(max-width: 820px)" srcset="sample-480w.webp">

	// изображение по-умолчанию для большого экрана
	<img src="sample-800w.webp" alt="" />
</picture>

2. Использование атрибута srcset с тегом img:

Атрибут srcset позволяет задать несколько источников изображений с указанием размеров. Браузер выберет наиболее подходящее изображение в зависимости от размера экрана и плотности пикселей.

<img
    srcSet="sample-480w.webp 480w, sample-640w.webp 720w, sample-900w.webp 960w"
    sizes="(max-width: 1200px) 480px, (max-width: 2560px) 720px, 960px"
    src="sample-900w.webp"
>

3. Использование CSS свойства max-width:

img {
	max-width: 100%;
	height: auto;
}