Полное руководство по использованию формата изображений 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, которую вы должны проверить, прежде чем мы перейдем к забавным вещам.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Эксперимент

Лучшее в заявлениях в Интернете заключается в том, что мы всегда можем проводить эксперименты, чтобы проверить правдивость и достоверность. Вот несколько экспериментов, которые я провел, чтобы выяснить, насколько маленькое изображение может потенциально получиться после его преобразования из различных графических форматов (JPEG, PNG и GIF) в WebP.
1. JPEG – изображение с потерями
Вот случайное изображение JPEG, которое я взял Pexels, Исходный размер файла – 165 КБ. ↓
Изображение оптимизировано с JpegMini, Новый размер файла – 101 КБ, ↓
Наконец, то же изображение преобразуется в формат WebP. Окончательный размер файла –
70kb, ↓
Примечание: вот различные размеры файлов, если одно и то же изображение было преобразовано в следующие форматы:

GIF – 285kb
PNG 8 – 241.2kb
PNG 24 – 657.6kb

PNG – изображение без потерь
Теперь давайте попробуем с PNG с прозрачностью. (Источник). Исходный размер файла – 587 КБ, ↓
Вот изображение, оптимизированное с tinypng, Новый размер файла – 278 КБ, ↓

И, наконец, изображение конвертируется в формат WebP. Конечный размер файла – 112 КБ, ↓
3. Анимированный GIF
При преобразовании в WebP размер изображения JPEG вырос с 165 до 70 КБ, а изображения PNG – с 587 до 112 КБ.

Давайте посмотрим, как живут анимированные GIF-файлы:
Резюме:
Вот таблица для подведения итогов всего эксперимента:

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, затем выполните следующие действия:

Загрузить и установить MacPorts, Если на вашем Mac уже установлены MacPorts, перейдите к шагу 2.
Запустить терминал.
Введите “sudo port selfupdate” и нажмите ввод. Это обновит ваш MacPorts до последней версии.
Затем введите «sudo port install webp» и нажмите ввод. Это установит libwebp (Библиотека WebP).

Это оно. Теперь давайте посмотрим, как конвертировать изображения в WebP с помощью командной строки.
Команды для преобразования / возврата
Вот команды для:

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

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

Пример:
cwebp -q 80 example.png -o example.webp

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

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

Пример:
dwebp image.webp -o image.png

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

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

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

Подсказка: если вы конвертируете webp в Интернете, вы, вероятно, найдете больше вариантов.

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

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

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

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

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

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

Не так много удачи для FireFox и Safari, которые до сих пор не поддерживают формат WebP. Тем не менее, вы можете использовать WebPJS Библиотека Javascript для преобразования изображений WebP в строку dataURI на сайте клиента.
Вернуться к другим форматам изображений
Всегда полезно использовать запасной вариант, чтобы избежать ошибок изображения из-за неподдерживаемых браузеров. В этом случае отступление будет к изображению в формате JPG или PNG. Вот как ты это делаешь.

Для этого кода example.jpg будет загружен, если пользователь использовал Firefox или Safari.

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

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

Пользователи Mac могут использовать WebPQuickLook для предварительного просмотра изображений в формате WebP с помощью функции быстрого просмотра (когда изображение выделено или выделено, нажмите пробел).
Для пользователей Windows, WebPCodec отобразит предварительный просмотр изображений WebP в проводнике. Будут показаны как эквиваленты WebP, так и JPEG. В некоторых поддерживаемых ОС Windows (Vista, 7, 8) изображение WebP также может отображаться в средстве просмотра фотографий Windows.
Больше: ReSCR.it доставляет изображения в формате WeBP автоматически, и это доступно, если вы храните изображения с MaxCDN, (Читать далее)