Webp чем открыть на компьютере и как конвертировать такие файлы в другие форматы

Что за формат webp

Буквы webp в конце имени изображений говорят нам о том, что это расширение способно хранить фото с потерями или без потерь качества. Формат был создан на основе последней версии VP8, использует RIFF в качестве контейнера. Сегодня он принадлежит всемирно известной компании Google. Имеет официальную страницу.

Сайт формата webp

Формат webp кодирует изображения исключительно в 8-bit YUV. И при потере качества это может быть причиной потери некоторых цветов с однопиксельными переходами. Для обхода этого ограничения была организована webp Lossless спецификация (без потери качества). Которая работает в ARGB цветовом пространстве.

Изображение с расширением webp

Формат появился в качестве более гибкого контейнера для изображений с высоким качеством и небольшим размером файла. Его недостатком является отсутствие поддержки некоторыми популярными программами. Часто имеет название Chrome HTML Document. Расшифровывается расширение как Google Web Pictures.

Использование изображений в теме оформления

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

Объединить запись в одно свойство, как в случае с элементом , в CSS, к сожалению, не получится, но можно сделать, например, так:

Добавить класс к корневому элементу (тег ) может JS библиотека Modernizr, которая кстати присутствует в ядре Drupal 8, но в практически минимальном виде, без поддержки WebP.

Это можно исправить, скачав собственную сборку библиотеки на странице загрузки. Передя по этой ссылке, будет отмечен пункт «Webp» а так же пункты «Touch Events» и «details Element», которые как раз используются в ядре Drupal. В результате скачается файл , который надо положить в папку вашей темы оформления .

Теперь надо определить этот файл как библиотеку в файле :

И переопределить аналогичный файл, который идет в составе ядра, в файле :

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

Для пакетной генерации WebP изображений есть плагин gulp-webp.

Для автоматического добавления класса к объявлениям картинок есть плагин gulp-webpcss.

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

Процесс установки Gulp и плагинов я опущу, но приведу фрагмент описания задачи в :

Добавление класса в моем примере происходит в рамках задачи по компиляции SASS, но фактически преобразования совершаются уже на скомпилированном CSS, так что в данном случае это не принципиально.

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

По умолчанию, плагин gulp-webpcss генерирует правила подобные тому, что приведено в качестве примера выше. И получается, что до отработки JavaScript мы имеем объявления с ненужными изображениями, даже если браузер поддерживает WebP. Думаю, что в теории возможна ситуация, когда ненужное изображение даже начнет загружаться. Так мы ничего не оптимизируем. Нужно действовать в интересах прогресса и большинства. Настройки gulp-webpcss позволяют переопределить классы как для WebP объявлений, так и для исходных:

Это даст нам в итоге CSS вида:

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

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

Но и это решение можно улучшить. Хоть JPEG и PNG и отошли на второй план, почему бы их все равно не оптимизировать?
Для этого есть плагин gulp-imagemin. Плагин использует под капотом уже упомянутые выше и . Все шикарно работает даже с настройками по умолчанию:

И раз уж мы используем Gulp, то поручим ему и всю остальную рутинную работу: сборку SASS c составлением карт (sourcemaps), расстановку браузерных префиксов и отслеживание изменений в файлах для запуска задач.

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

Webper 8.x (ZIP, 506 Кб)

Для его использования надо иметь установленный node.js и Gulp. Сначала надо скачать все зависимости выполнив команду:

Файлы изображений нужно поместить в папку либо отредактировать путь в файле .

Запуск сборки выполняется командой:

Запуск отслеживания изменений:

или просто:

Немного истории

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

И тем не менее, оба формата неплохо себя зарекомендовали. JPEG, формат с потерями качества — для изображений фотографического типа. PNG, без потерь — для пиктограмм, иконок и изображений с альфа каналом (прозрачностью). Для обоих форматов есть способы уменьшить размер файла, например, использование современных кодеков для JPEG (Guetzli, MozJPEG), или использование меньшей разрядности (квантование) для PNG изображений с небольшим количеством цветов. Об этом уже написано сотни статей.

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

Поддержка

В настоящее время просмотр изображений в формате WebP поддерживается браузерами Google Chrome (начиная с 9 версии) и Opera (начиная с версии 11.10). Начиная с версии 26 также поддерживается браузером Pale Moon.

Android поддерживает чтение и запись WebP изображений начиная с версии 4.0.

С помощью специальной JavaScript-библиотеки возможно отображение в браузерах, поддерживающих видео в формате WebM, в частности, в Firefox 4.0 и более новых.

