Webp: преимущества и как открыть файлы с этим форматом изображения

Как определить поддержку браузера для WebP?

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

Согласование содержимого на стороне сервера через заголовки Accept

Веб-клиенты все чаще отправляют заголовок запроса «Accept», указывающий, какие форматы контента они готовы принять в ответ. Если браузер заранее указывает, что он «примет» формат изображения / webp , веб-сервер знает, что он может безопасно отправлять изображения WebP, что значительно упрощает согласование содержимого. 

Modernizr

Modernizr — это библиотека JavaScript для удобного определения поддержки функций HTML5 и CSS3 в веб-браузерах. Ищите свойства Modernizr.webp , Modernizr.webp.lossless , Modernizr.webp.alpha иModernizr.webp.animation .

Элемент HTML5

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

В вашем собственном JavaScript

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

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

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

При работе с графикой нам часто нужны элементы каких-либо логотипов или других изображений в png с прозрачностью, чтобы наложить их на свою картинку. Но при загрузке подобных изображений из Картинок (или других источников) мы получаем webp. Легко поможет исправить положение этот сайт.

Картинка в webp с возможной прозрачностью

Онлайн-конвертер не просто переделает изображение в png, а добавит прозрачность фону, если она была задумана создателем. Сайт работает по тому же принципу, что и предыдущий сервис.

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

2. Указать сайту файл с webp, из которого нужно сделать png;

3. Нажать на кнопку Начать конвертирование.

После завершения процесса сайт предложит сразу же загрузить файл. Укажите место для загрузки и нажмите на кнопку Ok.

Что такое WebP?

WebP – это графический формат с открытым исходным кодом, созданный корпорацией Google. Его файлы имеют расширение .webp

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

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

Сравнительная характеристика форматов.

WebP поддерживает:

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

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

Бесплатный WebP

Теперь плохие новости. Не все браузеры поддерживают WebP. Тем не менее, поддержка проекта таким гигантом, как Google, позволяет надеяться, что будущее – за WebP.

Действительно впечатляет

Вы слышали о возможности «Предоставлять изображения в форматах следующего поколения»? Это способ, используемый Google для того, чтобы подтолкнуть вас к использованию WebP.

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

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

Извините, не извиним

Есть несколько способов начать использовать WebP- изображения. Для этого понадобится решение, которое будет:

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

WebP чем открыть в Windows

С линуксом разобрались. Теперь давайте разберемся, как просматривать и конвертировать файлы с разрешением .webp. Здесь тоже все довольно просто. Есть две хорошие программы просмотровщики и конвертер содержащий webp codec для windows.

Первая программа это XnView. Скачать XnView с официально сайта. Поддерживает данный формат сразу после установки. Можно смотреть и преобразовывать.

Вторая программа вьювер мне нравиться больше. Это IrfanView. Скачать IrfanView c официального сайта.

Для того, что бы она могла работать с расширением .webp потребуется скачать и установить плагины. На официальном сайте они есть для 32 и 64 битных систем.  Можно скачать как установщик так и архив. В случае с архивом распакуйте в папку с программой для плагинов «Plugins». Для примера 32 битная версия в Windows 7 64 путь такой:

C:\Program Files (x86)\IrfanView\Plugins

1	C:\Program Files (x86)\IrfanView\Plugins

Скачиваете, устанавливаете и пользуетесь.

Как конвертировать WebP в другой формат в Windows

Как изменить формат WebP на JPEG, PNG и другие в Windows? Если фалов достаточно много то удобнее использовать для этого специальную программу конвертер.

Одна из самых удобных и бесплатных это «Converseen». Скачать программу Converseen с официального сайта. Разработчики сразу предлагают и переносимую версию (portable).

Подробный обзор программы Converseen читайте на этой странице.

На этом все. Думаю, что с форматом WebP разобрались как работать.

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

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

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

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

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

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

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

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

Как открыть webp на телефоне

Чтобы посмотреть файл с расширением webp на мобильном устройстве, обычно не требуется каких-либо дополнительных программ или приложений из Play Market. Встроенное средство просмотра в Android и iOS отлично справляется с данным форматом. Но если вы захотите переконвертировать webp в другие форматы на телефоне, можно воспользоваться XnConvert.

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

Формат WebP

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

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

То есть да, WebP действительно способен заменить растровые веб форматы и стать единым стандартом.

Приводить примеры изображений, чтоб вы могли попытаться увидеть разницу, я не буду. С высокими уровнями качества (70-99) вы ее все равно не увидите. Использование же совсем уж низкого качества ради экономии нескольких десятков байт — это довольно редкий случай, и мы не будем на него отвлекаться.

Сейчас WebP поддерживается основными браузерами: Chrome, Firefox, Edge. На момент написания статьи — это порядка 75%, актуальная информация .

