- 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 будет работать в таких старых браузерах + для их клиентов все еще важны эти браузеры. Сейчас уже полно и онлайн-версий конвертеров.
— это формат изображения, разработанный 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
Хотя это довольно много, этого недостаточно для того, чтобы не делать фолбэк для неподдерживаемых браузеров. Иначе все-таки часть юзеров не увидит изображение.
Резервные копии изображений можно создать с помощью элемента
Чтобы предоставить альтернативный источник изображения, мы используем
У элемента
- type: MIME тип файла источника;
- srcset: Путь к файлу изображения. Для вывода одного изображения разных размеров можно использовать несколько файлов (см. )
- sizes: Список размеров каждого исходного файла (см. Статью выше)
- media: Медиа-запрос для определения, какой из источников будет использоваться для вывода картинки.
В дополнение к элементам Подавляющее большинство изображений, которые можно встретить на страницах сайтов, имеют формат JPG
. Менее распространены PNG
и GIF
, и уж совсем редко встречаются картинки в формате BMP
, главным образом, по причине их большого веса, увеличивающего время загрузки страницы в браузере. Так или иначе, вы можете скачать любое из этих изображений на компьютер и открыть его встроенным вьювером Windows. Не так дела обстоят с новым форматом WebP
, разработанным компанией Google
в 2010 году с целью потеснить привычные JPG
и PNG
. При столь же высоком качестве картинки в этом формате имеют меньший вес и их также можно скачать на компьютер, только открыть их штатным просмотрщиком не получится, так как он их просто не понимает. Да что там встроенный вьювер Windows, далеко не все сторонние приложения для просмотра изображений умеют работать с этим «незавершенным»
форматом. Конечно, если формат получит широкое распространение, будет реализована и его поддержка популярными программами, а пока что ничего не остается, как прибегать к разного рода хитростям, дабы иметь возможность просматривать публикуемые в WebP
изображения. А вообще-то решение очень простое - чтобы открыть WebP
в просмотрщике Windows, нужно его сконвертировать в JPG
. Как именно, выбирайте и решайте сами. Если сталкиваться с WebP
вам приходится лишь время от времени, вот простой способ «превратить»
его в JPG
или PNG
без использования сторонних инструментов. Кликните по WebP
-картинке и откройте ее в новой вкладке. В браузерной строке вы увидите длинный адрес, в самом конце которого будет три символа -rw
. Удалите их и нажмите «ввод»
. Картинка перезагрузится, но на этот раз уже в исходном формате. Далее скачиваем ее обычным для изображений способом. Тем, кому приходится иметь дело с 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
в популярные форматы, оба совершенно бесплатны, обязательной регистрации не требуют. Если не хотите быть зависимыми от интернета, скачайте с сайта www.xnview.com
и установите - бесплатную программу для конвертирования и базовой обработки изображений. Приложение отличается легкостью и простотой, умеет работать с более чем 500
графических форматов, производить с изображениями различные действия, как то: выравнивание, обрезка, применение фильтров, изменение яркости, контрастности и других параметров, добавление водяных знаков и многое, многое другое. Чтобы сконвертировать 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 и нужно ли это вообще. Начинаем… Решение проблемы сжатия изображений разнообразно и каждый человек выбирает для себя то, что ему удобнее. Существует огромное множество способов, как уменьшить размер изображение без явного ухудшения качества, но сегодня речь пойдет о формате 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. Это формат только для браузеров , которые могут с ним работать, но иметь другой формат для других браузеров придется, несомненно. С другой стороны, всегда есть небольшие полифиллы, библиотеки, что позволяют браузерам работать с той или иной «фишкой». Но об этом ниже. Самым простым способом работы с WebP является, конечно же, Photoshop, для которого Telegraphics создала и специальный плагин для разных версий разрядности. После того, как установите его (скопируете в папку с плагинами) в приложении появится возможность в меню «Сохранить как…
» выбрать в ниспадающем списке формат WebP. Диалоговое окно позволяет настраивать качество с помощью ползунка, фильтрацию, шумы и резкость. Обратим внимание, что согласно прилагаемому файлу readme в архиве, оговаривается, что в вариации на Windows функциональность плагина меньше, чем в версии для Mac OS. Кроме этого, плагин для Photoshop не позволяет воспользоваться «Сохранить для Web…
», а также нет предпросмотра сохраняемого изображения, как в случае с JPEG. Поэтому, пока вы не сохраните файл и не откроете его для просмотра, вы не сможете узнать, что получается и какого размера будет файл. Другим вариантом конвертации является использование онлайн-конвертера - Image online-convert . Работает ничуть не хуже, чем в Photoshop’е, но благодаря ему быстрее и удобнее делать пакетное преобразование файлов. Как мы говорили выше, почти все браузеры на текущий момент (середина мая 2017 года) поддерживают работу с WebP по умолчанию. Тем не менее, на компьютерах пользователей могут быть установлены старые версии браузеров или те, что не поддерживают формат. Существует два удобных варианта отображения картинок в WebP. В чем существенная разница обеих библиотек? В первом случае img-тег
на страницах не меняется, вы просто сами меняете расширение файлов с JPEG на WebP. Во втором случае, формат WebP используется для представления изображения, в случае, если он поддерживается, а если нет, то заменяется на JPEG. При таком варианте придется изменять img-теги
на странницах, Автоматическая конвертация форматов происходит «налету», поэтому сказать, какой из них лучше работает - сложно. Также можно использовать и код для файла.htaccess , который проверит поддержку браузером WebP и в случае отрицательного ответа заменит изображение на JPEG. При этом все изображения должны быть в одной папке и одного размера (ширина + высота). Таким образом, веб-дизайнер и разработчики использовать формат WebP могут, если проект, сайт, ориентируется на современные браузеры. Тогда он будет работать и отображаться на страницах. Изначально в Windows нет поддержки данного формата и если Telegraphics создали плагин для Photoshop, то Google выпустила плагин для возможности увидеть файлы изображений в обычном «Средстве просмотра фотографий» Windows. Также этот плагин создает и превью изображений в проводнике, для Диспетчера рисунков Microsoft Office. Загрузка представлена ниже. Разработчики приложений PaintShop Pro, IrfanView, Picasa, XnView, Gimp, Paint.NET идругих тоже создали поддержку WebP, загрузить которую можно уже с их официальных сайтов непосредственно. Поскольку мы оговаривались не раз, что формат файла изображений WebP не может быть полноценной заменой JPEG, то резонно у многих из нас рано или поздно возникает вопрос: а нужен ли вообще данный формат и в каких случаях его использование оправдано. Если проект предполагает использование большого числа картинок разных по размеру и разрешению, то, несомненно, вводить данный формат нужно. Что касается поддержки браузеров, то с каждым годом, если не полугодием, в мире в целом старые версии уходят в прошлое, как и старые версии Windows. Почти уже не используется XP, Vista, 7-ка. Аналогично и устаревшие браузеры, тем более, что почти все они обновляются автоматически, если установлены. Соответственно, поддержки WebP нет в единичных случаях, которые могут быть для проекта не так критичны. С другой стороны, ведь существуют библиотеки и возможность использования JPEG дубляжей и конвертации «налету». Тем не менее, нужно помнить, что повсеместного использования данного формата нет, посему иметь под рукой вариации JPEG надо. И тут снова двоякость: если браузеры посетителей сайта имеют поддержку WebP, то почему бы не предложить им почти мгновенную загрузку того, что у других будет загружаться заметно дольше? Ведь в целом на конверсию сайта это только положительно будет влиять. Еще один плюс - поддержка прозрачности (альфа-канал),
то есть аналогично PNG формату. И если в PNG картинка весит более 7 Mb, то в WebP около 700 Kb. С первого раза, посещая тот или иной сайт, сказать с уверенностью, используется WebP или нет - нельзя. Все дело в том, что изображения могут конвертироваться в JPEG. Но зато определить, где именно на странице есть WebP, а где - JPEG можно через консоль разработчика. Так, например, портал видеоигр Stevivor
конвертирует скриншоты, карты и большие изображения именно в WebP, для сохранения качества и небольшого размера. Видеигр много, гайдов для каждой единичной игры тоже, картинок еще больше - использование 100% оправдано. Telegram
сохраняет в формате WebP картинки-стикеры, которые так популярны и на десктопном варианте соцсети, и на мобильном. , как резерв для браузеров, которые не поддерживают несколько форматов файлов через элемент
Подмена адреса
С помощью расширения «Save Image As Png»
Конвертирование онлайн
Конвертирование с помощью XnConvert
- Компьютер определяет тип файла именно по расширению.
- По умолчанию Windows не показывает расширения имен файлов.
- В имени файла и расширении нельзя использовать некоторые символы.
- Не все форматы имеют отношение к одной и той же программе.
- Ниже находятся все программы с помощью которых можно открыть файл WEBP.
Google спешит на помощь
JPEG (180 Кб)
PNG (213
Kb)
WebP (91
Kb)
Преобразование изображений в
WebP
Вариант 1 -
Photoshop
Вариант 2 -
Online
converter
Внедрение файлов изображений
Как увидеть файлы
WebP на компьютере
Кому это нужно? За и против
PNG (124 Kb)
WebP (78
Kb)
Где используется
WebP
