Что такое webp. Загадочный И Удобный Формат WebP В Веб-Дизайне И Для Photoshop

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

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

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

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

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

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