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