22
Июл
2021

Использование эффективных изображений в 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.

.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, Яндекс.Дзен

Источник: https://webformyself.com/ispolzovanie-effektivnyx-izobrazhenij-v-css-s-pomoshhyu-image-set/

Тебе может это понравится...

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