Ирина!
На 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 с альтом гораздо надёжнее и проще.