Да, пока мы все же не можем полностью отказаться от JPEG и PNG, они понадобятся для браузеров без поддержки WebP, из актуальных это только Safari.

В графических редакторах нативная поддержка WebP есть в Sketch. Для Photoshop и Gimp существуют плагины от сторонних разработчиков.

По поводу Photoshop замечу, что плагин, который появляется на первой позиции в поиске у меня не заработал (пробовал на версиях CC 2018 и СС 2019 для macOS), но в любом случае, он выглядит довольно устаревшим и содержит ряд ограничений. Мне подошел менее известный плагин, хоть он и в стадии beta.

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

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

Конвертирование с помощью XnConvert

Если не хотите быть зависимыми от интернета, скачайте с сайта www.xnview.com
и установите — бесплатную программу для конвертирования и базовой обработки изображений. Приложение отличается легкостью и простотой, умеет работать с более чем 500
графических форматов, производить с изображениями различные действия, как то: выравнивание, обрезка, применение фильтров, изменение яркости, контрастности и других параметров, добавление водяных знаков и многое, многое другое.

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

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

Как предоставлять изображения в формате следующего поколения

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

Плагин Smush Pro конвертирует изображения в формат WebP в WordPress и предоставляет их совместимым браузерам. Другие варианты решения проблемы:

1. Использование JavaScript для определения поддержки WebP

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

Также можно использовать JavaScript-библиотеку Modernizer. Она также определяет поддержку WebP браузером.

2. Использование заголовков accept

Во время посещения сайта браузер отправляет заголовок запроса accept. В нем указано, какие форматы изображений он может принимать с веб-сервера.

Это метод, используемый CDN Smush Pro для определения того, какие браузеры могут принимать WebP-изображения.

3. Редактирование файла .htaccess в WordPress

Файл .htaccess находится в корневом каталоге сайта. В WordPress он используется для перезаписи URL. С его помощью можно добавить поддержку расширения .webp.

Вот так обычно выглядит файл .htaccess в WordPress

Например, в коде Винсента Орбека, размещенном на GitHub файл .htaccess изменен соответствующим образом. В результате URL-адреса JPEG и PNG- изображений изменяются, если в той же папке есть их WebP-версия и если браузер поддерживает формат WebP. В этом случае ответственность за предоставление правильного изображения ложится на веб-сервер Apache.

4. Предоставляйте различные размеры и форматы изображений с помощью HTML 5

Одним из лучших способов предоставления WebP-изображений является элемент. HTML5 <picture>. Он используется для передачи различных изображений, доступных для выбора браузером.

Элемент <picture> можно использовать не только для предоставления форматов, но и различных размеров изображений для мобильных и Retina устройств. Посмотрите на этот пример.

Обычно HTML- код для представления изображения выглядит примерно так:

<img src="image.jpg" alt="my image" width="100" height="100" />

Но код элемента <picture>  намного объемнее:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="my image" width="100" height="100">
</picture>

Тег <img> вложен в элемент <picture>. Браузеры, которые не поддерживают WebP, вернутся к изображению, указанному в элементе <img>.

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 на другими форматами

Естественно, основное преимущество — это размер. Сокращение размера положительно влияет сразу на четыре аспекта работы в интернете:

1. Сайты со сжатыми WebP-картинками работают быстрее. Уходит меньше времени на обработку небольших файлов. Даже если в статье будет под сотню изображений, компрессия спасет от чересчур долгих загрузок.
2. Загружая на VDS маленькие изображения, можно сэкономить на пространстве жесткого диска.
3. Пользователи будут тратить меньше мобильного трафика при посещении сайта со смартфона.
4. Выделенный интернет-канал до сервера будет загружен гораздо меньше, если передаваемый медиаконтент меньше весит. Еще один плюс к производительности.

Но говорить о преимуществах WebP проще в сравнении с другими форматами.

WebP против JPEG

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

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

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

WebP против PNG

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

Но речь идет о графике. С фотоснимками PNG справляется хуже более узкоспециализированных расширений. К тому же PNG заметно тяжелее того же JPEG даже после компрессии (хоть и сохраняет высокое качество).

WebP по детализации и цветопередачи на одном уровне с PNG. Разницу трудно заметить даже при сравнении лоб в лоб. Он хорошо отображает как графику, так и фотографии. При этом размер зачастую ниже, чем у PNG, на 30%.

6: Обслуживание изображений WebP с помощью mod_rewrite

Если вы хотите оптимизировать скорость загрузки сайта, но у вас очень много страниц или мало времени на редактирование HTML, вы можете использовать модуль mod_rewrite от Apache. Он позволяет автоматизировать процесс отображения файлов .webp в поддерживаемых браузерах.

