Как использовать атрибут srcset с тегом <img>?
Этот вопрос помогает понять, как разработчик может оптимизировать загрузку изображений для различных экранов и устройств.
Короткий ответ
Атрибут srcset у тега <img> позволяет задать несколько версий изображения с разными разрешениями или размерами. Браузер автоматически выбирает наиболее подходящую версию в зависимости от плотности пикселей экрана и ширины экрана. В комбинации с атрибутом loading="lazy" можно использовать ленивую загрузку изображений для оптимизации производительности страницы.
Длинный ответ
Атрибут srcset используется с <img> для указания нескольких версий одного и того же изображения, чтобы браузер мог выбрать наиболее подходящее изображение для текущего устройства. Формат использования может включать разные размеры изображений (например, image-1x.jpg 1x, image-2x.jpg 2x) или разные ширины (image-small.jpg 500w, image-large.jpg 1000w).
В зависимости от устройства, браузер загружает изображение с нужным разрешением или размером, обеспечивая оптимальную производительность.
Атрибут loading="lazy" позволяет браузеру загружать изображения только тогда, когда они попадают в поле видимости пользователя. Это сокращает время загрузки страницы и уменьшает количество загружаемых данных.
Пример использования:
<img src="image-default.jpg"
srcset="image-500w.jpg 500w, image-1000w.jpg 1000w"
sizes="(max-width: 600px) 480px, 800px"
loading="lazy"
alt="Описание изображения">
В этом примере браузер выберет подходящее изображение в зависимости от ширины экрана и загрузит его, когда оно станет видимым.