Как правильно подготовить изображения для адаптивного сайта?
Хочу разобраться, как правильно подготовить изображения для адаптивного сайта.
Шаблон бесплатный, обучающий. Пробовал сверстать самостоятельно, уровень знаний начинающий. Если не трудно перечислить основные ошибки в работе.
Я думаю это будет интересно многим начинающим.
Сайт: http://i98745t8.beget.tech/
Ответы: 3
Корректно вставить изображения в адаптивный дизайн немного сложнее, чем в фиксированный макет.
Самый простой вариант - это определиться с каким-то средним разрешением для изображений и подготавливать картинки в соответствии с ним.Для того чтобы изображения не выходили за размеры контейнера, в котором оно находится, в CSS можно добавить следующее правило:
Это правило ограничит максимальную ширину таким образом, что она не будет превышать ширину контейнера. Свойство
height
со значениемauto
обеспечит сохранение пропорций при уменьшении изображения. Три последних CSS свойства (если необходимо) позволят отцентрировать изображение по горизонтали (когда ширина изображения меньше ширины контейнера).Кроме этого, изображения на меленьких экранах желательно отображать так, чтобы они занимали всю ширину
Более сложный вариант заключается в том, чтобы подготовить различные версии одного и того же исходного изображения для различных классов устройств. Тут тоже необходимо определиться с форматами изображений. Например, можно выбрать следующие значения ширины: 375px, 750px и 1500px. В соответствии с значениями ширины именовать и файлы. Например,viewport
. Если у вас имеется отступ для контента страницы, то его для изображения можно убрать, например, так (с помощью CSS):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 пиксель).Если можно с помощью html, css, js. С ними я хоть немного знаком, по php не знаю вообще ничего (кроме того, что такой язык существует).
Интересует какие основные ошибки допущены и варианты их решения на примере верстки по данному адресу. Много начинающих делают однотипные ошибки и на примере вашего ответа будет значительно легче разобраться со своими ошибками. Пробовал в зависимости от ситуации использоватьwidth
,max-width
(особенно интересует мобильные в альбомной ориентации). Ну и в общем ошибки, я думаю их там много.Можно даже статью по принципу «так делать не правильно, а так правильно», или что-то в этом духе.