Как время летит. Восемь лет назад я написал сообщение в блоге об эксперименте с изображениями WebP на веб-сайте End Point, чтобы описать и продемонстрировать, как формат изображения WebP может хранить изображение эквивалентного качества в гораздо меньшем размере файла, чем старые форматы JPEG, PNG и GIF.

Основным недостатком в то время было то, что среди основных браузеров только Chrome и Opera поддерживали WebP, а тогда Chrome был гораздо менее популярен, чем сейчас.

Могу ли я использовать его?

Поскольку iOS 14 и macOS 11 (Big Sur) от Apple стали доступны в конце 2020 года, формат изображений WebP теперь работает во всех поддерживаемых в настоящее время основных операционных системах и браузерах: Linux, Windows и macOS, работающих под управлением Chromium, Chrome, Brave, Edge, Opera, Firefox, и Safari.

Прошло всего около 10 лет! 😁

Таким образом, для вас, кто размещает веб-сайты, все посетители вашего сайта могут видеть изображения и анимацию WebP, за исключением тех, кто исчезает с помощью Internet Explorer (теперь его поддержка Microsoft давно закончилась и его использование опасно), и люди (или их организации), которые преднамеренно не разрешать обновлять свои старые браузеры и операционные системы.

Это означает, что вы можете продолжать использовать изображения JPEG, PNG и/или GIF в местах, имеющих решающее значение для отображения основных функций вашего сайта, чтобы люди могли понять основные вещи, которые ваш сайт пытается сообщить.

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

Как создавать изображения WebP?

Мобильные телефоны и цифровые камеры обычно сохраняют изображения в формате JPEG, HEIF или необработанные (несжатые) изображения. Некоторые коллекции стоковых фотографий можно загрузить через WebP, но многие по-прежнему используют JPEG.

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

GIMP (программа обработки изображений GNU) поддерживает изображения WebP примерно с 2017 года, а Adobe Photoshop изначально не поддерживает, но может использовать бесплатный плагин WebPShop.

Самый старый способ преобразования изображений в WebP, который до сих пор очень полезен для пакетной обработки или тонкой настройки, — это конвертер WebP от Google «cwebp».

Настройки cwebp

С мощными предложениями «cwebp» связаны некоторые сложности, но в основном они безвредны.

Запустите эту команду, чтобы увидеть множество вариантов:

cwebp -longhelp

Или прочтите то же самое в его онлайн-документации.

Там, среди прочего, вы увидите параметр -z, который активирует предустановленные функции для кодирования без потерь, с целочисленным уровнем, выбранным от 0 до 9, где 0 — самый быстрый, но сжимает меньше, а 9 — самый медленный, но сжимает лучше. Используйте это для замены файлов PNG, если вы вообще не хотите ухудшения качества изображения.

В документации также показаны полезные функции -presetи -hintпараметры сжатия с потерями, аналогичные тому, что делает JPEG, но лучше:

-preset <string> ....... preset setting, one of:

                          default, photo, picture,

                          drawing, icon, text



-hint <string> ......... specify image characteristics hint,

                         one of: photo, picture or graph

Значение некоторых из этих терминов, особенно «фото» и «изображение», было для меня неясным и не определялось нигде в документации, которую я мог видеть.

Чтобы выяснить это, мне пришлось быстро заглянуть в исходный код, и там есть комментарии, немного объясняющие вариант использования каждой опции:

Комментарии к варианту -preset:

WEBP_PRESET_PICTURE,  // digital picture, like portrait, inner shot

WEBP_PRESET_PHOTO,    // outdoor photograph, with natural lighting

WEBP_PRESET_DRAWING,  // hand or line drawing, with high-contrast details

WEBP_PRESET_ICON,     // small-sized colorful images

WEBP_PRESET_TEXT      // text-like

И комментарии к варианту -hint:

WEBP_HINT_PICTURE,    // digital picture, like portrait, inner shot

WEBP_HINT_PHOTO,      // outdoor photograph, with natural lighting

WEBP_HINT_GRAPH,      // Discrete tone image (graph, map-tile etc).

Короче говоря, «cwebp» считает «изображение» в помещении и крупным планом, а «фото» — на улице и, скорее всего, с более дальним фокусом. Это хорошо знать.

Пакетное преобразование

