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

Что такое изображение 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: что это такое и зачем он нужен

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

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

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

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

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

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

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

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

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

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

Но говорить о преимуществах 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, то вам поможет поддерживаемый браузер. Алгоритм действий:

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

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

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

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

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

1. Можно скопировать ссылку на сайт с изображением в новом формате и вставить ее в Internet Explorer. Он не поддерживает новинку и поэтому загрузит картинку в другом расширении.
2. Или скопировать изображение прямо с веб-страницы и вставить его в редактор изображений Microsoft Paint. А уже находясь в нем, одновременно нажать клавиши Ctrl + Shift + S, чтобы сохранить картинку на жестком диске и указать расширение (JPEG, TIFF и т.д.).
3. Либо использовать команду в формате 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 окончательно станет веб-стандартом.

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 в 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 В Веб-Дизайне И Для 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.

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

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

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

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

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

Заключение

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

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

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

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

Как конвертировать все картинки в WebP и ускорить сайт?

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

Что такое WebP ?

Данный формат сжатия, изобретенный компанией Google почти 10 лет назад, представляет собой уменьшенную графику в интернете без потери качества. Такие файлы меньшего размера, чем предшественники (png, jpg, jpeg, gif) и по своим характеристикам относятся к растровым изображениям.

На данный момент картинку webp могут корректно открыть несколько популярных интернет-браузеров: Google Chrome, Mozilla Firefox, Яндекс.Браузер и Opera. Если графическое изображение было сохранено на компьютер, то для его просмотра понадобится отдельный софт, например, Adobe Photoshop, GIMP, IrfanView, ImageMagick и аналогичных программ.

Чем Webp отличается от Jpeg или Png ?

• в сравнении с jpg (jpeg) webp прекрасно сжимается до минимального размера без существенной потери качества;
• webp лучше передает плавные градиенты их их границы, а вот jpg сильно уступает в этом;
• размер файлов WebP в среднем на 30% меньше;
• WebP в отличии от png поддерживает анимацию;
• WebP картинка может иметь прозрачный вид.

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

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

Как автоматизировать конвертацию ?

Для наиболее удовлетворительного результата мы рекомендуем автоматизировать конвертацию всей графики с помощью дополнительных плагинов к вашей CMS. Тем самым Вы освободите себя от рутинных задач конвертации всей графики на сайте.

Если для Вашей CMS нет модулей для конвертации или у Вас самописный сайт, можно воспользоваться виртуальным хостингом ASKO.host, который помогает веб-мастерам разгонять свой сайт эффективно и не тратя при этом кучу времени.

Какие это дает преимущества:

• нет необходимости заниматься настройкой вручную — все делает наш сервер;
• картинки и графика в WebP весят меньше файлов jpegpng, а значит страницы сайта прогружаются быстрее, что существенно снижает показатели «Отказов» на сайте (когда пользователь не стал дожидаться загрузки страницы и покинул ее) и положительно влияет на ранжирование в поисковой выдаче;
• ускоренная загрузка изображений также способствует комфорту пользователей во время посещения сайта, что подталкивает их на совершение целевого действия на ресурсе;
• нет нужды в сложной и тонкой настройке, изменении кода сайта и т.д. — оптимизация файлов автоматическая.

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

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

Переход на WebP

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

Владельцы своего бизнеса теряют некоторый процент прибыли всего лишь упуская этот важный момент. К 2020 году 3 из 5 открывающихся коммерческих организаций имеют либо частичное, либо абсолютное представительство в интернете в виде собственного сайта. И, судя по текущей динамике и актуальной статистике, эти цифры будут продолжать расти и дальше. А значит эффективная и работоспособная площадка в режиме онлайн, открывающая потенциальным покупателям доступ к услугам и товарам 247, никому не помешает. Ускорение загрузки страниц безусловно позитивно скажется на желании людей тратить деньги именно на этом сайте.