Существует также порт библиотеки libwebp под названием libwebpjs/libwebpas на JavaScript и ActionScript, позволяющий использовать WebP во всех популярных браузерах (поддержка IE6+ осуществляется с помощью дополнительного модуля Adobe Flash).

В октябре 2018 поддержка формата была добавлена в Microsoft Edge.
Также в октябре 2018, библиотека libwebp была принята в кодовую базу Firefox.

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

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

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

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

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

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

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

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

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

• Opera;
• Adobe Photoshop;
• Google Chrome.

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

Adobe Photoshop

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

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

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

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

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

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

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

WebP (78 Kb)

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

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

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

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

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

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

WebP vs JPEG: данные исследования

В январе 2019 года Google обновили
исследование, в котором сравнивали сжатие изображений с помощью WebP и JPEG.

Как проводили исследование

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

Для второй оценки анализировали графики качества и битов на пиксель (bpp) для WebP и JPEG. Эти графики показывают компромисс между искажениями и скоростью для обоих форматов.

Изображения брали из нескольких наборов:

• Lenna — картинки 512 x 512 px;
• Kodak — 24 изображения из набора цветных изображений Kodak;
• Tecnick — 100 цветных изображений RGB из коллекции Tecnick.com;
• Image_crawl — случайная выборка картинок PNG из базы данных веб-сканирования Google Image Search.

Результаты исследования

По первому методу оценивания выяснилось, что при одинаковом качестве средний размер файла WebP на 25-34% меньше по сравнению с размером файла JPEG.

Средний размер файла с одинаковым качеством, JPEG Q = 75

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

График для набора данных Kodak

По итогу исследования ясно, что WebP может обеспечить лучшее сжатие изображения по сравнению с JPEG.

Что такое файл WEBP?

Файл WEBP — это изображение, сохраненное в формате растрового изображения WebP (произносится «Weppy»), разработанного Google для веб-графики. Он предназначен для уменьшения размеров файлов изображений по сравнению со стандартным сжатием JPEG при сохранении такого же или аналогичного качества. Файлы WEBP позволяют загружать изображения быстрее. Дополнительная информация

.WEBP расширение файла image / webp_6240.jpg «>

Файл WEBP открывается в Google Chrome 60

Файлы WEBP обычно обнаруживаются, когда пользователь загружает изображение из веб-браузера, перетаскивая изображение на рабочий стол или щелкая правой кнопкой мыши изображение и сохраняя его в формате WebP. Издатели веб-сайтов также могут создавать файлы WEBP с использованием графического программного обеспечения. Если вы столкнулись с файлом WEBP, вы можете открыть его в веб-браузерах Chrome, Firefox, Opera и Edge или в графическом редакторе, таком как Gimp, Photoshop, Image Magick или IrfanView.

Формат WebP основан на технологии On2 Technologies, приобретенной Google. Формат был введен в 2010 году.

НОТА: Плагин WebP Codec для Windows, указанный ниже, позволяет программе просмотра фотографий Microsoft Windows открывать файлы WEBP.

Windows

File Viewer Plus Microsoft Edge Гугл Хром Mozilla Firefox Adobe Photoshop с подключаемым модулем формата файлов WebP GIMP Google Picasa опера XnView ImageMagick Кодек WebP для Windows

макинтош

Гугл Хром Mozilla Firefox Adobe Photoshop с подключаемым модулем формата файлов WebP GIMP Google Picasa Pixelmator XnView ImageMagick опера

Linux

Гугл Хром Mozilla Firefox GIMP опера XnView ImageMagick

Android

Просмотрщик файлов для Android

Что такое облако для хранения файлов?

WebP (78 Kb)

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

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

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

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

Как использовать привязки libwebp Java в Android?

WebP включает поддержку привязок JNI к простым интерфейсам кодировщика и декодера в каталоге.

Сборка библиотеки в Eclipse :

1. Убедитесь, что у вас установлен плагин ADT вместе с инструментами NDK, и ваш путь к NDK задан правильно ( Настройки > Android > NDK ).
2. Создайте новый проект: Файл > Создать > Проект > Проект приложения Android .
3. Клонировать или распаковать libwebp в папку с именем в новом проекте.
4. Добавить в список.
5. Щелкните правой кнопкой мыши новый проект и выберите « Инструменты Android» > « Добавитьвстроенную поддержку» …, чтобы включить библиотеку в сборку.
6. Откройте свойства проекта и перейдите в C / C ++ Build > Behavior . Добавьте в раздел, чтобы собрать libwebp как общую библиотеку.Примечание. Настройка в целом улучшит производительность 32-битной сборки.
7. Добавьте в папку проекта.
8. Создайте свой проект. Это создаст .
9. Используйте для загрузки библиотеки во время выполнения.

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

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

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

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

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

