Webp

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

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

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

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

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

или просто:

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

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

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

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

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

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

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

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

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

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

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

Чем открыть формат 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 открывается по аналогии.

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

Что такое формат WebP

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

Согласно Google, формат WebP уменьшает размер файла изображения на 19-64 процента. Это приводит к тому, что веб-сайты загружаются быстрее и потребляют меньше трафика. Из-за этого многие веб-сайты с высокой посещаемостью используют формат WebP, поскольку более быстрая загрузка сайта означает лучший пользовательский интерфейс. Можно с уверенностью предположить, что каждый согласен с тем, что чем быстрее Интернет, тем лучше, так в чём же проблема?

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?

Преимущества анимированного 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

Общие проблемы с открытием файлов 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 поддерживается браузерами 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.

Вариант 1 — Photoshop

Самым простым способом работы с WebP является, конечно же, Photoshop, для которого Telegraphics создала и специальный плагин для разных версий разрядности. После того, как установите его (скопируете в папку с плагинами) в приложении появится возможность в меню «Сохранить как…
» выбрать в ниспадающем списке формат WebP.

Диалоговое окно позволяет настраивать качество с помощью ползунка, фильтрацию, шумы и резкость

Обратим внимание, что согласно прилагаемому файлу readme в архиве, оговаривается, что в вариации на Windows функциональность плагина меньше, чем в версии для Mac OS

Кроме этого, плагин для Photoshop не позволяет воспользоваться «Сохранить для Web…
», а также нет предпросмотра сохраняемого изображения, как в случае с JPEG. Поэтому, пока вы не сохраните файл и не откроете его для просмотра, вы не сможете узнать, что получается и какого размера будет файл.

Что такое WebP

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

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

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

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

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

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

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

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

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

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

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

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

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 разобрались как работать.

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

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

Smush Pro заботится об обоих: конвертирует в формат WebP в WordPress и предоставляет его совместимым браузерам, чтобы вы могли пропустить всю эту ерунду.

1. Используйте JavaScript для определения поддержки WebP

Вы также можете использовать библиотеку JavaScript, такую ​​как Modernizer, которая почти так же обнаруживает поддержку WebP .

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

2. Используйте accept headers браузера

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

Если браузер указывает, что он принимает изображения WebP, веб-сервер знает, что он может безопасно отправлять WebP.

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

3. Измените файл Hypertext Access (.htaccess) в WordPress.

Файл .htaccess находится в корневом каталоге и является уникальным файлом по нескольким причинам:

1. Он начинается с точки (.), Означающей, что это скрытый файл. Вы не увидите его, если не сделали скрытые файлы видимыми
2. У него нет расширения файла
3. Если вы допустите ошибку при редактировании, ваш сервер может серьезно работать со сбоями, поэтому редактируйте его, только если вы знаете, что делаете!

В WordPress этот файл обычно используется для перезаписи URL. В этом случае URL-адрес изображения изменяется и добавляется расширение .webp.

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

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

4. Обслуживание нескольких размеров и форматов с HTML 5

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

Хотя HTML-изображение будет выглядеть примерно так:

У  элемента намного больше:

Видите, как вложено в элемент? Браузеры, которые не поддерживают изображения WebP, вернутся к изображению, указанному в элементе. Фактически, это требование (или изображение не будет отображаться), и оно должно отображаться последним.

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

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

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

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

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

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

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

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

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

Как конвертировать изображения в 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 в png

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

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

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

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

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

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

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

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

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

Плагины преобразования WebP

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

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

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

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

EWWW Image Optimizer

EWWW Image Optimizer – это бесплатный плагин с функцией преобразования WebP. Он генерирует WebP-версию ваших файлов JPEG и PNG. Он включает в себя множество параметров, таких как Apache-совместимые правила перезаписи, и альтернативный вариант перезаписи WebP. Он совместим как с кешами, так и с CDN, и работает с плагином Cache Enabler от KeyCDN.

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

ShortPixel Image Optimizer

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

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

WebP Express

WebP Express – это бесплатный плагин, который создает изображения размером менее половины размера JPEG. Он направляет файлы JPEG и PNG в конвертер изображений для преобразования или в уже преобразованное изображение. Работает независимо от того, как изображения попали на сервер. Он работает с медиа-библиотекой, галереями и изображениями тем, на которые ссылается CSS.

Он не работает с сервером Microsoft IIS или WAMP и не был протестирован с мультисайтом. Это требует некоторой настройки для методов преобразования, но у вас есть несколько вариантов на выбор. Изображения сначала будут использовать метод преобразования вверху, и если этот метод не пройден, он будет двигаться вниз по списку, пока не найдет метод, который работает с изображением. Вы можете перетащить их в том порядке, в котором вы хотите их использовать.

Opti MozJpeg Guetzli WebP

Opti MozJpeg Guetzli WebP – бесплатный плагин, созданный с учетом Google Pagespeed Insights. Для конвертации изображений используются Mozilla MozJpeg, Google Guetzli и Google WebP. Кодировщики могут быть установлены локально или вы можете использовать встроенный ssh-клиент. Он обращается к кодировщикам удаленно, используя ssh-соединение с виртуальной машиной автора.

Он может конвертировать все ваши PNG-файлы не альфа-канала в формате JPEG. Резервное копирование ваших изображений перед внесением изменений. Вы можете вернуть ваши изображения обратно в любое время.

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

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

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

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

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

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

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

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

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

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

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

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

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