Что такое формат изображения WebP (и почему это важно знать)? Как в Windows открыть изображения в формате WebP.

Подавляющее большинство изображений, которые можно встретить на страницах сайтов, имеют формат JPG . Менее распространены PNG и GIF , и уж совсем редко встречаются картинки в формате BMP , главным образом, по причине их большого веса, увеличивающего время загрузки страницы в браузере. Так или иначе, вы можете скачать любое из этих изображений на компьютер и открыть его встроенным вьювером Windows.

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

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

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

Если сталкиваться с WebP вам приходится лишь время от времени, вот простой способ «превратить» его в JPG или PNG без использования сторонних инструментов. Кликните по WebP -картинке и откройте ее в новой вкладке. В браузерной строке вы увидите длинный адрес, в самом конце которого будет три символа -rw . Удалите их и нажмите «ввод» . Картинка перезагрузится, но на этот раз уже в исходном формате. Далее скачиваем ее обычным для изображений способом.

С помощью расширения «Save Image As Png»

Тем, кому приходится иметь дело с WebP постоянно, можем посоветовать установить бесплатное расширение для Chrome , скачав его со страницы chrome.google.com/webstore/detail/save-image-as-png/ . Плагин добавляет в контекстное меню скачиваемой со страницы картинки одноименную опцию. Дальнейшие действия вам понятны. PNG может быть и не совсем подходящий формат, но суть не в этом, главное, что скачанную картинку можно просматривать штатным вьювером Windows.

Конвертирование онлайн

А еще WebP -изображение можно сконвертировать в одном из онлайн-конвертеров, к примеру, , доступного по адресу convertio.co/ru/webp-jpg или , расположенного по адресу www.zamzar.com/ru/convert/webp-to-jpg . Оба сервсисы предельно просты в использовании, только у есть небольшой минус - для получения сконвертированной картинки потребуется указать свой email , на который она и будет отправлена. Оба онлайн-конвертера умеют преобразовывать WebP в популярные форматы, оба совершенно бесплатны, обязательной регистрации не требуют.

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

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

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

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

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

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

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

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

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

Уже существует несколько инструментов для удобной конвертации JPG, PNG и других форматов файлов в WebP.

Онлайн-конвертеры в WebP

• Squoosh — инструмент для преобразования и сравнения форматов изображений от Google
• Online-Convert.com — онлайн-конвертер

Инструменты командной строки для WebP

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

Резервные копии изображений можно создать с помощью элемента Элемента. Это HTML5 элемент, который позволяет нам использовать несколько исходных файлов для одного изображения.

Чтобы предоставить альтернативный источник изображения, мы используем элемент внутри элемента Элемента.
У элемента есть атрибуты для определения типа изображения и инструкций, когда какой тип использовать:

• type: MIME тип файла источника;
• srcset: Путь к файлу изображения. Для вывода одного изображения разных размеров можно использовать несколько файлов (см. )
• sizes: Список размеров каждого исходного файла (см. Статью выше)
• media: Медиа-запрос для определения, какой из источников будет использоваться для вывода картинки.

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

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

Если сравнивать JPEG с WebP, качество их изображения одинаковое, но файл в формате WebP может быть меньше по размеру более чем на 30%. Это означает, что владельцы веб-сайтов могут спокойно публиковать высококачественные изображений, не опасаясь, что это приведет к медленной загрузке их сайтов и серьезному пожиранию трафика пользователей, и особенно тех, которые пришли с мобильных устройств. Некоторые популярные сайты, например, Facebook и Google, уже используют эту технологию сжатия изображений для обеспечения быстрого серфинга на смартфонах и планшетах.

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

Работа с WebP в Windows

Есть одна проблема, с который вы столкнетесь после скачивания WebP-файла на свой компьютер, а именно, вы просто не сможете посмотреть его. Дело в том, что формат находится на ранней стадии своего развития и поддерживается пока не везде. Стандартными средствами Windows этот формат открыть нельзя. К счастью, Google уже выпустила WebP-кодек для операционной системы от Microsoft.

Этот кодек включает все, что необходимо для открытия WebP-файлов в Windows 8, Windows 7, Vista и даже XP, используя встроенный просмотрщик изображений.

Процесс установки очень простой. Скачайте файл WebPCodeSetup.exe на сайте Google Developer, дважды щелкните по нему и следуйте простым инструкциям мастера установки.

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

А если сами изображения огромны по размеру (ширина-высота)? Их немного на станице, но они просто величественны (2К, 4К форматы). Ведь почти всем нам хочется увидеть красивые фотографии или возможности графических видеокарт. Да что уж говорить, зачастую, весь веб-дизайн создается сплошь из изображений. То это полосочки, то квадратики с текстурой, то клипарты и прочее.

Одним словом, использоваться изображения в большом количестве или большого размера могут по-разному и на самых разных сайтах. Как можно решить такую проблему и нужно ли? Мы рассмотрим один из способов, который в реалии используется многими сайтами на протяжении последних лет и, разумеется, разберемся, как в этом может помочь Photoshop и нужно ли это вообще.

Начинаем…

Google спешит на помощь

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

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

В приведенном выше примере визуальные различия практически отсутствуют, точнее они незаметны при сжатии на 70%. Но при этом версия JPEG весит 49,8 Kb, а версия WebP - 15 Kb , соответственно, процент сжатия во втором случае можно увеличить, не опасаясь за большой размер файла. Не так уж и плохо, если учесть, что визуально они практически идентичны.

Возникает резонный вопрос: откроются и прогрузятся ли такие изображения на станице сайта в браузерах и каких именно. Поскольку формат WebP создан Google, то, соответственно, и поддержка в Chrome, Яндекс, Opera тоже есть. В целом же поддержка осуществляется в 90% браузерах, в том числе и мобильных версиях. Поддержки в IE и Edge по умолчанию, увы, нет.

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

JPEG (180 Кб)

PNG (213 Kb)

WebP (91 Kb)

Преобразование изображений в WebP

Вариант 1 - Photoshop

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

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

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

Вариант 2 - Online converter

Другим вариантом конвертации является использование онлайн-конвертера - Image online-convert . Работает ничуть не хуже, чем в Photoshop’е, но благодаря ему быстрее и удобнее делать пакетное преобразование файлов.

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

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

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

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

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

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

Как увидеть файлы WebP на компьютере

Изначально в Windows нет поддержки данного формата и если Telegraphics создали плагин для Photoshop, то Google выпустила плагин для возможности увидеть файлы изображений в обычном «Средстве просмотра фотографий» Windows. Также этот плагин создает и превью изображений в проводнике, для Диспетчера рисунков Microsoft Office. Загрузка представлена ниже.

Разработчики приложений PaintShop Pro, IrfanView, Picasa, XnView, Gimp, Paint.NET идругих тоже создали поддержку WebP, загрузить которую можно уже с их официальных сайтов непосредственно.

Кому это нужно? За и против

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

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

PNG (124 Kb)

WebP (78 Kb)

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

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

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

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

Где используется WebP

С первого раза, посещая тот или иной сайт, сказать с уверенностью, используется WebP или нет - нельзя. Все дело в том, что изображения могут конвертироваться в JPEG. Но зато определить, где именно на странице есть WebP, а где - JPEG можно через консоль разработчика. Так, например, портал видеоигр Stevivor конвертирует скриншоты, карты и большие изображения именно в WebP, для сохранения качества и небольшого размера. Видеигр много, гайдов для каждой единичной игры тоже, картинок еще больше - использование 100% оправдано.

Telegram сохраняет в формате WebP картинки-стикеры, которые так популярны и на десктопном варианте соцсети, и на мобильном.

Это новый формат изображения от Google, который использует как сжатие с потерями (компромисс между качеством и размером), так и без потерь (снижение размера без компромисса в отношении качества).

Google разрабатывает и формат, и программное обеспечение, связанное с WebP по лицензии BSD . Он был выпущен 30 сентября 2010 года, является открытым форматом и использует расширение файла.webp.

Основной механизм WebP сжатия

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

Таким образом, сжатие с потерями WebP - как JPEG - основано на прогнозировании блока.

Поддержка и использование

В Google Chrome и Opera есть встроенная поддержка WebP. Среди графических программных обеспечений, Picasa , Photoline , Pixelmator , ImageMagick , Konvertor , XnView, IrfanView и GDAL все изначально поддерживают WebP.

Facebook начал использовать WebP для снижения затрат сети и ускорения своего веб-сайта. Даже относительно небольшие улучшения в области эффективности начинают расти в масштабе Facebook. Когда люди загружают JPEG / JPG изображения, Facebook автоматически делает копии в формате WebP. Они, видимо, начали сейчас отправлять эти изображения людям, использующим Chrome и Opera.

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

Основные проблемы возникают, когда человек хочет просмотреть изображение в программном обеспечении, а не в браузере или внести изменения в него, так как большинство наиболее популярных графических приложений - в том числе Window’s или OS X’s image viewer и Photoshop - не могут изначально обработать WebP.

В октябре 2013 года, Джош Аас из Mozilla Research опубликовал всестороннее исследование о современных методах кодирования с потерями и не смог сделать вывод, что WebP обошел JPEG c каким-либо значительным отрывом.

Тем не менее, Telegraphics выпустили бесплатный плагин, который обеспечивает поддержку WebP в Adobe Photoshop, GIMP и поддержку Paint.NET плагинов WebP via. Google также выпустил плагин для Windows, который обеспечивает поддержку WebP в Windows Photo Viewer, Microsoft Office 2010 и любом другом приложении, которое использует Windows Imaging Component.

Преимущества и статистика

WebP документация Google утверждает:

Сжатые изображения WebP без потерь на 26% меньше по размеру по сравнению с изображениями PNG. Сжатые изображения WebP с потерями на 25-34% меньше по размеру по сравнению с изображениями в формате JPEG по эквивалентному индексу SSIM. WebP поддерживает прозрачность сжатых изображений без потерь (также известную как alpha channel) со всего лишь 22% дополнительных байт. Прозрачность также поддерживается сжатием с потерями и обычно обеспечивает размер файла в 3 раза меньше по сравнению с PNG, когда сжатие с потерями приемлемо для красного/зеленого/синего цветовых каналов.

Преобразование в WebP

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

Мы достаточно поговорили о WebP. Давайте перенесем наши знания о WebP на что-нибудь конструктивное и творческое. Мы посмотрим, как сделать стикеры для Telegram из изображения JPEG и конвертировать его в файл.webp. Мы собираемся создать стикер из следующего изображения.

Мы используем Photoshop, чтобы сделать фоновое изображение прозрачным. Мы сделаем это, выбрав ‘Background Eraser Tool “. Мы также обрежем изображение, так как оно довольно большое!

Наконец мы используем онлайн конвертер для преобразования изображения в.webp формат и наш стикер готов!

Вы можете создать много других стикеров аналогичным образом для общения с вашими друзьями в Telegram.

Вывод

WebP является новым форматом сжатия изображений и поддерживаясь Google, Facebook, Opera и Telegram, безусловно, стал популярней. Это формат, который уже имеет большое количество фанатов и недоброжелателей.

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

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