Ирина!

Иногда картинку побольше нужно показывать не только на ретине, но и на обычных экранах с большим разрешением. Тогда медиа‑выражение можно дополнить правилом (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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

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