Имея это в виду, я могу преобразовать стопку скриншотов, которые были собраны на моем компьютере, чтобы обращаться к ним позже. Один из видов скриншотов, которые я иногда делаю, — это видеовстречи, на которых люди в основном смотрят в помещении. Для них я буду использовать предустановку «изображение».

Простой bashскрипт хорошо работает для обработки множества изображений подряд:

for infile in Screenshot*.png

do

    echo $infile

    base=$(basename "$infile" .png)

    cwebp -preset picture -v "$infile" -o "$base".webp

done

Если у вас есть много изображений для преобразования в WebP и вы хотите сделать несколько одновременно, чтобы сделать это быстрее, вы можете использовать GNU parallel.

Мои скриншоты при преобразовании из PNG в WebP постоянно занимают около 3% исходного пространства, в 33–35 раз меньше! И качество примерно такое же. Удивительно.

Конкуренты WebP

Другие новые форматы изображений также находились в разработке в течение многих лет, преследуя некоторые из тех же целей. Должны ли мы пропустить WebP и использовать вместо этого один из них?

HEIC

Подмножество HEIC (High-Efficiency Image Container) стандарта HEIF (High Efficiency Image File Format) использует высокоэффективное кодирование видео (HEVC, H.265) для хранения изображений с суффиксом .heic.

По сравнению с JPEG, HEIC предлагает приятные преимущества меньшего размера файла при том же уровне качества (примерно половина размера эквивалентного JPEG) и поддержку анимации (для замены GIF).

С другой стороны, HEIC обременен патентами, которые ограничивают его использование в крупных коммерческих проектах даже на устройствах, лицензированных для потребительского использования. Он также медленнее кодирует/декодирует. И, что касается архивариусов, HEIC показывает серьезное визуальное повреждение всего изображения, если часть файла повреждена. Напротив, в поврежденных файлах JPEG визуальное повреждение обычно локализовано в отдельных небольших квадратных областях, а не во всем изображении.

HEIC используется в операционных системах Apple с момента выпуска в 2017 году iPhone 7, iOS 11 и macOS 10.13 (High Sierra). Позднее поддержка была добавлена ​​в Windows 10, Android 9 и Ubuntu 20.04.

На момент написания этой статьи ни один из основных браузеров изначально не поддерживал HEIC , даже собственный Safari от Apple.

Так что на данный момент HEIC в основном используется Apple для более эффективного хранения фотографий на своих мобильных устройствах.

AVIF

AVIF (формат файла изображения AV1) конкурирует с HEIC и, что сбивает с толку, использует тот же формат файла контейнера HEIF, что и HEIC. Эта путаница на практике уменьшается за счет использования отдельного расширения файла..avif.

AVIF поддерживается в текущих версиях Chrome, Firefox и Opera. Поддержка была добавлена ​​в WebKit в 2021 году, но до сих пор не появилась в Safari. Он также работает в новых версиях VLC, GIMP, Windows, Android и т. д.

У Netflix есть очень подробный пост в блоге , в котором сравниваются AVIF и JPEG и демонстрируются многочисленные преимущества AVIF.

JPEG XL

Полусовместимый преемник JPEG уже давно находится в разработке, и JPEG XL, похоже, в конечном итоге займет эту роль.

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

Существующие файлы JPEG можно без потерь перекодировать в JPEG XL, значительно уменьшив их размер.

Сообщалось, что JPEG XL, как ожидается, станет доступен в своей окончательной стандартной форме в 2022 году, а поддержка уже доступна в предварительной форме в некоторых программах (см . статью об JPEG XL в Википедии ).

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

Используйте WebP прямо сейчас

Таким образом, все другие новые параметры еще не могут использоваться для обычных веб-изображений. WebP в настоящее время является очевидным выбором, хотите ли вы заменить фотографии JPEG с потерями, заменить без потерь изображения PNG или заменить анимацию GIF.

Наши разработчики настроили на сервере автоматическое преобразование высококачественных PNG-оригиналов в WebP или JPEG на стороне приложения на лету, при этом размер изображения зависит от размера области просмотра браузера. И мы работали с Cloudinary, Cloudflare и другими CDN, чтобы использовать их услуги преобразования изображений. Мы также готовы помочь с вашими проектами.