.webp расширение файла

Есть ли эффект от Webp?

Да, на личном опыте скажу, что эффект от применения формата Webp на сайте очевиден.

Google Page Speed убирает ошибку про современные форматы изображений.

Да и сайт грузится быстрее (особенно заметно на мобильном интернете когда много тяжелых картинок). Но даже если картинок всего 4, то всё равно несколько дополнительных баллов в Google Page Speed можно получить.

Внешне я сколько не смотрел никакого ухудшения качества при использовании Webp не заметил.

Попробуйте найти разницу:

Причем JPG был хорошо сжат в Photoshop и занимал всего около 200Кб, без дополнительного сжатия насколько я помню около 400Кб, а png этой же картинки — 1.3 М.
Если ужимать в сервисе tinypng.com — то исходный jpg занимал около 185Кб, но качество падало прямо ощутимо заметно, особенно красных оттенков.

Короче, я думал, что ужал по-максимуму.
Но Webp ужал еще в 2 раза!

Конечные мысли

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

WebP – это интересный формат. Так как это от Google, я ожидаю, что это в конечном счете завоевывает популярность. Это было с 2010 года, поэтому оно движется медленно. Экономия на размере файла и скорости загрузки делает целесообразным использование плагинов для конвертации изображений для тех посетителей, которые могут их использовать. Это бесплатная скорость.

WEBP Инструмент анализа файлов™

Вы не уверены, какой тип у файла WEBP? Хотите получить точную информацию о файле, его создателе и как его можно открыть?

Теперь можно мгновенно получить всю необходимую информацию о файле WEBP!

Революционный WEBP Инструмент анализа файлов сканирует, анализирует и сообщает подробную информацию о файле WEBP. Наш алгоритм (ожидается выдача патента) быстро проанализирует файл и через несколько секунд предоставит подробную информацию в наглядном и легко читаемом формате.†

Уже через несколько секунд вы точно узнаете тип вашего файла WEBP, приложение, сопоставленное с файлом, имя создавшего файл пользователя, статус защиты файла и другую полезную информацию.

Чтобы начать бесплатный анализ файла, просто перетащите ваш файл WEBP внутрь пунктирной линии ниже или нажмите «Просмотреть мой компьютер» и выберите файл. Отчет об анализе файла WEBP будет показан внизу, прямо в окне браузера.

Перетащите файл WEBP сюда для начала анализа

Просмотреть мой компьютер »

Пожалуйста, также проверьте мой файл на вирусы

Ваш файл анализируется… пожалуйста подождите.

— это формат изображения, разработанный Google в 2010 году. Он был создан как альтернатива форматам PNG и JPG. С помощью WebP можно создавать изображения гораздо меньших размеров, чем традиционные форматы JPG и PNG без ухудшения качества картинки.

Что такое WebP?

WebP — это графический формат Google с открытым исходным кодом. Они используют расширение файла .webp

Существует несколько вариантов изображений WebP, один из которых использует сжатие с потерями и сопоставим с изображениями JPEG, но с размером файла на 25-34% меньше. Изображения с потерями в WebP также поддерживают прозрачность, чего не могут делать JPEG.

Другой — формат без потерь WebP, который похож на формат изображения PNG, но с размером файла на 26% меньше .

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

WebP поддерживает следующее:

• Анимация
• Сжатие без потерь
• Сжатие с потерями
• Прозрачность альфа-канала

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

Бесплатный WebP

Фактически, если вы недавно использовали Google PageSpeed ​​Insights, вы, возможно, заметили сообщение о возможности « Служить изображениям в форматах следующего поколения ». Это способ Google подтолкнуть вас к принятию изображений WebP. (Если в Google PageSpeed ​​Insights появляется сообщение «изображения правильного размера», попробуйте масштабировать изображения.)

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

Существует несколько способов обойти эти проблемы раннего внедрения в WordPress, чтобы вы могли начать использовать изображения WebP. Для этого нам понадобится решение, которое будет:

1. Используйте конвертер WebP для преобразования существующих изображений в медиатеке в WebP, а также для будущих загрузок
2. Уметь определять, поддерживает ли браузер посетителя изображения WebP
3. Отдавать изображения WebP, если они поддерживаются, или устаревшие форматам файлов, таким как PNG или JPEG, если это не так.

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

Что такое WebP?

Как гласит одна мудрая википедия:

WebP
(произносится как англ. Weppy “Веппи”) — новый формат сжатия графических изображений с потерями и без потерь качества исходного файла.

Зачем нам что-то новое, когда есть старые и знакомые всем JPG и PNG? Как уверяют разработчики (а это не есть кто, а сама компания Google Inc), большинство современных изображений используются в Интернете боле десяти лет и основаны на технологиях прошлого века. Вот он как получается…

Сейчас же, технологии намного шагнули вперед, и надо что-то менять. И вот, инженеры Google решили проверить: нет ли возможности увеличить степень сжатия графических форматов

(тем самым, позволив картинкам загружаться еще быстрее) еще больше при сохранении существующего визуального качества..

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

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

Как использовать WebP на сайте

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

При этом нужна система с резервными вариантами (fallback), на случай, если пользовательский браузер не воспринимает WebP.

Проверка форматов браузера

Способ, где скрипт проверяет браузер на поддержку формата и при ее наличии отдает WebP.

Систему с резервными вариантами для WebP можно настроить через HTML5-элемент picture. Альтернативные форматы добавляют с помощью элемента source внутри picture. В дополнение нужно оставить и обычный img, он будет использован для браузеров, которые не поддерживают форматы файлов через picture:

<picture>
 <source type="image/webp" srcset="image.webp">
 <source type="image/jpeg" srcset="image.jpg">
 <img src="image.jpg" alt="Изображение">
</picture>

Атрибуты элемента source для определения формата и условий использования:

• type — MIME-тип формата;
• srcset — путь к файлу изображения, можно использовать несколько файлов с разными размерами и PPI — плотностью пикселей;
• sizes — список размеров каждого файла;
• media — запрос, определяющий источник для вывода картинки.

Специалист по оптимизации Деми Мурыч не советует использовать этот способ, так как он приведет к увеличению узлов в DOM-дереве на каждое изображение, а это увеличит расход памяти и замедлит скрипты.

Согласование при помощи заголовка Accept

Способ, подразумевающий использование заголовка Accept.

Браузеры передают заголовок Accept в виде строки. Для браузера Opera нужно указать все форматы:

Accept: text/html, application/xml;q=0.9, application/xhtml+xml,
image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1

Для Chrome нужно отдельно указать только WebP:

Accept: image/webp, */*;q=0.8

Можно настроить автоматическую передачу WebP с веб-сервера. Конфигурация в Nginx и Apache будет аналогичной. В файл конфигурации добавляем подобную запись:

location / {

 # проверка заголовка Accept и наличия версии файла в .webp 
  if ($http_accept ~* "webp")    { set $webp_accept "true"; }
  if (-f $request_filename.webp) { set $webp_local  "true"; }

 # если WebP есть, то передать Vary
  if ($webp_local = "true") {
    add_header Vary Accept;
  }

 # если клиент поддерживает WebP, то передать файл
  if ($webp_accept = "true") {
    rewrite (.*) $1.webp break;
  }
}

Если в Accept нет поддержки WebP, то сервер будет передавать файлы других форматов.

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

server {
  location / {
   
    if ($http_accept ~* "webp") { set $webp T; }
    proxy_cache_key $scheme$proxy_host$request_uri$webp;

    proxy_pass http://backend;
    proxy_cache my-cache;
  }
}

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

Зачем использовать анимированный WebP?

Преимущества анимированного WebP по сравнению с анимированным GIF

WebP поддерживает 24-битный цвет RGB с 8-битным альфа-каналом по сравнению с 8-битным цветом GIF и 1-битным альфа-каналом.
WebP поддерживает сжатие с потерями и без потерь; фактически, одна анимация может комбинировать кадры с потерями и без потерь. GIF поддерживает только сжатие без потерь. Методы сжатия с потерями в WebP хорошо подходят для анимированных изображений, созданных из реальных видео, которые становятся все более популярным источником анимированных изображений.
WebP требует меньше байтов, чем GIF  . Анимированные GIF, конвертированные в WebP с потерями, на 64% меньше, а WebP без потерь на 19%. Это особенно важно в мобильных сетях.
WebP занимает меньше времени для декодирования при наличии поиска. В режиме Blink прокрутка или изменение вкладок могут скрывать и отображать изображения, в результате чего анимация приостанавливается, а затем пропускается вперед в другую точку. Чрезмерное использование ЦП, приводящее к отбрасыванию кадров анимации, также может потребовать от декодера поиска вперед в анимации. В этих сценариях анимированный WebP занимает в 0,57 раза больше общего времени декодирования, чем GIF, что приводит к уменьшению задержки при прокрутке и более быстрому восстановлению после скачков загрузки ЦП. Это связано с двумя преимуществами WebP над GIF:Изображения WebP хранят метаданные о том, содержит ли каждый кадр альфа, что устраняет необходимость в декодировании кадра для такого определения. Это приводит к более точному выводу, от которого зависят предыдущие кадры, от которого зависит данный кадр, тем самым уменьшая ненужное декодирование предыдущих кадров.
Как и современный видеокодер, кодер WebP эвристически добавляет ключевые кадры через равные промежутки времени (чего не делает большинство кодеров GIF). Это значительно улучшает поиск в длинных анимациях. Чтобы упростить вставку таких кадров без значительного увеличения размера изображения, WebP добавляет флаг «метод наложения» для каждого кадра в дополнение к методу удаления кадров, который использует GIF. Это позволяет рисовать ключевой кадр так, как если бы все изображение было очищено до цвета фона, не заставляя предыдущий кадр быть полноразмерным.

Недостатки анимированного WebP по сравнению с анимированным GIF

В отсутствие поиска прямолинейное декодирование WebP требует больше ресурсов процессора, чем GIF. Lossy WebP занимает в 2,2 раза больше времени декодирования, чем GIF, а без потерь WebP — в 1,5 раза больше.
Поддержка WebP не так широко распространена, как поддержка GIF, которая является универсальной.
Добавление поддержки WebP в браузеры увеличивает площадь кода и поверхность атаки. В Blink это примерно 1500 дополнительных строк кода (включая библиотеку демпфирования WebP и декодер изображений на стороне Blink). Обратите внимание, что эта проблема может быть уменьшена в будущем, если WebP и WebM совместно используют более общий код декодирования или если возможности WebP включены в WebM.

Почему бы просто не поддерживать WebM в ?

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

Как открыть на ПК

Для просмотра и форматирования webp-данных можно воспользоваться некоторыми графическими редакторами и интернет-браузерами, к которым следует отнести:

• Opera;
• Adobe Photoshop;
• Google Chrome.

С подобным форматом можно работать и на других ОС, помимо Windows – Linux и Mac OS. Если при попытке открыть файл в обычном программном обеспечении для просмотра изображений выдается ошибка, значит была использована некорректная программа.

Adobe Photoshop

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

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

Подмена адреса

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

На объект необходимо два раза кликнуть левой кнопкой мыши, после чего изображение откроется в новой вкладке браузера. В адресной строке можно увидеть длинный адрес, а в конце три стандартных символа -rw. Их необходимо стереть и нажать «ввод» для повторного открытия данных в браузере. Теперь изображение обновится и откроется в исходном формате (JPEG или PNG).

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

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

Преобразование изображений в WebP для WordPress

Хотя вы можете конвертировать изображения в форматы следующего поколения перед загрузкой в ​​медиатеку WordPress, это не практично, если у вас много изображений.

Если вам нужно пойти по этому пути (возможно, вы хотите проверить производительность различных типов изображений), вы можете использовать конвертер WebP, такой как image.online-convert.com/convert-to-webp . Вы просто загрузите файл JPEG, PNG или GIF, подождите, пока он создаст WebP, а затем загрузите новое изображение.

Вы также можете загрузить и установить WebPonize для Mac  или Webpconv для Windows . Оба могут делать преобразования JPEG в WebP или PNG в WebP.

Для изображений WebP WordPress вы можете использовать SFTP для загрузки файлов WebP прямо в папку загрузки, минуя медиа-библиотеку.

Для удобства вы также можете разрешить WebP в медиатеке WordPress , изменив файл functions.php вашего сайта.

Массовое преобразование изображений WebP для WordPress

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

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

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

Вы также можете использовать командную строку. 

Google спешит на помощь

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

Создан он был Google еще в 2010 году специально для улучшенной оптимизации картинок. Работает же он со всеми известными уже форматами и на сегодняшний день в 2017 году является весьма хорошей альтернативой PNG или JPEG. Чтобы наглядно представить о чем мы вообще затеяли наш разговор, сравним качество картинки в JPEG и WebP при одинаковом проценте сжатия.

В приведенном выше примере визуальные различия практически отсутствуют, точнее они незаметны при сжатии на 70%. Но при этом версия JPEG весит 49,8 Kb, а версия WebP — 15 Kb
, соответственно, процент сжатия во втором случае можно увеличить, не опасаясь за большой размер файла. Не так уж и плохо, если учесть, что визуально они практически идентичны.

Возникает резонный вопрос: откроются и прогрузятся ли такие изображения на станице сайта в браузерах и каких именно. Поскольку формат WebP создан Google, то, соответственно, и поддержка в Chrome, Яндекс, Opera тоже есть. В целом же поддержка осуществляется в 90% браузерах, в том числе и мобильных версиях. Поддержки в IE и Edge по умолчанию, увы, нет.

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

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

Чем открыть формат WEBP, программы и браузеры

Итак, чем открыть формат WEBP? На самом деле здесь нет сложностей. Есть специальные программы для открытия формата:

1. Adobe Photoshop с плагином WebP File Format.
2. WebP Codec.
3. WebP File Format – этот плагин работает с форматом WEBP.
4. XnView.
5. Google Фото.

Браузеры поддерживающие формат WEBP:

• Opera;
• Mozilla Firefox;
• Google Chrome;
• Microsoft Edge;
• открывается в последней версии Яндекс браузера.

Рассмотрим на примере, как открыть WEBP через браузер. Для этого нажмите по картинке правой кнопкой мыши, выберите меню «Открыть с помощью» (Скрин 1).

Далее, кликните на браузер Google. После этого картинка должна открыться в этом браузере (Скрин 2).

В Яндексе и в других браузерах, картинка WEBP открывается по аналогии.

Лучшее приложение для открытия таких картинок – это Гугл Фото. Перейдите на сервис и войдите в Гугл аккаунт. Далее, загрузите туда изображение, с помощью кнопки «Загрузить». Нажмите по загруженной картинке, чтобы ее открыть в полноэкранном режиме.

Внедрение файлов изображений

Как мы говорили выше, почти все браузеры на текущий момент (середина мая 2017 года) поддерживают работу с WebP по умолчанию. Тем не менее, на компьютерах пользователей могут быть установлены старые версии браузеров или те, что не поддерживают формат. Существует два удобных варианта отображения картинок в WebP.

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

В чем существенная разница обеих библиотек? В первом случае img-тег

на страницах не меняется, вы просто сами меняете расширение файлов с JPEG на WebP. Во втором случае, формат WebP используется для представления изображения, в случае, если он поддерживается, а если нет, то заменяется на JPEG. При таком варианте придется изменять img-теги

на странницах, Автоматическая конвертация форматов происходит «налету», поэтому сказать, какой из них лучше работает — сложно.

Также можно использовать и код для файла.htaccess , который проверит поддержку браузером WebP и в случае отрицательного ответа заменит изображение на JPEG. При этом все изображения должны быть в одной папке и одного размера (ширина + высота).

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

Попробуйте мощный редактор фотографий

Как открыть на ПК

Для просмотра и форматирования webp-данных можно воспользоваться некоторыми графическими редакторами и интернет-браузерами, к которым следует отнести:

• Opera;
• Adobe Photoshop;
• Google Chrome.

С подобным форматом можно работать и на других ОС, помимо Windows – Linux и Mac OS. Если при попытке открыть файл в обычном программном обеспечении для просмотра изображений выдается ошибка, значит была использована некорректная программа.

Adobe Photoshop

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

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

Подмена адреса

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

На объект необходимо два раза кликнуть левой кнопкой мыши, после чего изображение откроется в новой вкладке браузера. В адресной строке можно увидеть длинный адрес, а в конце три стандартных символа -rw. Их необходимо стереть и нажать «ввод» для повторного открытия данных в браузере. Теперь изображение обновится и откроется в исходном формате (JPEG или PNG).

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

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

Зачем нужен WebP?

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

	WebP	PNG	JPG	GIF
Сжатие с потерями	+	+	+	—
Сжатие без потерь	+	+	+	+
Прозрачность	+	+	—	+
Анимация	+	—	—	+

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

WebP (78 Kb)

Что касается поддержки браузеров, то с каждым годом, если не полугодием, в мире в целом старые версии уходят в прошлое, как и старые версии Windows. Почти уже не используется XP, Vista, 7-ка. Аналогично и устаревшие браузеры, тем более, что почти все они обновляются автоматически, если установлены. Соответственно, поддержки WebP нет в единичных случаях, которые могут быть для проекта не так критичны.

С другой стороны, ведь существуют библиотеки и возможность использования JPEG дубляжей и конвертации «налету».

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

Еще один плюс — поддержка прозрачности (альфа-канал),
то есть аналогично PNG формату. И если в PNG картинка весит более 7 Mb, то в WebP около 700 Kb.

Релевантные каомодзи

Конвертировать webp в jpeg

Процесс открытия webp на компьютере — мы с вами уже разобрали. Рассмотрим, как изменить его, если нам нужно картинку сохранить, например, в JPG или PNG. Средства для просмотра изображений и интернет-браузеры нам в этом не помогут. Но справятся с задачей онлайн-конвертеры.

Если вам нужно переформатировать webp в JPEG (JPG), можно воспользоваться интернет-инструментом по этому адресу. Сайт автоматически перекодирует загруженное нами фото в картинку с популярным расширением JPEG.

1. Перейдите на сайт и нажмите на кнопку Выбрать;

2. Выберите в проводнике Windows расположение файла с webp;

3. Онлайн-сервис автоматически загрузит и переформатирует вашу картинку.

Вам нужно нажать на кнопку Скачать, которая появится сразу же после загрузки файла на сайт.

Нажмите на кнопку Скачать

Он поможет также сделать из картинки с расширением jpeg — изображение webp.

Не работает. Что делать?

Если у вас до сих пор отображаются jpeg/png изображения, то нужно внимательно прочитать FAQ к плагину, в особенности, если у вас сервер ngnix. Для данного типа сервера необходимо ввести команды (нужен доступ к хостингу). Откройте FAQ плагина, найдите пункт Configuration for Nginx и выполните все рекомендации автора, иначе работать ничего не будет:

Ваш хостинг (сервер) должен использовать PHP не ниже 7.0 и иметь установленное расширение GD или Imagick. Так же стоит проверить, создали ли вообще версии webp в необходимой директории — www/имя_сайта/wp-content/uploads-webpc. После чего, снова проверяем загрузку компонентов через devtools в браузере. Не забудьте обновить страницу с очисткой кэша (CTRL+F5)

Как задействовать Webp в WordPress

Вручную конвертить и потом заливать файлы webp в WordPress не получится — получите ошибку «Извините, этот тип файла недопустим по соображениям безопасности».

Да и радости перелопачивать сотни картинок особенной нет.

Поэтому я остановился на плагине для автоматического конвертирования Jpg и Png в Webp для WordPress, который называется Webp Express.

1. Устанавливаем как обычный плагин WordPress.
2. Переходим в Настройки — Webp Express
3. Я использую примерно такие настройки:

Наиболее важные пункты, на которые нужно обратить основное внимание:

Conversion method — хотя бы один флажок должен быть.
Если нету ни одного зеленого флажка, а все красные, то пишите хостеру. Если не реагирует — меняйте хостера (вот лидеры хостинга лично для меня).

Именно по этой причине у меня не получилось прямо сейчас поставить использовать Webp Express на своем собственном блоге, так как на моем дешевом VPS (читайте как я купил сервер за 1000р в месяц) просто нет нужных библиотек и придется вникать и как-то ставить их.

Впрочем, в ближайший месяц я думаю, что найду время и переведу блог на Webp, а пока что перевел на этот формат своих клиентов по СЕО продвижению.

Alter HTML — поставить галку, иначе у меня не работало.

И выбрать по возможности первый режим «Replace <img> tags with <picture> tags, adding the webp to srcset» и посмотреть на сайте — если всё ок, то его и оставляйте.

Если не сработало и показываются старые картинки в форматах jpg или png, а не webp — то включите второй режим, «Replace image URLs» и обязательно поставьте ниже галку «Only do the replacements in webp enabled browsers», иначе картинки не будут показываться в iPhone и т.п.

В этом режиме у меня заработал Webp на всех без исключениях шаблонах, включая подгрузку картинок из CSS и JS. Но идеальный вариант — если на вашем сайте все картинки переведутся именно в первом режиме.

Convert on upload — имеет смысл снять галку чтобы не тупило при загрузке картинок на сайт.

Cache-Control header — я ставлю 1 год.

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

Рассмотрим несколько способов для конвертации изображений. Это можно сделать с помощью онлайн-сервисов, приложений с установкой, через инструменты командной строки.

Онлайн-сервисы

Squoosh

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

Сжатие JPG в WebP в Squoosh

Файл 1,51 MB после конвертирования стал весить 185 kB.

Online-Convert

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

Настройки конвертирования JPG в WebP в сервисе

После конвертирования файл стал весить 238,21 kB.

Zamzar

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

Интерфейс приложения

Исходный файл весил 507,88 kB, итоговый 355 kB.

Приложения

Webpconv для Windows

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

Окно настройки кодирования

Photoshop-плагин для Windows и Mac

Для редактора Photoshop есть отдельный
бесплатный плагин, позволяющий открывать и сохранять 24-битные изображения WebP. Плагин поддерживается версиями Mac CS2 / 3/4, Mac CS5 / CS6 и Windows (32 и 64 бит). На Photoshop CC не работает.

Выбор формата

WebPonize для Mac

Для работы с изображениями для Mac есть инструмент
WebPonize — проект с открытым исходным кодом на Github. После установки можно конвертировать изображения в в формат WebP на Mac — просто перетащить изображение в поле.

Демонстрационное изображение WebPonize

Sketch для Mac

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

Экспорт изображения в редакторе

Редактор предназначен для работы с устройствами на базе MacOS, доступна бесплатная версия на 30 дней.

Инструменты командной строки

Форматы JPEG, PNG и TIFF в WebP конвертируют с помощью утилиты cwebp, а декодируют с помощью dwebp.

Инструмент
cwebp — самый популярный для кодирования изображений в файлы формата WebP. После установки утилиты можно настраивать уровень качества изображения, задавать имена файлам и работать с другими опциями.

# cwebp -q   -o 
cwebp -q 75 image.png -o image.webp

Декодирование работает по такому же принципу.

Инструменты Node

Самые популярные библиотеки для конвертации —
Imagemin с плагином imagemin-webp. Пример скрипта для конвертирования в WebP всех файлов форматов PNG и JPG из папки:

/* convert-to-webp.js */
const imagemin = require("imagemin");
const webp = require("imagemin-webp");
imagemin(, "images", {
 use: 
});