Улучшенный JPEG

Каково текущее состояние с форматами JPEG в интернете?

tl;dr: поддержка в браузерах сильно отличается. Если использовать современные разработки, то часто придётся выдавать разным браузерам разные форматы.Различные современные форматы (и оптимизаторы) показывают качество сжатия при целевом размере файла 26 КБ. Качество сравнивается инструментами SSIM (структурное сходство) и Butteraugli, которые мы более подробно рассмотрим позже.

• JPEG 2000 (2000) — улучшение сжатия за счёт замены дискретного косинусного преобразования на вейвлеты. Поддержка в браузерах: десктопный Safari и iOS.
• JPEG XR (2009) — альтернатива JPEG и JPEG 2000, поддерживающая HDR и широкие цветовые гаммы. Создаёт файлы меньшего размера, чем JPEG, со слегка с меньшей скоростью кодирования/декодирования. Поддержка в браузерах: Edge, IE.
• WebP (2010) — основанный на прогнозировании блоков формат от Google поддерживает сжатие с потерями и без потерь. Обеспечивает лучшее сжатие, чем JPEG, и поддерживает прозрачность, как PNG. Не хватает настройки цветовой субдискретизации и прогрессивной загрузки. Скорость декодирования ниже, чем у JPEG. Поддержка в браузерах: Chrome, Opera. Экспериментальная поддержка в Safari и Firefox.
• FLIF (2015) — формат сжатия без потерь, превосходящий PNG, WebP без потерь, BPG без потерь и JPEG 2000 без потерь по коэффициенту сжатия. Поддержка в браузерах: нет, но есть JS-декодер.
• HEIF и BPG. С точки зрения сжатия они одинаковы, но поставляются в разных обёртках:
• BPG (2015) — замена JPEG более эффективным сжатием на основе HEVC (High Efficiency Video Coding). Кажется, обеспечивает меньший размер файлов по сравнению с MozJPEG и WebP. Вряд ли получит широкую поддержку из-за проблем с лицензированием. Поддержка в браузерах: нет, но есть JS-декодер.
• HEIF (2015) — формат для изображений и последовательностей изображений, закодированных HEVC с межкадровым предсказанием. Apple анонсировала на WWDC, что будет изучать переход c JPEG на HEIF в операционной системе iOS, что даст уменьшение размера файлов до двух раз. Поддержка в браузерах: нет на момент написания статьи. Должна появиться в десктопном Safari и iOS 11.

одинподдержка в браузерах сильно отличаетсяуказать content-type

Does WebP support progressive or interlaced display?

WebP does not offer a progressive or interlaced decoding refresh in the JPEG or
PNG sense. This is likely to put too much pressure on the CPU and memory of the
decoding client as each refresh event involves a full pass through the
decompression system.

On average, decoding a progressive JPEG image is equivalent to decoding the
baseline one 3 times.

Alternatively, WebP offers incremental decoding, where all available incoming
bytes of the bitstream are used to try and produce a displayable sample row as
soon as possible. This both saves memory, CPU and re-paint effort on the
client while providing visual cues about the download status. The incremental
decoding feature is available through the
.

Конвертеры онлайн WEBP в Jpg

В Интернете есть конвертеры, которые конвертируют разные форматы файлов и сохраняют их на компьютер. Список конвертеров:

• image.online-convert.com/ru/convert/webp-to-jpg;
• www.iloveimg.com/ru/convert-to-jpg/webp-to-jpg;
• webptojpg.com/ru/.

Конвертеры работают бесплатно, не требуют регистрации от пользователей. Разберем конвертацию файлов на последнем конвертере из списка.

Нажимаем на кнопку «Загрузить» или переносим картинку с компьютера левой кнопкой мыши на конвертер (Скрин 3).

Далее, жмите кнопку «Конвертировать» (Скрин 4).

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

Устранение неполадок при открытии файлов WEBP

Общие проблемы с открытием файлов WEBP

Adobe Photoshop не установлен

Дважды щелкнув по файлу WEBP вы можете увидеть системное диалоговое окно, в котором сообщается «Не удается открыть этот тип файла». В этом случае обычно это связано с тем, что на вашем компьютере не установлено Adobe Photoshop для %%os%%. Так как ваша операционная система не знает, что делать с этим файлом, вы не сможете открыть его дважды щелкнув на него.

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

