4

Вопросов в общем-то несколько, но в одном направлении. Например, имеем блок в котором есть изображение в background.

.img-cont {
  position: absolute;
  left: 20%;
  top: 20%;
  right: 20%;
  bottom: 20%;
  background: url(http://agstudio.pro/project/barba/02.jpeg) center / cover;
}
<div class="img-cont"></div>

Есть у нас разные разрешения, от телефонов, до 4К экранов. В подобных ситуациях идем на поводу у поисковиков и всеми возможными способами пытаемся подрезать размеры и качество изображений. Про компрессию речь сейчас не идет. Только о разрешениях.

Итак, как лучше записать размерность в этом случае? Для .img-cont задать минимальное изображение, а затем от малого через медиа-запросы повышать размерность для разных диапазонов?

@media screen and (min-width: 600px) and (min-height: 500px) {
.img-cont {background-image: url(.../02small.jpeg)}
}
@media screen and (min-width: 800px) and (min-height: 600px) {
.img-cont {background-image: url(.../02middle.jpeg)}
}
@media screen and (min-width: 1200px) and (min-height: 700px) {
.img-cont {background-image: url(.../02big.jpeg)}
}

Или же задать усредненное разрешение? Или разницы нет?

Второй момент. Есть ли вообще смысл так заморачиваться? Или достаточно будет поставить минимальный размер как стандарт, а одним медиа-запросом поставить большое разрешение для всех кроме телефонов?

Подгружаются ли все эти изображения из таблицы стилей при загрузке? Или только при отправке запроса? То есть, лучше поставить 1-2 варианта размерности или же большее количество?

Если есть еще советы по работе с изображениями на разных разрешениях экрана, буду благодарен.

1 ответ 1

4

Для устройств с экранами высокого разрешения: добавьте к элементу img атрибут srcset. Этот атрибут расширяет функциональные возможности элемента img. позволяет браузеру выбирать наиболее подходящее изображение в зависимости от характеристик устройства. Например, использовать изображения 2x на экране 2x и, потенциально, изображения 1x на устройстве 2x при ограниченной пропускной способности сети:

<img src="photo.png" srcset="[email protected] 2x" ...> 

Если браузер не поддерживает атрибут srcset, по умолчанию файл с изображением импортируется с помощью атрибута src. Вот почему так важно включать изображение 1x, которое может отображаться на любых устройствах, независимо от их свойств. Если браузер поддерживает атрибут srcset, вы можете определять список источников изображений и условий (через запятую) до поступления запроса. В результате загружаются и выводятся на экран только те изображения, которые соответствуют параметрам устройства. Вы можете задать любые условия, от плотности пикселей до ширины и высоты изображения, однако в настоящий момент хорошо поддерживается только параметр плотности пикселей. Чтобы текущие функциональные возможности не вошли в противоречие с будущими разработками, продолжайте назначать этому атрибуту изображение 2x. Если вы хотите, чтобы изображения менялись в зависимости от характеристик устройства (эффект art direction), воспользуйтесь элементом picture. Элемент picture задает декларативное решение для обеспечения нескольких версий одного изображения в зависимости от различных характеристик устройства: размера, разрешения, назначения и т. д. Используйте элемент picture, если у источника изображения несколько вариантов плотности пикселей, а также если в рамках отзывчивого веб-дизайна для некоторых типов экранов назначаются изображения с различающимися характеристиками. Вы можете указать несколько элементов source и назначать разные файлы изображений для разных медиазапросов или форматов изображений:

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

В приведенном выше примере при ширине браузера не менее 800 пикселей будет использован формат head.jpg или head-2x.jpg (в зависимости от разрешения экрана устройства). Если ширина браузера от 450 до 800 пикселей, применяются форматы head-small.jpg или head-small-2x.jpg (также в зависимости от разрешения экрана устройства). Если речь идет о ширине экрана менее 450 пикселей и устройстве с нисходящей совместимостью, элемент picture поддерживаться не будет. В этом случае для вывода изображения на экран браузер использует элемент img (он должен быть включен). Оригинал статьи Гугл об этом + Примеры Art-direction.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.