Полное Руководство по использованию формата изображений WebP

WebP (неофициально называют как weppy) - формат изображений созданный Google Developers около 5 лет назад. Если вы веб-дизайнер или разработчик, который стремится к снижению и оптимизации размера файла изображений, WebP способен вызвать улыбку на вашем лице.

Вкратце перечислим одни из самых важных особенностей, которые вы должны знать об этом не так-новом-но все еще малоизвестном формате изображений:

  • WebP имеет расширение файла .webp.
  • WebP может сжимать как с потерями, так и без потерь.
  • WebP с потерями изображения на 25-34% меньше, чем оригинальное в JPEG.
  • WebP без потерь изображения на 25% меньше по сравнению с оригинальным в PNG.
  • WebP может сжимать без потерь прозрачности, т.е. PNG с альфа-каналом.
  • WebP поддерживает анимацию. т.е. анимированные GIF.

В двух словах, WebP способен существенно снизить размер файла изображения JPEG, GIF, PNG.

Эксперимент

Давайте проведем эксперимент, чтобы проверить правдивость и достоверность данного формата. Вот некоторые эксперименты, которые я сделал, чтобы выяснить, как небольшое изображение WebP будет выглядеть, после перевода из различных графических форматов (JPEG, PNG и GIF).

1. JPEG в WebP с потерями

Вот случайное JPEG изображение которое я нашел в сети. Оригинальный размер файла - 165Кб.

Это же изображение оптимизированное в JpegMini. Новый размер файла - 101Кб.

И наконец, тоже самое изображение конвертированное в формат WebP. Финальный размер изображения – 70Кб.

2. PNG в WebP без потерь

Теперь, давайте попробуем с PNG и прозрачностью. (Источник). Оригинальный размер файла - 587Кб.

Изображение оптимизированное в tinypng. Новый размер файла - 278Кб.

PNG изображение конвертированное в формат WebP. Финальный размер файла - 112Кб.

3. Анимированный GIF в WebP

При конвертировании в WebP, JPEG уменьшился от 165Кб до 70Кб, PNG уменьшился от 587Кб до 112Кб.

Давайте посмотрим на анимированные GIF:

Итог

 JPG с потерямиPNG без потерьАнимированный GIF
Оригинальный 165Кб 587Кб 6.8Мб
Оптимизированный 101Кб 278Кб -
Формат WebP 70Кб 112Кб 6.3Мб

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

Инструменты конвертирования в WebP

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

WebPonize для Mac

WebPonize, вероятно самый простой и быстрый способ конвертировать изображения в формат WebP на Mac. Все что вам нужно сделать, это просто перетащить изображения в WebPonize и он выполнит всю оставшуюся работу. В результате вы увидите, размеры до и после конвертирования и % уменьшения исходного файла. [Скачать WebPonize]

Webpconv для Windows

Если вы работаете на Windows, то для вас скорее всего подойдет приложение Webpconv. Также существует портативная версия данного приложения, так что вы можете запустить его с флэш-накопителя. [Скачать Webconv]

Конвертирование WebP из командной строки

Вы также можете выполнить конвертацию из командной строки. Команда cwebp преобразует JPEG, PNG или TIFF изображения в формат WebP, а команда dwebp преобразует их обратно в оригинальный формат. Давайте посмотрим, как это работает.

Настройка MacPorts на Mac OSX

Первым делом, вы должны установить Xcode.

1. Скачайте и установите MacPorts.

2. Запустите терминал.

3. Введите команду sudo port selfupdate, это обновит MacPorts до последней версии.

4. Далее введите команду sudo port install webp. Это установит библиотеку libwebp.

Теперь давайте посмотрим как конвертировать изображения в WebP с помощью командной строки.

Команды конвертирования

Конвертирование JPEG / PNG изображения в формат WebP

Формат:

cwebp -q [image_quality] [JPEG/PNG_filename] -o [WebP_filename]

Пример:

cwebp -q 80 example.png -o example.webp

Обратная конвертация из WebP в PNG

Формат:

dwebp [WebP_filename] -o [PNG_filename]

Пример:

dwebp image.webp -o image.png

Вы также можете конвертировать при помощи Grunt и Gulp.

Онлайн конвертирование WebP

Если вы не хотите устанавливать приложения на свой компьютер для выполнения конвертации, делайте выбор в пользу онлайн инструментов. Вот некоторые из них:

Photoshop плагин для конвертирования в WebP

Также вы должны знать, что существует плагин для Photoshop, который позволяет сохранять изображения в формате WebP с помощью Photoshop. Этот плагин поддерживает Mac OS X (CS 2- CS 6) и Windows (32 bit & 64 bit). [Скачать плагин.]

Поддержка формата WebP браузерами

Наконец, давайте поговорим о совместимости. В настоящее время, вы можете просматривать изображения в формате WebP на следующих браузерах (ссылка):

  • Chrome / Chrome для iOS
  • Opera / Opera Mini

У FireFox и Safari до сих пор нет поддержки формата WebP. Тем не менее, вы можете использовать Javascript библиотеку WebPJS для преобразования WebP изображений в строку dataURI.

Fallback WebP

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

<picture>
    source srcset="example.webp 1x" type="image/webp">
    <img src="/example.jpg">
</picture>

Предварительный просмотр WebP изображений

Вы можете просматривать изображения WebP в браузерах Chrome и Opera. Но если вы хотите сделать это локально, на вашем компьютере, вам понадобится несколько инструментов.

Пользователи Mac могут использовать WebPQuickLook для просмотра изображений в формате WebP, используя функцию быстрого просмотра (удерживайте пробел на выбранном изображении).

Для пользователей Windows, есть приложение WebPCodec которое отображает эскизы WebP изображений в проводнике. Поддерживает Windows OS (Vista, 7, 8).

Перевод статьи Complete Guide to Using WebP Image Format

Тэги: webpimagejpegpnggif

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.