Как использовать webp для оптимизации картинок

Критика WebP

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

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

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

XnConvert

XnConvert is a feature rich image converter software. It can be used to convert one WebP image to JPG format, or batch convert WebP to JPG. Its interface is quite intuitive. Hence, you will easily get hold of the conversion process.

In the Input tab, add WebP images. You can add individual images or a folder of them, as per your ease. Now in the Output tab, choose Format as JPG. In addition to that, by clicking on Settings button, you can choose quality of output JPG image, specify DCT method, smoothing factor, and subsampling factor, enable Progressive approach and Optimize Huffman Table, etc. After that, you can choose a destination folder, filename mask, text case, preserve metadata, preserve color profile, etc., to get a desired output JPG file. Now, hit the Convert button to start the conversion of WebP to JPG.

Before you convert WebP to JPG, it lets you perform some actions on individual WebP images, in order to apply image filtering to output image. You can do so in the Actions tab. Here, you can adjust brightness, contrast, and gamma, add mask, crop, resize, rotate, add filters, set DPI, replace color, add watermark, and perform more image editing. You can learn more about XnConvert’s Photo Editing feature by going to aforementioned link.

The Status tab lets you view the progress of conversion process and estimated end time. Some general settings like Language (English, Spanish, German, French, Hebrew, etc.), preview background color, format settings, etc., are customizable from Settings tab.

XnConvert is basically an image processor. Using it, you can convert a large number of formats, including TIFF, GIF, JPG, PNG, RAW, CSV, ICO, PGM, PDF, and more. You can convert images to PDF or vice-versa, convert PNG to ICON, watermark images, and do a lot more.

Webp to JPG Converter

Webp to JPG Converter, as the name suggests, is a portable WebP to JPG converter software for Windows. Simply browse WebP images or a folder of WebP images to convert to JPG. After that, choose JPG as output format from its interface, and hit the Convertto button present right below its interface. The files will be converted to JPG, and you will be able to see the log information with output files’ location.

It is one of the easiest to use software for the purpose of conversion of WebP to JPG. It provides a flexibility to batch convert WebP to JPG. Apart from JPG, you can also convert WebP to PNG, GIF, or BMP.

Windows

Write a Comment

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

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

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

Pixillion Image Converter

Pixillion Image Converter is another software which supports the conversion of WebP to JPG. Although its a paid software, but it also provides a free version for non-commercial purpose only.

After launching the software, add WebP files or folder to convert to JPG. Now, select the Output format as JPEG, specify output folder, and choose JPG compression setting i.e. image quality. You can also add some effects to output before conversion, including Resize, Flip, Rotate, and Add Watermark (text, image). As you apply any of these effects, you can see the edited image preview too. After making desired adjustments, hit the Convert button.

You can also customize some more output properties by going to Tools > Options, e.g. preserve original metadata, rename pattern, etc.

Pixillion Image Converter is a dedicated image converter software. It supports a wide range of file formats for conversion purpose which include PNG, GIF, PDF, SVG, PGF, TIFF, DOCX, etc.

Paint.Net

Paint.Net is a popular photo editor software for Windows. Converting WebP to JPG in it is different from above mentioned software. It doesn’t inherently support WebP format. You need to follow some steps in order to utilize it as a WebP to JPG converter.

To Convert WebP to JPG in Paint.Net:

1. First of all, you need to download a plugin for WebP file type from the aforementioned link.
2. After you download this plugin, you need to extract the files of downloaded ZIP folder. In the extracted folder, you will find three DLL files. You need to copy these dll files and paste them in Paint.Net folder in your PC. To be precise, you need to paste these DLL files to installed Paint.Net folder > FileTypes subfolder.
3. It will now support WebP image format. You can browse a WebP image, and use its save as option to convert WebP to JPG.

As it is primarily a picture editor, you can edit WebP photos as per your requirement, before converting them to JPG.

In similar manner, Paint.Net can also be used to convert PNG to Icon, SVG editor, etc.

IrfanView

IrfanView is a popular graphic viewer for Windows. Converting WebP images to JPG in it is similar to that of Paint.Net.

To start with, you need to download required plugin from here. You can simply run the downloaded .exe plugin file to let it associate WebP DLL file with the software. But, in case you downloaded ZIP folder of the plugin, you need to manually copy and paste WebP DLL file to the installed IrfanView folder (in ‘Plugin’ subfolder). Now, you can open any of WebP files stored in your PC, flip it, rotate it, edit it, etc. And finally, to convert it to JPG, use “Save as” option.

Unlike Paint.Net, you can batch convert WebP to JPG in IrfanView, which is a plus point for this software. In order to do so, go to File > Batch Conversion or press key B; a new application window will popup. Choose mode as Batch Conversion, add desired WebP images, select Output format as JPG, choose output rename pattern, and specify output directory. In addition to that, it lets you choose output JPG quality and enable/disable other parameters like “save as progressive JPG”, “keep original EXIF data”, etc. Also, you can specify some advanced output properties, like crop, resize, change color depth, flip, rotate, sharpness, brightness, contrast, filters, etc. These output settings can be saved to a INI file, to utilize later. Finally, you need to hit Start Batch button.

IrfanView is a feature rich photo editor software. It supports a wide range of multimedia formats. You can use this software for different purposes, like CDR Viewer, EXIF Editor, CAD Viewer, Batch File Renamer, etc.

Какие браузеры поддерживают WebP

Формат поддерживают Chrome, Opera, браузер Android и остальные популярные браузеры, последним о поддержке в Firefox объявили Mozilla. Остались браузеры Apple, которые не хотят включать поддержку этого формата. Причиной может быть то, что компания разрабатывает более современный AVIF.

По информации с сайта
caniuse.com, на вторую неделю апреля 2019 года такие данные: WebP поддерживают 78,49% браузеров пользователей в мире и 68,58% в России.

Статистика с caniuse.com

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

Picosmos

Picosmos is a package of utility tools for image processing, including editing, watermarking, optimizing, screen recording, etc. It lets you batch convert WebP to JPG, as well as convert one WebP to JPG at a time.

After launching Picosmos, select Batch tool from its interface. In a new window, you can see various options including Convert at left panel. From the right panel, you can browse a folder of WebP images. Select a WebP image or multiple WebP images from browsed folder, and click on Convert option. A popup window will be generated, where you will be able to choose output format, resolution, JPG quality, and destination folder.

Another alternative to convert WebP to JPG is by using its Editor tool. Here, you can open a WebP image and use save as option to convert it to JPG format. In this mode, you can add some filters to output image, apply transformation, adjust color level, and do more picture editing.

Picosmos is a good option in this list of WebP to JPG converter software. You can read its full review here > Picosmos Review.

WebPconv

WebPconv is a free software to convert WebP to JPG. You can convert one or multiple WebP images to JPEG simultaneously.

To convert WebP to JPG, simply move to Decode tab. There, you can add WebP images using dedicated option provided on its interface. After that, click on option highlighted in black in above snapshot. You will see many Decoding Options there. Simply choose JPEG as output format, desired JPEG quality level, dither strength, enable or disable filter, etc. Now, hit the Convert button to let it convert WebP images to JPG format.

Similarly, you can convert WebP to other image formats including PNG, GIF, TIFF, or BMP.

It also lets you convert JPG to WebP. Also, conversion of PNG and GIF to WebP is possible. For that, use Encode tab. Here, you get to choose encoding options like preset type (photo, icon, drawing, text, etc.), quality factor, compression method, etc.

WebPconv is a dedicated WebP to JPG converter software. It has a clean and intuitive user interface. Along with desired image format conversion, you get to choose some output parameters too. Hence, I would recommend it for the same purpose.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

location / {

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

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

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

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

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

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

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

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

Chasys Draw IES

Chasys Draw IES is a set of various utility tools, including Chasys Draw IES Viewer, Chasys Draw IES Artist, Chasys Draw IES Converter, etc. You need to launch Chasys Draw IES Converter in order to convert WebP to JPG. For this, there are nine steps to follow, which are pretty simple:

1. Add a folder containing WebP files.
2. Select a desired Target Folder to save output.
3. Specify Renaming Options like pattern, text case, etc.
4. Choose target file format as JPG.
5. Select Resizing Options, including image size and resizing algorithm. Skip this step if you want same size as the input image.
6. If you want, you can apply Effects and Transformations, like rotation, noise reduction, etc.
7. Other options that it lets you customize are Privacy (remove EXIF tags for GEO location and date and time) and Automation (Passthru for unchanged files).
8. In this step, you can view summary of the options selected in above steps. In case you want to make changes, you can go back and do so.
9. Finally, hit the START button. The WebP files will be converted to JPG in the blink of an eye.

It also shows job log which includes information like time taken in conversion, number of converted files, number of files failed to convert, etc.

Chasys Draw IES is a nice alternative to use to convert WebP to JPG. This software is useful for various other purposes, like photo noise reduction, DNG viewer, NEF viewer, and more.

В каких случаях JPG оказывается лучше WEBP или ложка дёгтя

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

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

Первым идёт Микки Рурк с его фактурным лицом

Обратите внимание, сколько деталей теряет WEBP

{$alt}

{$alt}

При равном размере изображения, JPG выигрывает у WEBP

Обратите внимание на детальность прорисовки пор кожи и правый зрачок

Скачать Mickey Rourke.jpg 40.4 КБ

Скачать Mickey Rourke.webp 41.8 КБ. Светящийся логотип нашего блога на фоне темной бумаги

На втором изображении наблюдается потеря цвета ореола свечения и огромного количества мелких деталей. Тем не менее саму перчинку оба формата передают хорошо

Светящийся логотип нашего блога на фоне темной бумаги. На втором изображении наблюдается потеря цвета ореола свечения и огромного количества мелких деталей. Тем не менее саму перчинку оба формата передают хорошо.

{$alt}

{$alt}

Однозначный победа JPG над WEBP

Обратите внимание, как ухудшается качество свечения и темного фона изображения. Перчинка остаётся без видимых изменений.

Скачать black pepper.jpg 55.7 КБ

Скачать black pepper.webp 55.1 КБ

Логотип блога на фоне обычного листа бумаги. Мелкие детали на белый фоне в WEBP тоже страдают.

{$alt}

{$alt}

При равном размере изображения, JPG одерживает победу над WEBP

Обратите внимание на количество деталей мягкого белого фона

Скачать white pepper.jpg 57.9 КБ

Скачать white pepper.webp 57.5 КБ

WebP To JPG Converter Software

WebP To JPG Converter Software is a straightforward WebP to JPG converter software for Windows. It is entirely dedicated to the purpose of conversion of WebP images to JPG. Using it, you can convert single or batch convert WebP to JPG.

To start with, simply add WebP files or a folder containing them. Choose a destination location and click on Start Converting button. In a matter of few seconds, all added WebP images will be converted to JPG.

Although it is an efficient tool to convert WebP to JPG, but it has a limitation in its free version. When you add multiple files for conversion at a time, it converts only first file with high quality and rest are converted with low quality. Hence, I would suggest you to convert WebP images to JPG individually. Otherwise, you need to buy its pro version.

File Converter

File Converter is a shell extension for file format conversion. As you install this software, it is automatically added to the context menu of supported file formats. It supports a wide number of file formats including WebP, PNG, JPG, FLAC, AAC, OGG, MP3, WAV, MKV, MP4, AVI, GIF, PDF, etc.

To use it to convert WebP to JPG, you simply need to go to the location where WebP images are stored and right-click on a WebP file. Under the context menu, you will see File Converter > To Jpg option. You need to choose this option for converting WebP to JPG. Before doing this, you can use Configure presets option to adjust some output JPG parameters. These parameters include quality, scale, rotate, etc.

In similar manner, File Converter can be used to convert various other file formats, like PDF to PNG, WebP to PNG, MP3 to WAV, MP4 to MP3, MP4 to GIF, MP4 to WAV, etc.

File Converter is an easy and convenient WebP to JPG converter tool for Windows.