Как добавить поддержку webp в браузер Safari

Формат webp на сегодняшний день не поддерживается Safari, и я не уверен, планируется ли его реализация в ближайшем будущем. Но вы можете предоставить браузеру выбор, использовать ли webp или jpg так.

<picture>
  <source srcset="
    /uploads/img_small.webp 1x,
    /uploads/img_big.webp 2x" type="image/webp">
  <source srcset="
    /uploads/img_small.jpg 1x, 
    /uploads/img_big.jpg 2x" type="image/jpeg">
  <img src="/uploads/img_small.jpg">
</picture>

Браузеры достаточно умны, чтобы загружать и использовать только самые лучшие из поддерживаемых изображений.

Официальная поддержка WebP была добавлена ​​в Safari 14 на macOS Big Sur, а также на iOS, iPadOS и другие устройства.

Источник: https://www.macrumors.com/2020/06/22/webp-safari-14

ОБНОВЛЕНИЯ: Firefox, наконец, на подножке имиджа. Вроде префикса тоже не требуется. Кроме того, Safari наконец-то поддерживает WEBP, поэтому это решение больше не является полезным.

У меня нет репутации комментирующего, но я хотел использовать (вероятно, темпераментное) решение для фона CSS в дополнение к опции <picture>.

На данный момент Safari (обе версии) - единственный основной браузер, не поддерживающий WEBP, < strong>, но это также кажется единственным браузером, который поддерживает image-set без префикса .

Итак, если мы используем три блока кода (что я обычно использую в сценариях с фоновым изображением), чтобы разрешить полный откат для всех браузеров, это будет выглядеть примерно так:

background-image: url("exampleimage.webp"); /* Firefox - UPDATE: no longer needed in FF 88+! */
background-image: -webkit-image-set(
            url("exampleimage.webp") 1x,
            url("[email protected]") 1.5x,
            url("[email protected]") 2x
        );
background-image: image-set(
            url("exampleimage.jpg") 1x,
            url("[email protected]") 1.5x,
            url("[email protected]") 2x
        ) /* Safari */

Поддержка формата изображений WebP доступна в Safari 14, и поддержка изображений WebP в более старых версиях Safari невозможна. Вы не можете просто изменить файлы webp, чтобы они работали с несовместимыми версиями Safari, которые его не поддерживают. Она не будет работать.

Итак, для более старых версий сафари ваше единственное решение - сохранить копию каждого изображения в формате PNG или JPG или использовать изображение CDN, чтобы сделать это автоматически. CDN изображений берут файл изображения (JPEG или PNG) и на лету конвертируют его в формат изображения webp, если браузер его поддерживает. В противном случае он доставляет изображение в формате JPEG или PNG, чтобы все работало без сбоев.