Школа
Веб-разработка

Как на сайте добавить фоновое, а не контентное, изображение через ЦСС, с учетом обычных экранов и ретины?

Подскажите, пожалуйста, как на сайте добавить фоновое, а не контентное, изображение через ЦСС, с учётом обычных экранов и ретины?

Читала про медиа‑запрос device‑pixel‑ratio, но не совсем поняла, как правильно им пользоваться и стоит ли пользоваться. Что можете сказать об этом медиа‑запросе? Или использовать <picture> и в нём указать параметры для разных экранов?

Кажется, ещё есть способ через Яваскрипт определять параметры экрана и выдавать нужную картинку, но я не знаю Яваскрипт. Как лучше поступить, чтобы работало быстро, выглядело хорошо на разных экранах и семантика не страдала? Пожалуйста, помогите разобраться.

Ирина Черкасова
13 окт 2022
👁 4181  
Веб-разработка

Как на сайте добавить фоновое, а не контентное, изображение через ЦСС, с учетом обычных экранов и ретины?

Подскажите, пожалуйста, как на сайте добавить фоновое, а не контентное, изображение через ЦСС, с учётом обычных экранов и ретины?

Читала про медиа‑запрос device‑pixel‑ratio, но не совсем поняла, как правильно им пользоваться и стоит ли пользоваться. Что можете сказать об этом медиа‑запросе? Или использовать <picture> и в нём указать параметры для разных экранов?

Кажется, ещё есть способ через Яваскрипт определять параметры экрана и выдавать нужную картинку, но я не знаю Яваскрипт. Как лучше поступить, чтобы работало быстро, выглядело хорошо на разных экранах и семантика не страдала? Пожалуйста, помогите разобраться.

Ирина Черкасова
13 окт 2022
👁 4181  
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 9
9
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Ирина!

Иногда картинку побольше нужно показывать не только на ретине, но и на обычных экранах с большим разрешением. Тогда медиа‑выражение можно дополнить правилом (min‑width: …px)

На 2022 год заклинание для ретины в ЦСС такое:

Иногда картинку побольше нужно показывать не только на ретине, но и на обычных экранах с большим разрешением. Тогда медиа‑выражение можно дополнить правилом (min‑width: …px)

/* Картинка по умолчанию */
.bg {
  background-image: url('bg.jpg');
}

/* Медиа-выражение для экранов с высокой плотностью пикселей. Состоит из нескольких условий, чтобы поддержать разные браузеры */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
   .bg {
     background-image: url('bg@2x.jpg');
   }
}

На мой вкус, работать с адаптивными картинками лучше не через ЦСС, а через тег picture и атрибут srcset. Он более семантичный и универсальный: подойдёт и для контентных и для фоновых картинок. А ещё так картинка гораздо лучше проиндексируется поисковиками.

Особенно отмечу частую задачу верстальщика — вёрстку ХТМЛ‑шаблонов для сайтовых движков, вроде Вордпреса или Битрикса. На таких сайтах картинки загружают через админку, а движок подставляет ссылки на них в шаблоны. И подставить их будет гораздо проще в ХТМЛ, чем в ЦСС. Поэтому и тут выигрывают picture и srcset.

Недостаток picture и srcset — запутанный и сложный для понимания синтаксис. Я разберу его с примерами в следующих советах.

А решать эту задачу Яваскриптом не советую. Это лишний геморрой и потенциальные проблемы с индексацией в поисковиках. Хоть поисковики потихоньку и учатся распознавать содержимое, генерируемое Яваскриптом, старый добрый img с альтом гораздо надёжнее и проще.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 9
9
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы