Как правильно подготовить изображения для адаптивного сайта?
Хочу разобраться, как правильно подготовить изображения для адаптивного сайта.
Шаблон бесплатный, обучающий. Пробовал сверстать самостоятельно, уровень знаний начинающий. Если не трудно перечислить основные ошибки в работе.
Я думаю это будет интересно многим начинающим.
Сайт: http://i98745t8.beget.tech/
Самый простой вариант — это определиться с каким-то средним разрешением для изображений и подготавливать картинки в соответствии с ним.
Для того чтобы изображение не превышало размер блока, в котором оно должно находится, в CSS можно добавить правило:
Это правило задаст изображению максимальную ширину, таким образом, оно не будет превышать ширину контейнера. Свойство height со значением auto обеспечит сохранение пропорций изображению при его уменьшении. Три последних CSS свойства (если необходимо) позволят отцентрировать изображение по горизонтали (когда ширина изображения меньше ширины контейнера).
Кроме этого, изображения на меленьких экранах желательно отображать так, чтобы они занимали всю ширину viewport. Если у вас имеется отступ для контента страницы, то его для изображения можно убрать, например, так (с помощью CSS):
Более сложный вариант заключается в том, чтобы подготовить различные версии одного и того же исходного изображения для различных классов устройств. Тут тоже необходимо определиться с форматами изображений. Например, можно выбрать следующие значения ширины: 375px, 750px и 1500px. В соответствии с значениями ширины именовать и файлы. Например, image1-375w.jpg (имеет ширину 375px), image2-750w.jpg (имеет ширину 750px), image1-1500w.jpg (имеет ширину 1500px).
При выводе изображения (img) использовать атрибуты srcset и size.
В srcset указать ширину изображения в пикселях:
В атрибуте sizes ширину, которую должна иметь изображение на том или ином устройстве.
vw — задаёт ширину картинки в зависимости от ширины viewport. 1vw = 1% от ширины viewport.
В итоге вставка изображения на страницу адаптивного сайта будет осуществляться так (HTML код):
Теперь браузер будем загружать именно то изображение, которое будет более точно соответствовать устройству (на основании ширины viewport и количеству физических пикселей формирующих один CSS пиксель).