Для современных сайтов использование адаптивных изображений давно стало стандартом. Ведь пользователи посещают интернет-ресурсы, используя гаджеты с разными размерами экрана. Но для корректного отображения адаптивных изображений необходимо правильно прописать атрибут srcset. Это иногда вызывает небольшие трудности у фронтендеров и SEOшников. Разбираемся, что означает srcset, его принцип работы и нюансы использования.
Srcset – что это?
Это атрибут html-тегов для картинок <img> или <picture>. Он считается одним из самых простых способов автоматизировать постановку наиболее подходящего изображения. Подобранные картинки задаются списком, разделенные запятыми. Браузер самостоятельно анализирует атрибуты изображений, тип и особенности устройства пользователя, после чего выбирает изображение, наиболее близкое к текущей ширине экрана пользователя.
Атрибут srcset поддерживается практически всеми видами браузеров. Если это не так, как в случае с Internet Explorer и Opera Mini, то нужное изображение извлекается из src и отображается одинаково при любых размерах гаджета пользователя. Фактически, Srcset является более продвинутым вариантом, чем атрибут src.
Как сделать адаптивные изображения для сайта?
Современным сайтам очень важно использовать адаптивные изображения по таким причинам:
- экономия трафика пользователя – с каждым годом мобильный трафик увеличивается;
- увеличение скорости загрузки – пользователю может не понравиться, что картинка загружается слишком долго или не в том разрешении.
В этом случае уже не так важно, как подключить картинку в html, а гораздо важнее – как сделать так, чтобы она отображалась правильно на любом гаджете пользователя. Предлагаем несколько шагов для этого:
- добавляем HTML;
- добавляем CSS со значением Auto для height и 100% для width. можно еще добавить свойство max-width и добавить свое значение.
Кроме того важно тестировать, как тот или иной браузер будет выбирать изображение при изменении устройства.
Как указать путь к картинке в HTML?
Если вы уже знаете, как добавить изображение в html (с помощью тега <img>), то теперь стоит обратить внимание на то, как указывать путь к вашей иллюстрации. В этом вам поможет атрибут src, который может как содержать абсолютный адрес URL, так и относительный, в зависимости от того, где находится ваша картинка.
Еще один атрибут, который вам поможет в этой задаче – alt. В случае медленного интернета он отлично справляется с текстовым описанием вашей иллюстрации. Существует еще много способов прописать иллюстрацию, но о них лучше расскажут тренера на занятии.
Хотите научиться разбираться, как добавить картинку в html код и знать все о верстке сайтов – вам поможет компьютерная школа Hillel. Высокое качество обучения без воды и лишней траты времени. Убедитесь сами.
По материалам: https://itwiki.dev/ru/