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

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

Вкратце, вот некоторые важные вещи, которые вам нужно знать об этом не слишком новом, но все же классном формате изображения:

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

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

Эксперимент

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

1. JPEG - изображение с потерями

Вот случайное изображение JPEG, которое я получил от Pexels. Исходный размер файла - 165Kb. ↓

Изображение оптимизировано с помощью JpegMini. Новый размер файла - 101kb. ↓

Наконец, то же изображение преобразуется в формат WebP. Конечный размер файла - 70kb. ↓

На примечании стороны: Вот различные размеры файлов, если одно и то же изображение было преобразовано в следующие форматы:

• GIF - 285kb
• PNG 8 - 241.2kb
• PNG 24 - 657.6kb

2. PNG - изображение без потерь

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

Вот изображение, оптимизированное с tinypng. Новый размер файла - 278KB. ↓

И, наконец, изображение, преобразованное в формат WebP. Конечный размер файла - 112Kb. ↓

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

При преобразовании в WebP размер изображения JPEG вырос с 165 до 70 КБ, а изображения PNG - с 587 до 112 КБ..

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

• Исходный размер файла - 6,8 Мб
• Размер файла WebP - 6,3 Мб

Резюме:

Вот таблица для подведения итогов всего эксперимента:

	Lossy (JPG)	Без потерь (PNG)	Анимированные GIF-
оригинал	165Kb	587kb	6.8mb
Оптимизирован с помощью инструментов	101kb	278KB	-
Формат WebP	70kb	112Kb	6.3MB

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

Преобразование в WebP с помощью инструментов

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

WebPonize за макинтош

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

Webpconv за Windows

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

Преобразование с помощью командных строк

Если вы чувствуете себя отвратительно, возможно, вы захотите извинить преобразование с помощью командной строки. cwebp преобразует изображения JPEG, PNG или TIFF в формат WebP и dwebp преобразует их обратно в формат PNG. Посмотрим, как это работает.

Замечания: Следующее руководство для Mac OS X. Для пользователей Windows и Linux, нажмите здесь.

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

Сначала убедитесь, что у вас установлен Xcode, затем выполните следующие действия:

1. Загрузите и установите MacPorts. Если на вашем Mac уже установлены MacPorts, перейдите к шагу 2.
2. запуск Терминал.
3. Тип "самообновление порта sudo"и нажмите Enter. Это обновит ваш MacPorts до последней версии.

   

4. Далее введите "порт sudo установить webp"и нажмите Enter. Это установит libwebp (Библиотека WebP).

   

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

Команды для преобразования / возврата

Вот команды для:

I - Конвертировать файлы изображений JPEG / PNG в формат WebP

Формат: cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

пример:

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

II - скрыть файлы изображений WebP обратно в PNG

Формат: dwebp [WebP_filename] -o [PNG_filename]

пример:

dwebp image.webp -o image.png 

Больше: Если вы выполняете конвертирование другими способами, здесь приведены инструкции по использованию задач Grunt и Gulp для конвертации файлов JPG / PNG в WebP..

Конвертировать с онлайн-инструментами

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

• Online-converter.com
• Webp-convertor.com
• Zamzar

Совет: Если вы гуглите конвертировать webp онлайн , вы, вероятно, найдете больше вариантов.

Плагин фотошоп

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

ЗаметкаПросто подумал, что ты должен знать, что я попробовал это на Photoshop CC. Не работал там.

Поддержка браузера WebP

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

• Chrome / Chrome для iOS
• Опера / Опера Мини

Не так много удачи для Fire Fox а также Сафари, которые все еще не поддерживают формат WebP изначально. Тем не менее, вы можете использовать библиотеку WebPJS Javascript для конвертировать изображения WebP в строку dataURI на сайте клиента.

Вернуться к другим форматам изображений

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

  source srcset = "example.webp 1x" type = "image / webp">   

Для этого кода, Изображения / полны-руководство к использованию-WebP-образом-format_13.jpg будет загружен, если пользователь использовал Firefox или Safari.

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

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

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

Для пользователей Windows WebPCodec будет отображать миниатюру предварительного просмотра изображений WebP в проводнике. Будут показаны как эквиваленты WebP, так и JPEG. В некоторых поддерживаемых ОС Windows (Vista, 7, 8) изображение WebP также может отображаться в средстве просмотра фотографий Windows..

Больше: ReSCR.it доставляет изображения в формате WeBP автоматически, и это доступно, если вы сохраняете изображения с MaxCDN. (Прочитайте больше)

Дальнейшие ссылки

• Преобразование анимированного GIF в WebP
• Как работает WebP
• Развертывание WebP через Accept Content Negotiation
• Быстрее, меньше и красивее веб с WebP
• Развертывание новых форматов изображений в Интернете
• Документация по API WebP