Формат WebP — как использовать и зачем он нужен. Загадочный И Удобный Формат WebP В Веб-Дизайне И Для Photoshop

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

- Расширение (формат) - это символы в конце файла после последней точки.
- Компьютер определяет тип файла именно по расширению.
- По умолчанию Windows не показывает расширения имен файлов.
- В имени файла и расширении нельзя использовать некоторые символы.
- Не все форматы имеют отношение к одной и той же программе.
- Ниже находятся все программы с помощью которых можно открыть файл 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, а потому в ней появилась интеграция с сервисами этой компании. Сама программа способна просканировать все диски и вывести все найденные фотографии и картинки. Сначала некоторым пользователям может показаться неудобным, что программа сортирует их в порядке создания, однако если вы создадите несколько альбомов и разобьёте эти картинки по темам, то поиск нужного изображения станет намного проще. Кроме простого сканирования изображений, программа умеет за...

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

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

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

WebP PNG JPG GIF
Сжатие с потерями + + +
Сжатие без потерь + + + +
Прозрачность + + +
Анимация + +

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

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

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

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

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

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

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

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

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

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

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

  • Обработка изображений
    • Recovery Mode

    Есть еще пара особенностей формата WebP. Настройки сжатия не повторяют в точности таковые в JPEG. Не стоит ожидать, что 50%-качество JPEG будет соответствовать 50%-качеству WebP. В случае в WebP качество падает довольно стремительно, так что начинать лучше с наибольших значений и постепенно их уменьшать. Другой плюс в пользу WebP - способность добавлять маску альфа-канала, прямо как в PNG. В отличии от конкурирующего формата, изображение формата WebP вы можете сжать до одной десятой размера изображения в формате PNG. Это действительно то, чем выделяется WebP.

    Один пример из жизни: файл PNG размеров 880Кб (24-битное изображение с альфа-каналом) было сжато до 41Кб - сжатие в 95%! Хоть это и не обычная ситуация, но возможности WebP видны налицо.


    Разница в качестве текстур. (Полная версия)

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

    Настройки качества для альфа-канала применяются и к самому изображению. Например, 50%-качество изображений будет иметь 50%-качество альфа-канала. В нашем тестировании, мы ожидали искажения края маски, однако были также заметные изменения всего изображения. Конечно, это вариант для дальнейшего уменьшения размера, но тогда стоит очень тщательно следить за качеством изображения.

    Также, обратите внимание на нежелательные полосы в альфа-канале.

    Разница в качестве альфа-канала. (Полная версия)

    Мы очень обрадовались, когда обнаружили Плагин для Photoshop для поддержки WebP. С ним можно легко настраивать качество WebP-изображений. Правда, интерфейс плагина оставляет желать лучшего. В настоящее время вы не можете просмотреть изображение для оценки параметров качества.

    WebP Плагин для Photoshop.

    В качестве обходного пути, можно сравнить файлы в Google Chrome. Открытие диалогового окна «Сохранить» также неудобно в Photoshop. Для этого мы назначили горячую клавишу, чтобы не использовать постоянно диалоговое окно. Несмотря на неудобства, это все-таки стоит того.

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

    Несмотря на многообещающие результаты тестирования, нет однозначного лидера среди всех форматов. Хоть WebP и показывает себя впечатляюще среди других форматов, JPEG и 8-битный PNG иногда все еще лучше WebP по размеру и/или качеству. Поэтому, советуем провести собственное тестирование до того, как будете переводить все свои изображения на WebP, потому что он может не совсем соответствовать Вашим требованиям.

    Реализация

    Определив, что WebP может быть эффективным инструментом для нас, мы обратились к нашим разработчикам для реализации этого формата. WebP полностью поддерживается браузерами Chrome, Opera, Opera Mini, Android-браузер и Chrome для Android. Firefox, Internet Explorer и Safari не имеют полной поддержки, хотя у Firefox с WebP своя история. К счастью, есть несколько способов отображать WebP в этих браузерах.

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

    Мы провели 4 теста, чтобы определить, какой формат нам лучше подходит. Первое использовало JPEG как контрольный образец, а остальные 3 использовали подходы, описанные ниже. Мы использовали JPEG-изображение и WebP-изображение одинакового качества (269Кб JPEG и 52Кб WebP).

    Во втором тесте, мы включили WebPJS , полифилл размером 67Кб, созданный Домиником Хомбергером. Он обеспечивает поддержку WebP во всех современных браузерах, даже в IE6 и выше. Полифилл удобен тем, что не нужно менять img-тэг в вашем коде, нужно просто изменить расширение изображений с.jpg и.png на.webp.

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

    Последний тест было в использовании файла.htaccess на сервере для внедрения WebP. Этот вариант был разработан Винсентом Орбахом .

    Используя его, код в.htaccess смотрит, есть ли WebP-версия каждого изображения на странице. Если браузер поддерживает WebP и WebP-изображение доступно, отдается оно, а не JPEG или PNG. Это удобно и не нужно менять разметку веб-страницы.

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

    Также было замечено, что на iOS-устройствах файлы занимали на 100Кб больше, чем на других устройствах. Мы обнаружили, что в iOS5.1 в и IE 8 и IE9, WebP-изображение загружалось 3 раза. Хоть дополнительные 2 раза - это не есть хорошо, занимало места это все же меньше, чем JPEG-эквивалент. Мы не тестировали это в новых версиях iOS, возможно там это уже было исправлено.

    Взгляд в будущее

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

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

    Изначально мы использовали метод с полифиллом, но посчитали, что результат не будет идеальным.
    WebP пока не сможет полностью заменить JPEG или PNG, но он будет очень крутым инструментом в вашем арсенале.

    От переводчика : Авторы использовали iOS 5.1 потому, что в момент тестирования сайт WebPageTest.org поддерживал только эту версию системы. IE8 и IE9, чтобы посмотреть, как WebP будет работать в таких старых браузерах + для их клиентов все еще важны эти браузеры. Сейчас уже полно и онлайн-версий конвертеров.

    Главный писатель по вопросам технологий

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

    До того, как вы сможете открыть файл WEBP, вам необходимо выяснить, к какому виду файла относится расширения файла WEBP.

    Tip: Incorrect WEBP file association errors can be a symptom of other underlying issues within your Windows operating system. These invalid entries can also produce associated symptoms such as slow Windows startups, computer freezes, and other PC performance issues. Therefore, it highly recommended that you scan your Windows registry for invalid file associations and other issues related to a fragmented registry.

    Ответ:

    Файлы WEBP имеют Файлы растровых изображений, который преимущественно ассоциирован с Web Browsers (Google).

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

    Как открыть ваш файл WEBP:

    Самый быстрый и легкий способ открыть свой файл WEBP - это два раза щелкнуть по нему мышью. В данном случае система Windows сама выберет необходимую программу для открытия вашего файла WEBP.

    В случае, если ваш файл WEBP не открывается, весьма вероятно, что на вашем ПК не установлена необходимая прикладная программа для просмотра или редактирования файлов с расширениями WEBP.

    Если ваш ПК открывает файл WEBP, но в неверной программе, вам потребуется изменить настройки ассоциации файлов в вашем реестре Windows. Другими словами, Windows ассоциирует расширения файлов WEBP с неверной программой.

    Установить необязательные продукты - FileViewPro (Solvusoft) | | | |

    WEBP Multipurpose Internet Mail Extensions (MIME):

    WEBP Инструмент анализа файлов™

    Вы не уверены, какой тип у файла WEBP? Хотите получить точную информацию о файле, его создателе и как его можно открыть?

    Теперь можно мгновенно получить всю необходимую информацию о файле WEBP!

    Революционный WEBP Инструмент анализа файлов™ сканирует, анализирует и сообщает подробную информацию о файле WEBP. Наш алгоритм (ожидается выдача патента) быстро проанализирует файл и через несколько секунд предоставит подробную информацию в наглядном и легко читаемом формате.†

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

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

    Перетащите файл WEBP сюда для начала анализа

    Просмотреть мой компьютер »

    Пожалуйста, также проверьте мой файл на вирусы

    Ваш файл анализируется... пожалуйста подождите.



    Понравилась статья? Поделиться с друзьями: