Использование эффективных изображений в CSS с помощью image-set()

Использование эффективных изображений в CSS с помощью image-set()

От автора: функция 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.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

1x — используется для определения изображения с низким разрешением, а 2x — для определения изображения с высоким разрешением. X является псевдонимом dppx, который обозначает количество точек на пиксель.

Chrome / Edge / Opera в настоящее время требуют префикса -webkit. Если вы используете Autoprefixer, это будет сделано автоматически. Safari больше не требует префикса, но использует старый синтаксис, который требует url() функции для указания пути к изображению. Мы также имеем возможнось включить обычный старый background-image:url() для поддержки любых браузеров, которые не поддерживают image-set.

Теперь пользователи дорогих модных устройств увидят сверхчеткое изображение. Производительность будет улучшена для пользователей с медленным подключением или с более дешевыми экранами, поскольку их браузер автоматически будет запрашивать изображение с более низким разрешением. Если вы хотите быть уверены, что изображение с высоким разрешением будет использоватся на устройствах с высоким разрешением даже при медленных соединениях, вы можете использовать медиа-запрос 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> уже много лет.

image-set предоставляет эквивалент CSS, позволяющий использовать форматы изображений следующего поколения, указав тип изображения MIME:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Изображение нового поколения идет первым, а резервное изображение для старых браузеров — вторым. Будет загружено только одно изображение. Если браузер не поддерживает AVIF, он проигнорирует его и загрузит только второе указанное вами изображение. Если поддерживается AVIF, резервное изображение игнорируется.

В приведенном выше примере мы использовали изображение AVIF и предоставили JPEG в качестве запасного варианта, но запасным вариантом может быть любой широко поддерживаемый формат изображения. Вот пример использования PNG.

В Chromium и Safari указание type пока не поддерживается. Это означает, что вы можете использовать image-set только для указания различных разрешений широко поддерживаемых форматов изображений, но не для добавления обратной совместимости при использовании WebP или AVIF в этих браузерах. Должна быть возможность предоставить как несколько разрешений, так и несколько форматов изображений:

Надеюсь, поддержка браузеров скоро улучшится.

Использование <picture> для фона

Может, вам совсем не нужно background-image. Если вы хотите использовать современные форматы изображений, вы можете использовать элемент <picture>, который лучше поддерживается браузером. Если вы установите для изображения значение position: absolute, поверх него легко отобразить другие элементы.

В качестве альтернативного подхода к использованию position:absolute, сетка CSS — еще один простой способ перекрытия элементов HTML.

Автор: Ollie Williams

Источник: css-tricks.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.