Погодите, а webp вообще-то ничего!

Выявленные плюсы и минусы форматов

Плюсы и минусыWEPB и JPG JPG WEBP
чёткие границы вокруг границ появляются артефакты небольшое размытие границ
градиенты появляются острые грани отлично
нечеткие детали хорошо теряют фактуру
общая чёткость чётко небольшая «мыльность»в высоком и низком диапазонах
общая чёткостьпри сильном сжатии чётко, появляются артефакты изображенте «замылено»в деталях, границы чёткие
прогрессивность грузится от размытого к четкому грузится сверху вниз
размер файла выше ниже на 30%
поддержка браузерами абсолютная >60%

Как мы видим из таблицы, WEBP не всегда лучше JPG. Тем не менее, чаще всего выигрывает по размеру и качеству, если не требуется показать мелкие фактурные детали.

Criticism

In September 2010, Fiona Glaser, a developer of the x264 encoder, wrote a very early critique of WebP. Comparing different encodings (JPEG, x264, and WebP) of a reference image, she stated that the quality of the WebP-encoded result was the worst of the three, mostly because of blurriness on the image. Her main remark was that «libvpx, a much more powerful encoder than ffmpeg’s jpeg encoder, loses because it tries too hard to optimize for PSNR» (peak signal-to-noise ratio), arguing instead that «good psycho-visual optimizations are more important than anything else for compression.»

In October 2013, Josh Aas from Mozilla Research published a comprehensive study of current lossy encoding techniques and was not able to conclude WebP outperformed JPEG by any significant margin.

Настройка

После установки зайдите в Настройки > WebP Express. На скришоте вы можете увидеть мои настройки плагина:

Настройки плагина WebP Express

General

В разделе General > Image types to work on выберите, какие форматы плагин будет оптимизировать. Формат WebP поддерживает прозрачность, поэтому за место “Only jpegs” выберите “Both jpegs and pngs”.

В Destination folder выберите место расположение изображений нового формата:

  • Mingled: при выборе «Mingled» изображения webp будут помещаться в ту же папку, что и оригинал, но только для изображений в папке Uploads. Другие изображения, например изображения тем, хранятся отдельно. 
  • Если вы используете WebP Express вместе с Cache enabler или Shortpixel, выберите этот параметр
  • In separate folder: изображения хранятся в отдельной папке (wp-content / webp-express / webp-images / doc-root).

Redirection rules

В разделе Redirection rules есть 2 параметра.

  • Redirect directly to existing converted images – Это добавит правила в .htaccess, которые перенаправляют непосредственно в существующие преобразованные файлы. Если вы не активируете этот параметр, это будет PHP-скрипт, который обрабатывает перенаправление на существующие файлы webp. Наилучшая производительность достигается путем перенаправления в .htaccess, поэтому включаем этот параметр.
  • Redirect requests for non-existing webp-files to converter – правило позволяет создавать WebP версию изображения автоматически, если оно ещё не создано. То есть когда человек заходит к вам на сайт, но у изображения нет WebP версии, она автоматически сгенерируется.

Conversion

Раздел Conversion отвечает за качество и способ сжатия. Я не хотел, чтобы качество изображений падало, поэтому установил значение 100. WebP сжимает изображения без потери качества, поэтому размер файла уменьшится, а качество нет. Вы можете экспериментировать с этим значением и установить то, что Вам подходит.

Conversion method определятся автоматически на основе значения сжатия. Также здесь присутствует возможность использовать платные API, что нам не интересно.

Ставим галочку напротив Convert on upload, чтобы изображения конвертировались при загрузки. Разработчик плагина всё учел, поэтому конвертируются также миниатюры изображения.

У Bulk convert есть 2 кнопки. Она отвечает за запуск принудительного сжатия. Плагин просканирует весь сайт, найдет изображения в теме, плагинах и конвертирует. Не пугайтесь, их будет много и это займет некоторое время. Кнопка “Delete converted files” удалит все файлы, которые создал плагин, если вы решите удалить плагин.

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

Alter HTML

Раздел Alter HTML поможет вам решить, что делать, если браузер посетителя не поддерживает формат WebP. Я рекомендую ставить настройки как у меня – Replace image URLs. Так изображения WebP будет показываться только в поддерживаемых браузерах, проблем с отображением фото не будет.

Если изображения не отображаются, то попробуйте выбрать “Replace tags with tags, adding the webp to srcset” и поставьте галочку у “Dynamically load picturefill.js on older browsers”. Тэг могут использовать более 93% пользователей.

PHP ломает WEBP

Как и положено, у этого блога есть 2 сервера. На тесте стоит php 5.6.36, на проме php 5.6.37. Внеся все необходимые правки, я протестировал сайт на домашнем компьютере и обновил пром. Я был удивлен, изображения на проме не отображались, вообще, хотя на тестовом сервере работали без проблем.

В консоли хрома ошибок не было, более того Хром рапортовал о нормальной загрузке изображений.

Консоль хрома рапортовала о успешной загрузке изображений.

Я скачал сгенерированный WEBP-файл с блога и… файл отлично открылся в ACDSee. Сравнивая файлы прома и теста, я обнаружил несоответствие размеров для сгенерированных WEBP-файлов на сервере и на домашнем компьютере. Размер файлов отличался всего лишь в 1 байт.

Изображение с теста и прома. Размер файлов не совпадает.

Вот эти 2 файла:

Скачать изображение с тестаjcup_gen.webp 157 КБ

Скачать изображение с промаjcup_ru.webp 157 КБ

Сдул пыль с HEX-редактора и полез смотреть, чего там не хватает. Оказалось, что промовкий PHP не дописывает 1 байт в конец файла, файл оказывается не валидным и Chrome не может его отобразить. Обновление пакетов php5.6 и php5.6-gd на проме не дало, ровным счётом, никаких результатов.

В конце файла отсутствует байт x00 Проблема невалидности WEBP.

Немного поисследовав структуру WEBP, я пришел к выводу, что все живые файлы всегда заканчиваются байтом x00, кроме того WEBP продолжает нормально работать, если добавить любое количество x00 в конец. Можете проверить сами, всё отлично работает:

Скачать webp с огромным кол-ом x00 в концеru_with_many_x00.webp 157.1 КБ

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

    //x00 webp generation fix
    $fpr=fopen($webpDestination, "a+");
    fwrite($fpr, chr(0x00));
    fclose($fpr);

Добавляем поддержку Webp

  • Как добавить поддержку WebP в Linux
  • Программы, поддерживающие работу с изображениями WebP в Linux и Windows
  • Как конвертировать изображения WebP в JPEG, PNG и другие форматы

Для работы с форматом webp в линукс нужно установить пакет командой:

sudo apt install webp

1 sudo apt install webp

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

Конвертировать JPEG / PNG в WebP

Для преобразования файлов JPEG или PNG в WebP нужно использовать программу «cwebp» для сжатия. Пример команды:

cwebp -q [JPEG / _имя_файла_PNG] -o

Пример изменения файла:

cwebp -q 90 example.jpeg -o example.webp

1 cwebp -q 90 example.jpeg -o example.webp

После применения команды, файл example.jpeg будет преобразован в example.webp.

Конвертировать WebP в JPEG / PNG

Думаю более интересно обратное изменение файлов в более привычные для нас форматы. Теперь изменим webp на jpg или png. Для этого применим программу «dwebp». Пример команды:

dwebp -o

Пример для конвертирования:

dwebp example.webp -o example.png

1 dwebp example.webp -o example.png

В результате получим файл example.png в привычном формате .png. Если нужно в jpeg то вместо .png пишем .jpeg.

Программы с графическим интерфейсом для работы с WebP в linux

На мой взгляд самыми удобными для для открытия файлов webp это gThumb (для рабочей среды gnome и всех сделанных на её основе) и Gwenview (штатный обозреватель фото для KDE). Пользуюсь обеими первая хороша как быстрый и удобный просмотровщик фотографий с помощью второй можно еще делать небольшое редактирование.

Если вы не используете KDE учтите, что будут загружены и установлены пакеты этой среды рабочего окружения. Для установки Gwenview выполните команду:

sudo apt install gwenview

1 sudo apt install gwenview

Для полной русификации программ KDE установите поддержку Русского языка. Команда:

sudo apt install kde-l10n-ru

1 sudo apt install kde-l10n-ru

Для установки gThumb выполните команду:

sudo apt install gthumb

1 sudo apt install gthumb

После установки можно свободно открывать, просматривать и сохранять картинки в нужном вам формате. gThumb я сделал программой по умолчанию работающей с форматом webp. В XFCE это сделать очень просто. Кликните по файлу правой кнопки мыши и в контекстном меню выберите «Открыть в другом приложении» (Открыть с помощью)

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

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

Реализация WEBP на этом блоге

Сегодня, из всех браузеров, полноценно поддерживают WEBP только Chromium-подобные браузеры. Не очень-то и обширно, но радует, что крупные игроки один за одним сообщают о внедрении технологии в ближайшее время. Тем не менее, реализуя поддержку WEBP уже сегодня, мы получаем ощутимый прирост скорости загрузки. А по данным comss.ru, мы покрываем более 60% всех пользователей.

Браузер Покрытие, % webp Примечание
Chromium 61,29 да все Chromium-подобные браузеры(Chrome, Yandex-браузер, новая Opera и.т.д)
Firefox 12,38 нет говорят, поддержку уже добавили в тестовую версию
Edge 4,03 нет поддержку грозятся внести не только в Edge, но ещё и в Windows

Как же быть с браузерами, не поддерживающими WEBP? Умные головы придумали тег , а в нём теги с указанием типа изображения и пути к файлу. Браузеры сами решают, какое изображение они будут показывать. Например, Chrome выбирает WEBP. Современные браузеры корректно обработают эту конструкцию, а старые пропустят неизвестные теги

Особое внимание нужно обратить на атрибут type, в нем указывается mime-тип изображения

Я был приятно удивлен, обнаружив поддержку WEBP в библиотеке php-gd. На стороне сервера за сохранение изображений отвечают следующие функции:

	imagejpeg($imageObject, $jpgDestination,  $quality); //в JPG
	imagewebp($imageObject, $webpDestination, $quality); //в WEBP

Support

An example WebP image

Among web browsers, Google Chrome, Firefox,Opera, GNOME Web, Midori, Falkon, Pale Moon, and Waterfox natively support WebP. EdgeHTML based versions of Microsoft Edge supports WebP through a platform extension (installed by default). EdgeHTML based versions of Microsoft Edge doesn’t support platform extensions, including the WebP image format extension, when running in the security hardened “Application Guard” mode. Since versions of Microsoft Edge released after January 2020 are based on the Chromium browser, WebP support is built-in without the need of platform extensions.

WebP can also be displayed in all major browsers using the WebPJS JavaScript library, although support in Internet Explorer 6 and above is achieved using Flash.

Amongst graphics software, Picasa (from version 3.9),PhotoLine,Pixelmator,ImageMagick,XnView,IrfanView,GDAL, Aseprite,Paint.NET, (from version 4.2.5) and GIMP (from version 2.10) all natively support WebP. In 2019, released a free plug-in that enables WebP support in Adobe Photoshop. Before that, free Photoshop plug-ins were released by Telegraphics and fnordware. Imagine supports WebP via a plugin. GIMP up to version 2.8 also supported WebP via a plugin, later this plugin was shipped in GIMP 2.9 branch, and received multiple improvements. Google has also released a plug-in for Microsoft Windows that enables WebP support in Windows Photo Viewer, Microsoft Office 2010, FastPictureViewer, and any other application that uses Windows Imaging Component.

FFmpeg linked with the VP8/VP9 reference codec library libvpx can extract VP8 key frames from WebM media and a script can then add the WebP RIFF header and the NUL pad byte for odd frame lengths. Meanwhile, FFmpeg supports libwebp directly.

Gmail and Picasa Web Albums (both Google web applications) support WebP. Support for WebP is also planned for Google App Engine. The Instant Previews feature of Google Search uses WebP internally to reduce disk space used by previews.Android 4.0 supports encoding and decoding WebP images (via bitmap and Skia). SDL_image supports the format since 1.2.11.

Telegram Messenger uses WebP for their Stickers, claiming they are displayed 5 times faster compared to the other formats usually used in messaging apps.

In early beta versions of macOS Sierra and iOS 10, Apple added WebP support, but was later removed GM seed versions of iOS 10 and macOS Sierra released 7 September 2016. WebP is unsupported in macOS and iOS Safari browser as of version 13.

Content management systems usually do not support WebP natively or by default. However, for most popular CMS, extensions are available for automated conversion from other image formats to WebP and delivering WebP images to compatible browsers.

В каких случаях 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 КБ

See also

  • FLIF, a work-in-progress lossless image format which claims to outperform PNG, lossless WebP, lossless BPG and lossless JPEG2000 in terms of compression ratio, introduced in 2015
  • BPG, an image format intended to be a more compression-efficient replacement for the JPEG image format, based on the intra-frame encoding of the High Efficiency Video Coding (HEVC) video compression standard, introduced in 2014
  • HEIF, another image format based on HEVC
  • JPEG XR, an alternative to JPEG 2000 supporting HDR and wide gamut color spaces, introduced in 2009
  • JPEG 2000, an improvement intended to replace the older JPEG by the JPEG committee, introduced in 2000
  • MNG and APNG, PNG-based animated image formats, supporting lossless 24-bit RGB color and 8-bit alpha channel
  • AV1 Still Image File Format, a container format based on the AV1 video codec

Чем открыть 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?

И как .WEBP превратить в .JPG? Сегодня мы ответим на два самых популярных вопроса об этом графическом формате. И заодно расскажем его историю и радужные перспективы.

Кто регулярно скачивает с интернета картинки, тот наверняка сталкивался с форматом .webp. Популярность этого формата для хранения растровых изображений растет с каждым годом. Дзен, к примеру, тоже использует .webp.Для начала мы ответим на поставленные в заголовке вопросы:
1. Все современные браузеры открывают файлы в формате .wepb. Если ваш браузер этого не умеет, обновите его.
2. Также этот формат понимают почти все просмотрщики изображений: Paint, FastStone Image Viewer, IrfanViewer, XnView.
3. Тем не менее, если в Windows вы щелкнете по файлу .webp, он может не открыться. Нужно объяснить Виндоус, какой программой следует автоматически открывать эти файлы. Для этого щелкаем правой кнопкой по файлу .webp, затем «Открыть с помощью > Выбрать другое приложение». Не забудьте поставить галочку в пункте «Всегда использовать данное приложение для отырктия .webp файлов».

4. Чтобы сохранить WEBP в JPG, воспользуйтесь любым вьювером изображений.
5. Чтобы сохранить JPG в WEBP, нужно использовать специальные конвертеры. Например, Webpconv.А теперь расскажем об истории и будущем формата
JPG — это самый популярный формат для хранения и публикации фотографий и картинок на компьютере и в интернете. Он был разработан еще в конце 1980-х годов. Формат оказался настолько хорош, что долгие годы у него не было серьезных конкурентов. Попытки были (JPEG 2000, JPEG-XR), но старичка с вершины горы никто скинуть не смог.
И тут на сцене появился Google, который в 2010 году представил новый формат сжатия изображений с потерями и без потерь качества под названием WebP. Он базируется на алгоритме сжатия неподвижных изображений из видеокодека VP8 (Google купила разработчика этого кодека в том же году) и использует контейнер RIFF. Формат WebP — открытый стандарт, т. е. его могут использовать все желающие без ограничений.При одинаковых параметрах и качестве WebP сжимает на 30-40% лучше, чем JPG и на 25-30% лучше, чем PNG (при сжатии без потерь). А еще WebP поддерживает прозрачность и анимацию.
WebP в отличие от классического JPG поддерживает сжатие без потерь. JPG всегда сжимает с потерями, поэтому каждое пересохранение JPG даже в максимальном качестве ухудшает изображение.

WebP в первую очередь разработан для интернета. Раньше не все браузеры умели показывать изображения в формате WebP, сегодня это делают практически все интернет-обозреватели. Поэтому сайты постепенно переходят на новый формат. Во-первых, изображения занимают меньше места на сервере, во-вторых, есть неподтвержденные данные о том, что Google повышает поисковую выдачу для таких сайтов.
Пока идет переходный период, веб-мастерам рекомендуют использовать изображения сразу в двух форматах: JPG и WEBP. Если браузер пользователя умеет работать с новым форматом, ему выдается картинка в формате WEBP. Если нет — идет выдача JPG.Сможет ли WebP победить JPG? В ближайшие годы этого не произойдет. Но через несколько лет ситуация может измениться. С Google не поспоришь.

  • Вперёд >

Technology

Simple WebP
Bytes Content
R I F F
length+8
W E B P
V P 8
length (padded)
VP8 key frame
pad (even length)

WebP’s lossy compression algorithm is based on the intra-frame coding of the VP8 video format and the Resource Interchange File Format (RIFF) as a container format. As such, it is a block-based transformation scheme with eight bits of color depth and a luminance-chrominance model with chroma subsampling by a ratio of 1:2 (YCbCr 4:2:0). Without further content, the mandatory RIFF container has an overhead of only twenty bytes, though it can also hold additional metadata. The side length of WebP images is limited to 16,383 pixels.

WebP is based on block prediction. Each block is predicted on the values from the three blocks above it and from one block to the left of it (block decoding is done in raster-scan order: left to right and top to bottom). There are four basic modes of block prediction: horizontal, vertical, DC (one color), and TrueMotion. Mispredicted data and non-predicted blocks are compressed in a 4×4 pixel sub-block with a discrete cosine transform or a Walsh–Hadamard transform. Both transforms are done with fixed-point arithmetic to avoid rounding errors. The output is compressed with entropy encoding. WebP also has explicit support for parallel decoding.

The reference implementation consists of converter software in the form of a command-line program for Linux (cwebp) and a programming library for the decoding, the same as for WebM. The open source community quickly managed to port the converter to other platforms, such as Windows.

WebP’s lossless compression, a new format unrelated to VP8, was designed by Google software engineer Jyrki Alakuijala. It uses advanced techniques such as dedicated entropy codes for different color channels, exploiting 2D locality of backward reference distances and a color cache of recently used colors. This complements basic techniques such as dictionary coding, Huffman coding and color indexing transform. This format uses recursive definition: all of the control images such as the local entropy code selection are encoded the same way as the whole image itself.

Animation

Google has proposed using WebP for animated images as an alternative to the popular GIF format, citing the advantages of 24-bit color with transparency, combining frames with lossy and lossless compression in the same animation, and as well as support for seeking to specific frames. Google reports a 64% reduction in file size for images converted from animated GIFs to lossy WebP, and a 19% reduction when converted to lossless WebP.

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

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

  • Opera;
  • Adobe Photoshop;
  • Google Chrome.

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

Adobe Photoshop

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

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

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

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

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

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

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

Ссылка на основную публикацию