[CSS, HTML] Новые форматы графики в CSS с помощью обновлённой функции image-set (перевод)

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

news_bot ^® написал(а)
03-Июл-2021 03:30

Цитировать

Перевод статьи Ollie Williams "Using Performant Next-Gen Images in CSS with image-set"CSS функция image-set поддерживается в браузерах на основе Chromium с 2012 года, а Safari начиная с версии 6. Недавно поддержка появилась в Firefox 88. Давайте углубимся в эту тему и посмотрим, что мы можем и чего не можем делать с помощью функции image-set () Несколько расширений одного и того же изображенияВот что говорится в спецификациио функции 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 / Samsung Internet в настоящее время работают только с префиксом -webkit-. Если вы используете Autoprefixer, то он подставит этот префикс за вас. В Safari функция image-set не требует префикса -webkit-, но использует старый синтаксис, который требует чтобы функция url() указывала путь к изображению.

.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 поддерживается везде (кроме IE). Главное преимущество webp в том, что он весит меньше чем (но при этом имеет такое же качество) JPG, PNG, или GIF.Также, появляется всё больше и больше новых форматов изображений. Например, изображения в формате AVIF имеют невероятно маленький размер. Chrome, Opera и Samsung Internet уже поддерживают этот формат. В Firefox AVIF доступен за флагом. Этот формат изображений пока не поддерживается многими дизайн инструментами, но вы уже можете конвертировать изображения в AVIF формат с помощью приложения Squoosh, созданного командой Google. WebP 2, HEIF и JPEG XL также, в конечном итоге появятся в браузерах. Все это довольно интересно, но мы хотим чтобы браузеры, которые не поддерживают эти новые форматы, получали изображения в другом формате. К счастью, у image-set() есть для этого синтаксис. Использование новых форматов изображений путем указания типа HTML уже много лет поддерживает тег<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 указание типа пока не поддерживается. Это значит, что вы можете использовать функцию 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> для фона Возможно, вам вообще не нужно фоновое изображение. Если вы хотите использовать современные форматы изображений, вы можете использовать тег <picture>, который лучше поддерживается браузерами. Если вы установите для изображения position: absolute, поверх него легко можно будет отобразить другие элементы.
===========
Источник:
habr.com
===========
===========
Автор оригинала: Ollie Williams
===========Похожие новости:

Теги для поиска: #_css, #_html, #_css, #_imageset, #_css, #_html

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 14:50
Часовой пояс: UTC + 5