Установлена неправильная версия Adobe Photoshop

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

Совет: Иногда вы можете получить общее представление о версии файла WEBP, щелкнув правой кнопкой мыши на файл, а затем выбрав «Свойства» (Windows) или «Получить информацию» (Mac OSX).

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

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

Как задействовать 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 год.

Команды для конвертации и оптимизации изображений

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

Установка пакетов для конвертации и оптимизации в Ubuntu:

Установка в macOS c помощью Homebrew:

Конвертация из PNG в WebP (здесь и далее используется коэффициент качества 90 из 100):

Пакетная конвертация всех PNG файлов в папке в WebP:

Конвертация из PNG в JPEG:

Пакетная конвертация всех PNG файлов в папке в JPEG:

Пакетная оптимизация всех PNG файлов в папке:

Пакетная оптимизация всех JPEG файлов в папке:

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

Типы файлов WEBP

Ассоциация основного файла WEBP

.WEBP

Формат файла:	.webp
Тип файла:	Google Image File Format

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

Создатель:
Категория файла:	Файлы растровых изображений
Ключ реестра:	HKEY_CLASSES_ROOT\.webp

Программные обеспечения, открывающие Google Image File Format:

Adobe Photoshop, разработчик — Adobe Systems Incorporated

Совместимый с:

Windows

Mac

Google Chrome, разработчик —

Совместимый с:

Windows

	Mac
	iOS

Android

Linux

Opera, разработчик — Opera Software

Совместимый с:

Windows

	Mac
	iOS

Android

Linux

IrfanView, разработчик — Open Source

Совместимый с:

Windows

iOS

Android

Linux

Google Picasa, разработчик —

Совместимый с:

Windows

Mac

Pixelmator, разработчик — The Pixelmator Team

Совместимый с:

	Mac
	iOS

Что такое WebP

WebP – это формат растровых изображений от Google, разработанный специально для Интернета. Он обеспечивает сжатие без потерь и с потерями, что позволяет веб-дизайнерам показывать более богатые изображения при меньших размерах файлов.

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

Изображения без потерь в WebP восстанавливают новые пиксели, используя уже просмотренные фрагменты изображения. Если он не находит соответствия, он может использовать локальную палитру. Изображения без потерь на 26% меньше того же изображения, что и PNG. Lossless WebP поддерживает альфа-канал (прозрачность) с размером файла, который в 3 раза меньше, чем сопоставимое изображение в формате PNG.

WebP в Joomla

Бесплатное расширение WebP Joomla  от Yireo позволяет включить поддержку WebP, если браузер ее поддерживает. Поддержка браузера для WebP определяется на основе простой проверки пользовательским агентом (чтобы браузеры Chrome сразу же сопоставлялись) и дополнительного обнаружения JavaScript (так что другие браузеры WebP также совпадают). Если обнаружен WebP, расширение проанализирует вывод HTML, чтобы убедиться, что ссылки на поддерживаемые изображения (png, jpg, jpeg) фактически заменены изображениями WebP. Для установки вам нужно будет сделать следующее:

1. Запустите WebP на вашем хостинге
2. Установите плагин в диспетчере расширений
3. Включите плагин в диспетчере плагинов

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

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

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

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

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

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

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

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

UPD 18.09.2020 Плагин с версии 1.4.2 не работает с CDN

Небольшое уточнение. Если вы используете платформу Content Delivery Network , то плагин работать не будет (здесь мы описывали, как подключить Cloudflare на WordPress). Это, кстати, указано в официальном FAQ плагина (https://wordpress.org/plugins/webp-converter-for-media/#faq).

Проблема связана с логикой работы самой CDN, которая изменяет URL для файлов мультимедиа, а плагин не может работать с измененными адресами. Единственный выход из этой ситуации (на данный момент, по крайней мере) использовать конвертацию в самой платформе CloudFlare.

Это платная функция, доступная в тарифном плане бизнес, который стоит 200$ в месяц (~ 15 000 рублей)

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

Итоги

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

Автоматизировать генерацию и объявление WebP изображений в теме оформления довольно просто. При этом вам даже не понадобится менять свой привычный способ написания стилей. Сборщик все сделает сам. Использование WebP можно добавить как в существующие темы оформления, так и начать использовать при разработке новой.

Оптимизация изображений — это забота о пользователях, и поверьте, они это оценят. Быстрая загрузка изображений и всего сайта — это и удобно, и приятно, и именно так должен работать современный веб.

С этим читают