Сначала создайте файл .htaccess в каталоге /var/www/html/webp с помощью следующей команды:

Директива ifModule проверяет, доступен ли модуль mod_rewrite; если он доступен, его можно активировать при помощи RewriteEngine On. Добавьте эти директивы в файл .htaccess:

Веб-сервер сделает несколько проверок, чтобы определить, когда показывать файлы .webp пользователю. Когда браузер делает запрос, он включает в него заголовок, который указывает серверу, что именно может обрабатывать браузер. В случае с WebP браузер отправляет заголовок Accept, содержащий image/webp. Давайте проверим, отправляет ли браузер этот заголовок, с помощью директивы RewriteCond; она определяет критерии, которым нужно отвечать для выполнения правила RewriteRule:

Необходимо отфильтровать все файлы, кроме изображений JPEG и PNG. Снова используйте RewriteCond, чтобы добавить регулярное выражение для соответствия запрошенной версии URI:

Модификатор (?i) сделает выражение нечувствительным к регистру.

Чтобы проверить наличие версии .webp, снова используйте RewriteCond.

Если все предыдущие условия выполнены, RewriteRule перенаправит запрошенный файл JPEG или PNG на соответствующий файл WebP

Обратите внимание, перенаправление происходит при помощи флага -R, а не перезаписи. Разница между перезаписью и перенаправлением заключается в том, что сервер будет направлять перезаписанный URI-адрес, не сообщая об этом браузеру

Например, URI-адрес будет показывать, что файл имеет расширение .png, но на самом деле это будет файл .webp. Добавьте RewriteRule в файл:

Теперь раздел mod_rewrite в файле .htaccess готов. Но что, если между вашим сервером и клиентом будет промежуточный сервер кэширования? Он может показать конечному пользователю неправильную версию файла. Именно поэтому стоит убедиться, что модуль mod_headers активирован, и отправить заголовок Vary: Accept. Заголовок Vary сообщает серверам кэширования (например, прокси-серверам), что тип контента документа варьируется в зависимости от возможностей браузера, запрашивающего этот документ. Ответ генерируется на основе заголовка Accept в запросе. Запрос с другим заголовком Accept получит другой ответ. Данный заголовок важен, поскольку не позволяет показывать кэшированные изображения WebP в неподдерживаемых браузерах:

Теперь в конце файла .htaccess задайте тип MIME изображений .webp как image/webp, используя директиву AddType. Это будет показывать изображения с правильным типом MIME:

В итоге получится такой файл:

Header append Vary Accept env=REDIRECT_accept

Примечание: Этот файл .htaccess можно объединить с другим файлом .htaccess (при наличии такового). Если вы используете WordPress, вам следует скопировать этот файл .htaccess и вставить его в начало существующего файла.

Давайте на практике проверим, как это работает. Если вы следовали инструкциям в предыдущих разделах, у вас должны быть изображения logo.png и logo.webp в /var/www/html/webp. Сейчас мы используем простой элемент <img>, чтобы добавить изображение logo.png на страницу сайта. Создайте новый файл HTML:

Вставьте такой код:

Сохраните и закройте файл.

При посещении страницы http://your_server_ip/webp/img.html в Chrome вы увидите, что изображение имеет формат .webp (чтобы убедиться в этом, откройте его в новой вкладке). В Firefox в автоматически получите версию .png.

Использование изображений WebP в WordPress

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

WebP — это современный формат изображений, который обеспечивает улучшенное сжатие без потерь и с потерями для изображений в Интернете. Изображения WebP в среднем примерно на 30% меньше, чем их эквиваленты в формате JPEG или PNG, что приводит к тому, что сайты работают быстрее и используют меньшую полосу пропускания. Согласно caniuse.com/webp, WebP поддерживается всеми современными браузерами.

Изображения WebP поддерживают сжатие с потерями и без потерь, а также анимированный формат и поддержку прозрачных изображений. В WordPress формат WebP без потерь поддерживается только тогда, когда ваш хостинг-сервер использует Imagick (библиотека PHP).

Для поддержки WebP в медиа-библиотеке необходимо, чтобы библиотека обработки изображений вашего веб-сервера (WordPress поддерживает как Imagick, так и LibGD) поддерживала формат WebP. К счастью, эти библиотеки уже давно поддерживают WebP, поэтому поддержка широко доступна. 

Я использую хостинг Beget и поэтому загрузил картинку в современном формате WebP на сайт ВордПресс без проблем:

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

Плагин Support WebP (Поддержка WebP) для WordPress

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

Плагин WP Support WebP

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

Загружать и использовать изображения WebP на новом сайте WordPress это — круто, но что делать если сайту уже несколько лет и картинок (в другом формате) скопилось уже тысячи? Как их преобразовать / конвертировать в формат WebP? Для этого, нужен специальный плагин. Об этом будет сказано ниже. А пока, инструмент редактирования изображений которые поддерживает экспорт в WebP.

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

