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

Опубликовано Июл 22, 2021

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

Сейчас читают

Содержание статьи:

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

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

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

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

CSS .hero { background-image: image-set(“platypus.png” 1x, “platypus-2x.png” 2x); }

123	.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.

CSS .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); }

12345678910

.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> уже много лет.

1234	<picture> <source srcset=”./kitten.avif” type=”image/avif”> <img src=”./kitten.jpg” alt=”a small kitten”> </picture>

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

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

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

CSS .div1 { background-image: image-set( “kitten.avif” type(“image/avif”), “kitten.jpg” type(“image/jpeg”) ); }

123456

.div1 { background-image: image-set( “kitten.avif” type(“image/avif”), “kitten.jpg” type(“image/jpeg”) );}

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

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

CSS .div2 { background-image: image-set( “puppy.webp” type(“image/webp”), “puppy.png” type(“image/png”) ); }

123456

.div2 { background-image: image-set( “puppy.webp” type(“image/webp”), “puppy.png” type(“image/png”) );}

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

CSS .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 ); }

12345678

.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 );}

CodePen Embed Fallback

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

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

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

CodePen Embed Fallback

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

CodePen Embed Fallback

Автор: Ollie Williams

Источник: webformyself.com