От автора: функция CSS image-set() поддерживается в браузерах на основе Chromium с 2012 года и в Safari с версии 6. Недавно поддержка появилась в Firefox 88. Давайте погрузимся в суть вопроса и посмотрим, что можно и чего нельзя делать с image-set().
Несколько разрешений одного и того же изображения
Вот что говорится в спецификации CSS об image-set():
Обеспечение наиболее подходящего разрешения изображения для устройства пользователя может быть сложной задачей. В идеале изображения должны иметь такое же разрешение, что и устройство, на котором они просматриваются, которое может варьироваться в зависимости от пользователя. Однако другие факторы могут повлиять на решение о том, какое изображение отправить; например, если пользователь использует медленное мобильное соединение, он может предпочесть получать изображения с низким разрешением, а не ждать загрузки большого изображения с надлежащим разрешением.
По сути, это CSS эквивалент атрибуту HTML srcset для тегов img. Используя image-set мы можем обеспечить несколько разрешений изображения и предоставить выбор лучшего решения браузеру. Это может быть использовано для определения значений трех различных свойств CSS: content, cursor и самого полезного из всех, background-image.
.hero { background-image: image-set("platypus.png" 1x, "platypus-2x.png" 2x);
}1x — используется для определения изображения с низким разрешением, а 2x — для определения изображения с высоким разрешением. X является псевдонимом dppx, который обозначает количество точек на пиксель.
Chrome / Edge / Opera в настоящее время требуют префикса -webkit. Если вы используете Autoprefixer, это будет сделано автоматически. Safari больше не требует префикса, но использует старый синтаксис, который требует url() функции для указания пути к изображению. Мы также имеем возможнось включить обычный старый background-image:url() для поддержки любых браузеров, которые не поддерживают image-set.
.hero { /* Fallback */ background-image: url("platypus.png"); /* Chrome/Edge/Opera/Samsung, Safari will fallback to this as well */ background-image: -webkit-image-set(url("platypus.png") 1x, url("platypus-2x.png") 2x); /* Standard use */ background-image: image-set("platypus.png" 1x, "platypus-2x.png" 2x);
}Теперь пользователи дорогих модных устройств увидят сверхчеткое изображение. Производительность будет улучшена для пользователей с медленным подключением или с более дешевыми экранами, поскольку их браузер автоматически будет запрашивать изображение с более низким разрешением. Если вы хотите быть уверены, что изображение с высоким разрешением будет использоватся на устройствах с высоким разрешением даже при медленных соединениях, вы можете использовать медиа-запрос min-resolution вместо image-set.
Это довольно круто, но на самом деле я хочу иметь возможность использовать последние форматы изображений в CSS, но при этом поддерживать старые браузеры …
Новые форматы изображений
Safari 14 уже поддерживает WebP. Это был последний современный браузер, который включил поддержку WebP, а это значит, что формат изображений теперь поддерживается повсюду (кроме Internet Explorer). WebP полезен тем, что может создавать изображения, которые часто меньше (но того же качества), что и JPG, PNG или GIF.
Также появляется множество новых форматов изображений. Изображения в формате AVIF потрясающе крошечные. Chrome, Opera, Firefox и Samsung Internet уже предоставили поддержку AVIF. Этот формат изображения пока не поддерживается многими инструментами дизайна, но вы можете конвертировать изображения в AVIF с помощью приложения Squoosh, созданного командой Chrome в Google. WebP 2, HEIF и JPEG XL также могут в конечном итоге попасть в браузеры. Все это довольно интересно, но мы хотим, чтобы браузеры, не поддерживающие эти новые форматы, как-то получали изображения. К счастью для этого есть image-set().
Использование новых форматов изображений путем указания типа
Примечание о поддержке браузера: функция image-set о которой я собираюсь рассказать, в настоящее время имеет довольно плохую поддержку браузера. В настоящее время он поддерживается только в Firefox 89.
HTML поддерживает элемент <picture> уже много лет.
<picture> <source srcset="./kitten.avif" type="image/avif"> <img src="./kitten.jpg" alt="a small kitten"> </picture>
image-set предоставляет эквивалент CSS, позволяющий использовать форматы изображений следующего поколения, указав тип изображения MIME:
.div1 { background-image: image-set( "kitten.avif" type("image/avif"), "kitten.jpg" type("image/jpeg") );
}Изображение нового поколения идет первым, а резервное изображение для старых браузеров — вторым. Будет загружено только одно изображение. Если браузер не поддерживает AVIF, он проигнорирует его и загрузит только второе указанное вами изображение. Если поддерживается AVIF, резервное изображение игнорируется.
В приведенном выше примере мы использовали изображение AVIF и предоставили JPEG в качестве запасного варианта, но запасным вариантом может быть любой широко поддерживаемый формат изображения. Вот пример использования PNG.
.div2 { background-image: image-set( "puppy.webp" type("image/webp"), "puppy.png" type("image/png") );
}В Chromium и Safari указание type пока не поддерживается. Это означает, что вы можете использовать image-set только для указания различных разрешений широко поддерживаемых форматов изображений, но не для добавления обратной совместимости при использовании WebP или AVIF в этих браузерах. Должна быть возможность предоставить как несколько разрешений, так и несколько форматов изображений:
.div2 { background-image: image-set( "puppy.webp" type("image/webp") 1x, "puppy2x.webp" type("image/webp") 2x, "puppy.png" type("image/png") 1x, "puppy2x.png" type("image/png") 2x );
}Надеюсь, поддержка браузеров скоро улучшится.
Использование <picture> для фона
Может, вам совсем не нужно background-image. Если вы хотите использовать современные форматы изображений, вы можете использовать элемент <picture>, который лучше поддерживается браузером. Если вы установите для изображения значение position: absolute, поверх него легко отобразить другие элементы.
В качестве альтернативного подхода к использованию position:absolute, сетка CSS — еще один простой способ перекрытия элементов HTML.
Автор: Ollie Williams
Источник: css-tricks.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен