Как сохранить в формате WEBP?

4 лучших способа сохранить WebP в формате JPG или PNG на Windows и Mac

Формат изображений Google WebP предлагает изображения без потерь по сравнению с PNG и JPG. Компания утверждает, что размер WebP на 26% меньше, чем у PNG, и примерно на 25-34% меньше, чем у JPG, без ущерба для общего качества. Как бы продвинуто это ни звучало на бумаге, WebP остается на втором месте. PNG и JPG являются отраслевым стандартом, и если вы застряли с изображением WebP, вам необходимо преобразовать его в формат JPG или PNG в Windows или Mac.

Многие приложения и службы в Интернете не поддерживают WebP, и многие часто сталкиваются с ошибками загрузки WebP. Так что, если вы устали застревать с сообщениями об ошибках загрузки WebP, прочтите, чтобы узнать, как сохранить WebP в формате JPG или PNG на рабочем столе.

1. Используйте приложение предварительного просмотра на Mac.

Прежде чем перейти к сторонним приложениям и расширениям из Интернета, давайте поговорим о нескольких решениях по умолчанию для Windows и Mac. Используя приложение Preview по умолчанию в macOS, вы можете легко конвертировать изображение WebP в JPG или PNG.

macOS поддерживает формат WebP. Следуйте инструкциям ниже.

Шаг 1: Откройте изображение в программе предварительного просмотра на вашем Mac.

Шаг 2: Щелкните Файл в строке меню.

Шаг 3: Прокрутите вниз до пункта «Экспорт» из списка. Щелкните «Экспорт».

Шаг 4: macOS попросит вас выбрать формат изображения для экспорта. Вы можете выбрать в меню JPG, PNG или HEIC. Вы также можете выбрать качество изображения и настроить окончательный размер изображения в соответствии с вашими требованиями.

Шаг 5: Переименуйте экспортированное изображение и нажмите кнопку «Сохранить» внизу.

Вот и все. Вы успешно преобразовали файл WebP в JPG или PNG на Mac.

2. Используйте Paint в Windows.

Используя Paint в Windows 10, вы можете легко преобразовать изображение WebP в HEIC, PNG или JPG. Позвольте нам показать вам, как это сделать.

Шаг 1: Выберите изображение, которое хотите преобразовать, и откройте его в приложении Paint в Windows 10.

Шаг 2: Используйте клавиши Ctrl + S, чтобы сохранить изображение на компьютере.

Шаг 3: В процессе экспорта Paint попросит вас выбрать место и тип формата для сохранения изображения.

Шаг 4: Вы можете выбрать JPG или PNG из списка и нажать кнопку «Сохранить» внизу.

3. Инструмент конвертера WebP из Интернета

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

Шаг 1: Зайдите в CloudConvert в Интернете.

Шаг 2: Вы можете выбрать файл на компьютере или использовать облачные сервисы, такие как Google Drive, OneDrive или Dropbox, для добавления изображений WebP. CloudConvert также поддерживает добавление изображений через URL.

Шаг 3: В приведенном ниже примере мы выбрали пару файлов WebP из меню загрузок macOS.

Шаг 4: Выберите формат экспорта из следующего меню. CloudConvert поддерживает около одиннадцати форматов изображений на выбор.

Шаг 5: Нажмите «Конвертировать», и веб-инструмент загрузит и обработает изображения.

Шаг 6: После успешного преобразования у вас будет возможность загружать изображения.

4. Используйте расширение Chrome.

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

Используя расширение Chrome, вы можете легко загрузить изображение WebP в формате PNG на свой рабочий стол. Не нужно конвертировать его позже. Расширение делает свою работу в первую очередь. Следуйте инструкциям ниже.

Шаг 1: Откройте Google Chrome или любой браузер Chromium, например Microsoft Edge или Opera.

Шаг 2: Загрузите и установите расширение конвертера изображений Webp по ссылке ниже.

Шаг 3: С этого момента всякий раз, когда вы сталкиваетесь с изображением WebP, щелкните его правой кнопкой мыши и выберите параметр «Преобразовать и сохранить изображение как».

Шаг 4: Конвертер изображений WebP преобразует изображение из WebP в PNG перед сохранением его на рабочем столе.

Конвертируйте изображения WebP на ходу

Это может сбивать с толку, когда вы сталкиваетесь с ошибкой загрузки изображения WebP во время работы. Выполните описанные выше приемы и конвертируйте эти изображения WebP в JPG или PNG в Windows или Mac. Какой метод вы считаете наиболее полезным для вашего рабочего процесса? Отключите звук в разделе комментариев ниже.

Следующий:

HEIC — еще один нишевый формат изображений, используемый Apple на iPhone. Прочтите сообщение ниже, чтобы узнать, как конвертировать HEIC в JPG в Windows 10.

Что такое изображение WebP – как использовать и сохранять

Несколько лет назад Google незаметно представил новый формат изображений под названием «WebP». Формат WebP был объявлен преемником сверхпопулярного JPEG. Для людей, озабоченных использованием полосы пропускания и/или скоростью Интернета, это очень хорошая новость. Но, для пользователей, пытающихся работать с цифровыми изображениями, это может стать головной болью.

Что такое формат WebP

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

Согласно Google, формат WebP уменьшает размер файла изображения на 19-64 процента. Это приводит к тому, что веб-сайты загружаются быстрее и потребляют меньше трафика. Из-за этого многие веб-сайты с высокой посещаемостью используют формат WebP, поскольку более быстрая загрузка сайта означает лучший пользовательский интерфейс. Можно с уверенностью предположить, что каждый согласен с тем, что чем быстрее Интернет, тем лучше, так в чём же проблема?

Критика WebP

Несмотря на то, что формат WebP разрабатывался порядка десяти лет, он не пользуется широкой поддержкой. Многие из наиболее распространенных инструментов для работы с изображениями, такие как Adobe Photoshop, изначально не распознают WebP. Некоторые программы (например, Photoshop) обходят эту несовместимость сторонними плагинами. Однако, другие программы вообще не распознают формат WebP. Это затрудняет работу с форматом WebP. К счастью, есть способ конвертировать изображения WebP в формат, который хорошо сочетается с другими.

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

Как сохранить WebP в формате JPEG или PNG

К счастью, можно вручную преобразовать изображения WebP в их исходные форматы JPEG или PNG. Чтобы этот небольшой трюк сработал, вы должны использовать в качестве браузера Chromium или Opera. Когда вы сталкиваетесь с изображением WebP, которое хотите сохранить, щелкните его правой кнопкой мыши и выберите «Открыть изображение в новой вкладке».

Теперь, когда изображение находится на отдельной вкладке, наведите курсор на адресную строку. В поле URL удалите последние три символа «-rw» URL-адреса и нажмите Enter . Это отобразит изображение в исходном формате (обычно JPEG или PNG). Чтобы сохранить изображение, просто щелкните правой кнопкой мыши и выберите «Сохранить изображение как». В поле «Тип файла» изображение должно быть в формате JPEG или PNG. Конечно, это может быть немного утомительно, но это довольно простой обходной путь.

Как сохранить WebP в PNG с расширением Chrome

Посмотрим правде в глаза, вы, вероятно, не захотите изменять URL-адрес каждый раз, когда хотите сохранить фотографию. Хотя это относительно простое решение для тех, кто в затруднительном положении, оно не совсем практично. Это особенно актуально для тех, кто работает с большим количеством изображений WebP. К счастью, есть легкое расширение для Google Chrome, которое упрощает работу.

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

Что вы думаете о формате WebP? Знаете ли вы какие-либо другие способы быстро и легко преобразовать WebP в формат JPEG или PNG? Дайте нам знать об этом в комментариях!

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

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

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

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

WebPJS полифилл (библиотека), который будет обрабатывать версию используемого браузера и менять изображения. На странице автора показано и расписано, куда вставлять нужные блоки кода на страницы сайта.
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 картинки-стикеры, которые так популярны и на десктопном варианте соцсети, и на мобильном.

Facebook также перешла на WebP в мобильном варианте, чтобы ускорить загрузку записей и изображений от пользователей. Более того, все файлы картинками,которые посетители загружают, автоматически конвертируются в WebP.

Видеопортал Netflix использует WebP для сохранения небольших картинок-превью эпизодов сериалов для ускорения загрузки страниц.

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

Сами Google для своей соцсети в мобильном варианте Google+ тоже применяют данный формат.

Заключение

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

Разумеется, что при любом сжатии качество изображения/фотографии всегда страдает. Этого никто из нас отрицать не сможет. Другой вопрос – насколько сильно и как возможно создать маловесящие файлы с приятным для глаза содержанием.

Как у любого новшества или любой технологии у WebP есть поклонники и есть недоброжелатели. Но все их доводы, в конечном счете, сводятся к бесконечным разговорам по типу: «какая игровая консоль лучше», «какая часть к/ф Мстители динамичнее» и прочее.

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

Формат изображений WebP: что это такое и зачем он нужен

TimeWeb.com/ru/community/article/3b/3b7c36e6071c8eff2ae02689f15516d0.png» />

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

Краткое описание WebP

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

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

В среднем вес картинок сокращается на 25–35%, что позволяет вебмастерам размещать на сайтах больше изображений, не тратя впустую драгоценное пространство на жестком диске арендованного VDS.

При разработке формата сотрудники Google использовали те же методики сжатия, что используются в компрессии кодеков VP8.

Преимущества WebP на другими форматами

Естественно, основное преимущество — это размер. Сокращение размера положительно влияет сразу на четыре аспекта работы в интернете:

Сайты со сжатыми WebP-картинками работают быстрее. Уходит меньше времени на обработку небольших файлов. Даже если в статье будет под сотню изображений, компрессия спасет от чересчур долгих загрузок.
Загружая на VDS маленькие изображения, можно сэкономить на пространстве жесткого диска.
Пользователи будут тратить меньше мобильного трафика при посещении сайта со смартфона.
Выделенный интернет-канал до сервера будет загружен гораздо меньше, если передаваемый медиаконтент меньше весит. Еще один плюс к производительности.

Но говорить о преимуществах WebP проще в сравнении с другими форматами.

WebP против JPEG

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

TimeWeb.com/media/tacos-2x.png» />

Главный недостаток JPEG — заметная потеря в качестве и детализации из-за недостаточно продуманных алгоритмов сжатия. Это особенно заметно при приближении или когда у картинки изначально не слишком высокое разрешение.

У WebP качество картинки практически не теряется. Если ознакомиться с галереей Google, то станет понятно, что отличить их формат от высококачественных JPEG практически невозможно. Это видно только по размеру файлов.

WebP против PNG

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

Но речь идет о графике. С фотоснимками PNG справляется хуже более узкоспециализированных расширений. К тому же PNG заметно тяжелее того же JPEG даже после компрессии (хоть и сохраняет высокое качество).

TimeWeb.com/media/xwebp-vs-png-lossless-compression-1120×642.pagespeed_.ic__.ayj7ulmvj-1066x611_1.png» />

WebP по детализации и цветопередачи на одном уровне с PNG. Разницу трудно заметить даже при сравнении лоб в лоб. Он хорошо отображает как графику, так и фотографии. При этом размер зачастую ниже, чем у PNG, на 30%.

Недостатки WebP

Поддержка данного формата среди браузеров и веб-приложений постепенно растет. Сейчас с WebP не возникает проблем ни в Google Chrome, ни даже в Safari. Но остались сайты и программы, которые все еще не знакомы с этим расширением картинок. Поддержка в браузере Apple появилась не так давно, а в Internet Explorer не появится никогда.

Как я уже заметил выше, проблема не только в браузерах, но и в других программных решениях. К примеру, в WordPress.html»>WordPress нет нативной поддержки WebP, а это, между прочим, популярнейшая CMS в мире. И таких ресурсов все еще много.

А еще WebP-файлы зачастую нечем открывать на компьютере. Поэтому некоторые пользователи Windows и Linux негодуют, когда пытаются скачать картинку через Google Chrome, а получают файл с невнятным расширением, который нельзя открыть.

Как открыть WebP-файл

Если вы столкнулись с тем, что в вашей ОС нет программы для работы с WebP, то вам поможет поддерживаемый браузер. Алгоритм действий:

Открываем картинку в формате WebP на любом сайте, где нам удалось ее разыскать.
Кликаем по ней правой кнопкой мыши и сохраняем на жесткий диск в формате WebP.
Затем кликаем правой кнопкой мыши по картинке уже на жестком диске.
В контекстном меню системы ищем пункт «Открыть с помощью…» и выбираем в нем браузер Google Chrome или Firefox.

В Linux можно открывать WebP-файлы с помощью редактора изображений GIMP. В macOS этот формат поддерживается по умолчанию в приложении «Просмотр», в нем же картинку можно отредактировать и конвертировать.

Сохраняем WebP как JPEG (или конвертируем в другой подходящий формат)

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

Есть несколько методов превращения WebP в условный PNG или JPEG средствами Windows. Через браузер, через Microsoft Paint и через специализированный декодер и команду в терминале Windows (внезапно).

Можно скопировать ссылку на сайт с изображением в новом формате и вставить ее в Internet Explorer. Он не поддерживает новинку и поэтому загрузит картинку в другом расширении.
Или скопировать изображение прямо с веб-страницы и вставить его в редактор изображений Microsoft Paint. А уже находясь в нем, одновременно нажать клавиши Ctrl + Shift + S, чтобы сохранить картинку на жестком диске и указать расширение (JPEG, TIFF и т.д.).
Либо использовать команду в формате C:Путь до файла dwebp.exeназвание файла.WebP — o название файла.png. По умолчанию декодер лежит в папке «Изображения», соответственно, в команде надо указать путь до нее.

Конвертируем PNG в WebP

Инструкция для тех, кто хочет стать частью новой тенденции и перейти на WebP уже сейчас.

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

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

Через плагин для Фотошопа

Берем детище Adobe как самый популярный редактор среди дизайнеров веб-интерфейсов и основной массы контентщиков.

TimeWeb.com/media/webp-plugin-2x.png» />

Сначала скачиваем плагин WebP Photoshop Plugin с официального сайта разработчиков. После этого устанавливаем и перезапускаем редактор. При повторном запуске в нем появится новый формат для экспорта. Открываем изображение в формате JPG, PNG и т.п., затем открываем меню File и выбираем пункт Save As… Во всплывшем окошке указываем расширение WebP или WebP Lossless. Второй вариант подразумевает немного иной тип сжатия, сохраняющий все детали изображения.

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

Через node.js

Подойдет тем, кому надо пачками конвертировать разного рода изображения в WebP, тратя на это минимум сил. Естественно, нужно хотя бы примерно понимать, что такое node.js и установить ее к себе на компьютер с Linux.

Представим, что node.js уже установлен и работает. Возвращаемся к конвертеру. Будем использовать плагин imagemin и соответствующий скрипт на его базе, чтобы автоматизировать процесс конвертации.

Чтобы установить imagemin, введем в командную строку:

Затем создаем скрипт в формате JavaScript со следующими вводными данными и запустим его в node.js:

По умолчанию в переменных outputFolder, PNGImages и JPEGImages указаны значения img, но их можно заменить на другие. В названиях изображений вовсе можно оставить звездочку, чтобы скрипт конвертировал все изображения с расширениями JPEG и PNG, что сможет обнаружить в папке.

Через плагин для WordPress.html»>WordPress

Если работаете в CMS WordPress.html»>WordPress, можно не изгоняться с node.js, а установить плагин WebP Express. Он использует библиотеку WebP Convert Library для конвертации изображений с расширениями PNG и JPEG в формат компании Google.

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

А еще есть плагины для сжатия изображений в WordPress.html»>WordPress, которые создают WebP-копии загружаемых картинок и распространяют их по CDN. Они также ужимают другие форматы, минимизируя потери в качестве.

Подключаем WebP к HTML- и CSS-файлам

В случае с плагинами и CMS все понятно. Там есть графические интерфейсы для загрузки изображений. С кодом тоже нет сложностей. WebP можно встраивать в HTML-разметку как «обычные» изображения – через тег Правда, только для поддерживаемых браузеров.

В случае с неподдерживаемыми придется добавить в разметку элемент и внутри него прописать дополнительные источники изображений со всеми расширениями. Это делается через тег . В CSS WebP добавляется через параметр background-image: url (ссылка на картинку с нужным расширением).

На этом все. Как видите, в формате WebP нет ничего страшного. Обычные картинки, просто не везде поддерживаются. Отсюда и некоторые сложности в работе, но совсем скоро эта проблема исчезнет и WebP окончательно станет веб-стандартом.

Как перевести WebP в JPG или PNG: три рабочих способа

Спорить с тем, что Google подмяла весь интернет под себя, бессмысленно. Эта компания контролирует рынок поисковых систем, а значит, и сайты, их позицию в выдаче и посещаемость, рынок браузеров, где её доля составляет 90%, и рынок интернет-рекламы. Поэтому логично, что Google старается подстроить всё исключительно под себя, в том числе форматы картинок в интернете, которые ей удобно обрабатывать. Но как с этим быть пользователям, — большой вопрос. Ведь формат WebP хоть и был создан специально для работы в интернете, большинству из нас, как ни крути, не подходит.

WebP — это формат, с которым очень неудобно работать напрямую, но который очень хорошо заточен под интернет

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

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

Как сделать JPEG из WebP

Существует несколько способов конвертировать WebP в более удобоваримый для компьютера и штатных инструментов редактирования формат.

Самый простой, но «грязный» – не скачивать картинку, а сделать её скриншот прямо на сайте. Для удобства рекомендую воспользоваться комбинацией клавиш Shift+CTRL+CMD+4. Правда, более-менее приемлемый результат удастся получить только на компьютерах с большим разрешением экрана, а вот на старых MacBook Air, например, качество будет откровенно так себе.

Конвертация картинок на Mac

Способ посложнее состоит в том, чтобы произвести конвертацию прямо на Mac. Несмотря на то что для этого не потребуется дополнительных программных инструментов, этот способ доступен не всем. Во всяком случае, на macOS High Sierra его нет, а значит, он появился только в более новых версиях ОС:

Сохраните на Mac картинку в формате WebP;
Откройте её через штатную утилиту «Просмотр»;

В новых версиях macOS есть возможность изменить формат картинки вручную

В верхнем меню выберите «Файл – «Дублировать»;
Закройте дубликат, выберите формат JPG и сохраните его.

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

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

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

Перейдите по этой ссылке на сайт iLoveIMG.com;
В открывшемся окне выберите раздел Convert to JPG;

Онлайн-конвертация — один из самых простых способов

Перетащите в окно конвертации изображение с Mac;
Нажмите Convert to JPG и скачайте готовую картинку.

Зачем нужен WebP

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

Обратите внимание на вес: слева — JPG, справа — WebP

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

Впрочем, понять Google тоже можно. Она как никто заинтересована в развитии интернета и прикладывает для этого все усилия. Перевод сайтов на формат изображений WebP — один из шагов по совершенствованию мирового онлайн-пространства. Ведь картинки в таком формате весят на 20-200% меньше, чем PNG или JPEG, а значит, будут быстрее обрабатываться и сократят вероятность закрытия сайта до полной загрузки.

Новости, статьи и анонсы публикаций

Свободное общение и обсуждение материалов

Лонгриды для вас

Если вы не можете слушать Apple Music в браузере, или у вас не воспроизводятся отдельные песни на айфоне, у этих ошибок есть решения. В этой статье поговорим о том, как убрать надпись Content_Equivalent и других проблемах Apple Music.

Для iPhone есть масса крутых аксессуаров, но что если ограничить бюджет 1 000 рублей? Это было непросто, однако мы нашли несколько вариантов, а заодно и купоны с промокодами, которые помогут снизить цену.

Safari Plus — это быстрая команда, которая добавляет Safari целых 5 новых функций, которыми браузер по умолчанию не обладает. Разбираемся, что это за функции, как ими пользоваться и какая из них — самая крутая

«Безусловно, конвертируя изображение, нужно быть готовым к пусть и небольшим, но всё-таки имеющим место потерям качества. Избежать этого не поможет ни конвертация в JPEG, ни в PNG.»

При конвертации в PNG качество не изменится ) Даже незначительно ) А вот вес увеличится очень ощутимо )

Как сохранить в формате WEBP?

Перетащите ваши изображения в любое место

оригинал

Сжатый

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

1-е место — WEBP. Как правило, для «стандартного», не векторного изображения, наименьший формат изображения, поддерживаемый всеми основными современными браузерами, — формат WEBP следующего поколения. В этом формате можно уменьшить размер файла на 30% больше, чем JPEG (сохранив при этом тот же индекс качества SSIM), и на 90% больше, чем PNG изображения, поддерживая при этом сопоставимое качество внешнего вида.

2-е место — Формат изображения JPEG находится между WEBP и PNG с точки зрения сжатия размера файла.

3-е место — PNG, как правило, создает файлы самого большого размера. Разумеется, есть исключения, в зависимости от особенностей изображения.

Примерное сравнение размеров (и качества) изображений форматов PNG, JPEG и WEBP:

Оригинал PNG: 323.4 KiB

Преобразованный JPEG: 18.1 KiB (-94%)

Преобразованный WEBP: 17.1 KiB (-95%)

Сжатие изображения

Хотите узнать больше о сжатии изображений? Пожалуйста, ознакомьтесь со следующими разделами для получения более подробной информации:

Преобразование изображения

Хотите узнать больше о том, когда, зачем и как конвертировать различные форматы изображений? Пожалуйста, ознакомьтесь со следующими разделами для получения более подробной информации:

PNG vs. JPEG — Качество vs. Сжатие

Как преобразовать PNG в JPEG?

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

JPEG vs. PNG: Что лучше?

Случаи, когда лучше использовать JPEG либо PNG, зависят от ваших потребностей

JPEG-изображения содержат данные сжатия с потерями. Таким образом, некоторые данные утрачиваются, т.к. переданы не точно, а приблизительно, для достижения более высокой степени сжатия. В результате может пострадать качество изображения.

Когда JPEG подходит лучше всего

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

Когда PNG подходит лучше всего

PNG, напротив, содержит данные сжатия без потерь (без потери данных), и больше подходит для:

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

Иллюстрация воспринимаемых шумов при сжатии JPEG с потерями в сравнении с сжатием PNG без потерь:

Зачем преобразовывать изображения из PNG в JPEG?

Всякий раз, когда уменьшение размера файла принципиально важно, например, для изображений на веб-страницах, следует всерьез задуматься о преобразовании PNG в JPEG (или WEBP).

Время загрузки имеет большое значение для UX и SEO, а изображения занимают в среднем 50% от общего веса веб-страницы, значительно влияя на длительность загрузки. Чем быстрее сайт, тем больше пользователей будут взаимодействовать с ним, тем легче он будет проиндексирован, и тем выше он будет ранжироваться в Google.

JPEG vs. WEBP — Универсальный vs. следующего поколения

Как преобразовать JPEG в WEBP?

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

JPEG vs. WEBP: Что лучше?

Практически по всем параметрам, имеющим значение в Интернете, формат WEBP добивается лучших результатов по сравнению с JPEG:

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

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

Будучи гораздо более новым форматом, чем хорошо известный формат изображения JPEG, WEBP еще не поддерживается Microsoft Office, а также многими другими широко используемыми офисными приложениями.
JPEG является гораздо более распространенным форматом изображения, что практически гарантирует поддержку целого ряда приложений и платформ.