HTML: srcset и sizes
оптимизируем размер изображения с помощью HTML
Если Вы хотите, чтобы страницы сайта загружались быстрее, а сам веб-ресурс соответствовал принципам адаптивной вёрстки, используйте атрибуты srcset и sizes для HTML-элемента img.
Эти атрибуты позволяют браузеру выбрать изображение, подходящее для размеров экрана и разрешения устройства.
<img src="image-small.jpg"
srcset="image-medium.jpg 768w, image-large.jpg 1200w"
sizes="(max-width: 768px) 100vw, (min-width: 769px) 50vw"
alt="Responsive Image">
Картинки, соответствующие устройству, сокращают время загрузки веб-страницы и повышают лояльность пользователей.
Дополнительная информация на MDN
Спасибо за внимание.
