18.10.2021
0afce1f47520278aa810940bf112390b

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

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

От создателя: функция CSS image-set() поддерживается в браузерах на базе Chromium с 2012 года и в Safari с версии 6. Не так давно поддержка появилась в Firefox 88. Давайте погрузимся в сущность вопроса и посмотрим, что можно и чего нельзя делать с image-set().

Несколько разрешений 1-го и того же изображения

Вот что сказано в спецификации CSS об image-set():

Обеспечение более подходящего разрешения изображения для устройства юзера может быть сложной задачей. В эталоне изображения должны иметь такое же разрешение, что и устройство, на котором они просматриваются, которое может варьироваться в зависимости от юзера. Однако другие факторы могут повлиять на решение о том, какое изображение выслать; например, если пользователь использует медленное мобильное соединение, он может предпочесть получать изображения с низким разрешением, а не ожидать загрузки большого изображения с надлежащим разрешением.

По сущности, это CSS эквивалент атрибуту HTML srcset для тегов img. Используя image-set мы можем обеспечить несколько разрешений изображения и предоставить выбор наилучшего решения браузеру. Это может быть применено для определения значений трех различных параметров CSS: content, cursor и самого полезного из всех, background-image.

CSS

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

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

CSS

Сейчас пользователи дорогих модных устройств увидят сверхчеткое изображение. Производительность будет усовершенствована для пользователей с медленным подключением либо с более дешевыми экранами, поскольку их браузер автоматом будет запрашивать изображение с более низким разрешением. Если вы желаете быть уверены, что изображение с высочайшим разрешением будет использоватся на устройствах с высочайшим разрешением даже при медленных соединениях, вы сможете использовать медиа-запрос min-resolution вместо image-set.

Это достаточно круто, но на самом деле я желаю иметь возможность использовать последние форматы изображений в CSS, но при этом поддерживать старенькые браузеры …

Новые форматы изображений

Safari 14 уже поддерживает WebP. Это был последний современный браузер, который включил поддержку WebP, а это означает, что формат изображений теперь поддерживается всюду (кроме Internet Explorer). WebP полезен тем, что может создавать изображения, которые нередко меньше (но того же качества), что и JPG, PNG либо GIF.

Также появляется огромное количество новых форматов изображений. Изображения в формате AVIF великолепно крошечные. Chrome, Opera, Firefox и Самсунг Internet уже предоставили поддержку AVIF. Этот формат изображения пока не поддерживается многими инструментами дизайна, но вы сможете конвертировать изображения в AVIF с помощью приложения Squoosh, сделанного командой Chrome в Google. WebP 2, HEIF и JPEG XL также имеют возможность в конечном итоге попасть в браузеры. Все это достаточно интересно, но мы хотим, чтобы браузеры, не поддерживающие эти новые форматы, как-то получали изображения. К счастью для этого есть image-set().

Внедрение новых форматов изображений путем указания типа

Примечание о поддержке браузера: функция image-set о которой я собираюсь поведать, в настоящее время имеет довольно нехорошую поддержку браузера. В настоящее время он поддерживается только в Firefox 89.

HTML поддерживает элемент <picture> уже много лет.

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

CSS

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

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

CSS

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

CSS

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

Внедрение <picture> для фона

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

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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *