Как в Windows открыть изображения в формате WebP. Формат WebP — как использовать и зачем он нужен

XnView - довольно мощная программа, сочетающая в себе множество функций по работе с изображениями. Это может быть и простой просмотр файлов, и их конвертирование, и незначительная обработка. Является кроссплатформенной, что позволяет использовать её практически в любой системе. Программа уникальна ещё и тем, что поддерживает около 400 различных форматов изображений, среди которых встречаются как самые используемые и популярные, так и нестандартные форматы. XnView может производить пакетную конвертацию изображений. Правда, сконвертировать их можно только в 50 форматов, но среди этих 50 форматов присутствуют все популярные расшир...

Chasys Draw IES - многофункциональный редактор, включающий ряд таких утилит, как графический редактор, утилиту для просмотра изображений и фото, модуль для пакетного преобразования графики и модуль по конвертации цифровых фотографий в RAW-формат. В главном окне приложения можно персонализировать рабочий лист, выбрав тип проекта, который необходимо создать. Приложение позволяет осуществлять такие сложные манипуляции с изображениями, как создание композиция для печати, анимация для веб-ресурсов, изображение для компакт-диска, DVD. Программа позволяет сканировать изображение при наличии нужного оборудования. Помимо такого набора...

XnConvert – полезная утилита для конвертирования и первичной обработки фотографий и изображений. Работает с 400+ форматами. Поддерживает все популярные графические форматы. С помощью простых инструментов XnConvert можно регулировать яркость, гамму и контрастность. В приложении можно менять размер фотографий, накладывать фильтры и ряд популярных эффектов. Пользователь может добавлять водяные знаки и заниматься ретушью. При помощи приложения можно удалять мета-данные, обрезать файлы и вращать их. XnConvert поддерживает журнал, в котором пользователь увидит всю подробную информацию о своих недавних манипуляциях с изображениями.

IrfanView – бесплатный просмотрщик графических файлов, отличительными чертами которого является малый размер и функциональность. IrfanView поддерживает большое количество форматов, обладает понятным интерфейсом и необходимым набором функций. Так, с её помощью можно не только просматривать изображения, но и поворачивать их под любым углом, заниматься небольшим исправлением цветов, убирать эффект красных глаз с фотографий и т.п. Также, с помощью IrfanView можно делать скриншоты (как всего экрана, так и отдельных областей), выдирать значки и иконки из различных файлов, переименовывать файлы по заранее заданному шаблону, а...

Honeyview - простая и красивая программа для просмотра фотографий. Поддерживает все популярные форматы изображений и фотографий, при этом и те что «необработанные». Также присутствует удобный интерфейс, где можно просматривать фотографию на весь экран, либо параллельно две фотографии, что очень удобно, если нужно выбрать лучшую. Можно сразу сохранять любимые фотографии в отдельную папку. Если в фотографии присутствую данные о место положение, тогда программа откроет Google Maps, где будет возможно увидеть место где сделана фотография. С помощью горячих клавиш программа откроет в проводнике Windows, фотографию которая открыта в...

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

Picasa – программа для просмотра изображений и их сортировки, отличающаяся обилием различных функций и удобным интерфейсом. Данную программу совсем недавно купила Google, а потому в ней появилась интеграция с сервисами этой компании. Сама программа способна просканировать все диски и вывести все найденные фотографии и картинки. Сначала некоторым пользователям может показаться неудобным, что программа сортирует их в порядке создания, однако если вы создадите несколько альбомов и разобьёте эти картинки по темам, то поиск нужного изображения станет намного проще. Кроме простого сканирования изображений, программа умеет за...

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

А если сами изображения огромны по размеру (ширина-высота)? Их немного на станице, но они просто величественны (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 картинки-стикеры, которые так популярны и на десктопном варианте соцсети, и на мобильном.

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

Доброго времени суток друзья. Совсем недавно обнаружил, что у меня не получается сохранять картинки из браузера правой кнопкой мыши в стандартных графических форматах (JPG, PNG), но при этом происходит сохранение изображений в неизвестном для меня формате WebP . Ну ладно, файл я скачал, а теперь вопрос, как открыть WebP ?. В какой программе? Вот об этом мы сегодня и поговорим.

Что такое WebP?

Как гласит одна мудрая википедия:

WebP (произносится как англ. Weppy “Веппи”) - новый формат сжатия графических изображений с потерями и без потерь качества исходного файла.

Зачем нам что-то новое, когда есть старые и знакомые всем JPG и PNG? Как уверяют разработчики (а это не есть кто, а сама компания Google Inc), большинство современных изображений используются в Интернете боле десяти лет и основаны на технологиях прошлого века. Вот он как получается…

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

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

Вот поэтому, очень скоро я поделюсь с вами секретной информацией:-), как я ускорил свой блог (работы по ускорению еще продолжаться). Вы узнаете несколько способов оптимизации загрузки сайта, поэтом , что не пропустить эту статью. Новую статью вам анонсировал, и настало время узнать, как и чем же открыть файл webP ?

Чем открыть файл формата WebP?

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

Для того чтобы реализовать данную возможность, нужно установить дополнительный плагин в операционную систему. Все дальнейшие действия опробованы лично мной на ОС Windows 7 64-bit. Но как уверяют разработчики плагина, должно получиться открыть webp и на Windows XP (SP3), а также Windows Vista.

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

2 После того как плагин скачается, нужно двойным кликом запускаем процесс установки. Откроется следующее диалоговое окно, где нужно нажать «Next»

4 В открывшемся диалоговом окне нажимаем пункт «Typical»

5 И в завершающем окне нажимаем кнопку «Install» чтобы запусить установку плагина

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

Кликайте по ним и радуйтесь, теперь вы легко и просто можете просматривать файлы webp в стандартном просмоторщике Windows.

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

P.S. На днях ходил снова на почту, в это раз за зимним комбинезоном Oldos для своей маленькой дочки Лизы, который был заказан в интернет-магазине . Заказ пришел достаточно быстро. Комбинезон просто супер. Обязательно потом сфоткаю и покажу.

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

На блоге был оставлен юбилейный 500 комментарий Николаем (). За это Николай получает небольшой приз в размере 50 рублей на свой электронный кошелек.

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

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