Для преобразования можно использовать конвертер WebP. Например, этот. Просто загрузите файл в формате JPEG, PNG или GIF, а затем скачайте новое изображение.

Одно готово, осталась тысяча

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JPEG

Этот формат прошел проверку временем, так как появился в далеком 1992 году. Сжатие этого формата происходит следующим образом. Сначала изображение из цветового пространства RGB (от английских “red” – «красный», “green” – «зеленый» и “blue” – «синий») преобразуется в пространство YUV, которое основано на характеристиках яркости и цветности; это пространство наиболее близко к тому, как воспринимает цвета человек. Затем изображение разделяется на пиксельные блоки размером 8х8, и каждый блок раскладывается на составляющие цвета, частота которых затем подсчитывается. Если говорить с точки зрения математики, то получается, что подобное сжатие переносит изображение из пространственной области в частотную область.

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

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

А вот для изображений с четкими краями и детализированными текстурами JPEG, наоборот, не подходит: четкие грани будут стерты, и изображение в целом получится размытым.
Ниже вы видите пример изображений в формате JPEG:

Как внедрить или перейти на WebP?

️ Для внедрения нового формата webP на ваш сайт или интернет магазин уже создана под каждую CMS огромное кол-во модулей и плагинов, но так как мой блог на котором я делаю этот эксперимент работает на WordPress мы будем рассматривать варианты под него.

Поддержка хостинга WebP

Перед тем как что то начать, необходимо убедиться, что ваш хостинг поддерживает формат WebP! Это сделать можно следующим способом:

1. создаем файл с расширением php
2. внесите в него следующий код:

   <?php  var_dump(gd_info());  ?>

3. Перейдите через браузер на этот файл и на странице должен быть примерно такой текст: array(13) { => string(5) «2.2.5» => bool(true) => string(13) «with freetype» => bool(true) => bool(true) => bool(true) => bool(true) => bool(true) => bool(true) => bool(true) => bool(true) => bool(true) => bool(false) }
4. Как видим WebP Support стоит везде true, значит все хорошо и можно приступать к установке модулей или плагинов, если нет, то пишите вашим хостерам для включения данной функции на вебсервере.

А теперь перейдем к выбору плагинов.

Плагины wordpress для WebP

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

есть только один минус, в большинстве случаев все эти плагины платные и бесплатно вам дадут только попробовать на 5-10 картинках, за остальное придется платить.

Какой лучший плагин WebP для WordPress?

Двумя наиболее популярными специализированными плагинами преобразования jpg в WebP для WordPress являются:

1. WebP Express
2. WebP Converter for Media

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

Хоть я и указал только три варианта плагинов, но хотел бы выделить из них только один и это будет imagify!

Почему я выбрал его?

1. Это продукт от компании WP Rocket, а качество их кэширующего плагина меня просто потрясла и в связке эти два плагина будут только дополнять друг друга
2. Imagify это не только плагин, но и сервис в котором вы можете на сайте через Drag and Drop перетащить фотографии с изменением их формата и разрешения в несколько нажатий.
3. цена обработки фотографий очень лояльная и если вы не хотите парится, то пару баксов и сервис за вас обработает фотографии в лучшем виде!

Перейдя на сайт мы увидим что нам будет предложен выбор из трех вариантов по оптимизации картинок:

• Normal
• Agressive
• Ultra

Давайте для теста посмотрим как у нас изменится размер изображения. Я возьму с блога одну из картинок которая у меня есть в статье и попробуем ее сжать с помощью Imagify и посмотрим что получится на выходе.

Как видите у

Вы будете переводить сайт на WebP
ДА 89.29%

нет 10.71%
Проголосовало: 28

Почему WordPress не загружает webp?

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

function webp_upload_mimes( $existing_mimes ) {      // add webp to the list of mime types      $existing_mimes = 'image/webp';        // return the array back to the function with our added mime type      return $existing_mimes;  }  add_filter( 'mime_types', 'webp_upload_mimes' );

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

Заключение

данном мануале мы рассмотрели основные методы работы с изображениями WebP. Вы узнали, как использовать инструмент cwebp для преобразования файлов, а также как показывать эти изображения пользователям: для этого есть два способа, элемент HTML5 <picture> и модуль Apache mod_rewrite.

Характеристики WebP и использование инструментов преобразования хорошо описаны в документации WebP.

Дополнительную информацию об использовании элемента <picture> вы найдете в документации по MDN.

Также вам может понадобиться документация mod_rewrite.

ApacheCentOSCentOS 7cwebpHTMLMod_RewriteUbuntuUbuntu 16.04WebP

Итоги

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

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

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