Этот скрипт можно использовать из командной строки или с помощью сборщика:

node convert-to-webp.js

Настройка для Mac OSX

Для настройки у вас должен быть установлен Xcode. Порядок дальнейших действий:

1. Загрузите и установите MacPorts.
2. Запустите Terminal.
3. Обновите MacPorts до последней версии: введите «sudo port selfupdate» и нажмите ввод.
4. Для установки libwebp (WebP Library) введите «sudo port install webp» и нажмите ввод.

Процесс установки

Как открыть ваш файл WEBP:

Самый быстрый и легкий способ открыть свой файл WEBP — это два раза щелкнуть по нему мышью. В данном случае система Windows сама выберет необходимую программу для открытия вашего файла WEBP.

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

Если ваш ПК открывает файл WEBP, но в неверной программе, вам потребуется изменить настройки ассоциации файлов в вашем реестре Windows. Другими словами, Windows ассоциирует расширения файлов WEBP с неверной программой.

Установить необязательные продукты — FileViewPro (Solvusoft) | | | |

Резюме файла WEBP

У нас есть шесть существующие программные обеспечения, связанные с файлами WEBP (как правило это программное обеспечение от Adobe Systems Incorporated, известное как Adobe Photoshop), и их можно отнести к категории основных типов файлов один. Традиционно эти файлы имеют формат Google Image File Format .
Основную часть этих фацлов классифицируют, как Raster Image Files.

Файлы WEBP были обнаружены на платформах Windows, Mac и iOS. Они подходят для настольных ПК (и мобильных устройств).

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

Поддерживает ли WebP прогрессивный или чересстрочный дисплей?

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

В среднем декодирование прогрессивного изображения JPEG эквивалентно декодированию базовой линии 3 раза.

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