WebP: преимущества и недостатки

О чем речь? WebP – сокращение от WEB Picture — «веб-картинка». Представляет собой формат растровых изображений, разработанный компанией Google в 2010 году. Обеспечивает эффективное сжатие картинок и фотографий, чтобы сберечь время при загрузке и сэкономить место на жестком диске.

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

Общая информация о WebP

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

Источник: shutterstock.com

Создатели рассчитывали, что WebP сможет со временем заменить привычные форматы изображений. JPEG появился еще в 1992 году, PNG - в 1996-м, а GIF - в 1987-м. Их общий недостаток - сравнительно большой размер файлов. Раньше это не было серьезной проблемой: сайты содержали меньше изображений, а медленная скорость интернета все равно ограничивала быстроту загрузки страниц.

Для сайтов с большим количеством изображений требовался новый подход. Согласно данным WebsiteBuildersExpert, каждый четвертый пользователь может уйти со страницы, если она загружается более четырех секунд. Поэтому Google стремилась создать решение, которое помогло бы сделать загрузку сайтов быстрее.

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

WebP изначально создавался как более компактная альтернатива JPEG с минимальной потерей качества.

Источник: shutterstock.com

Со временем формат получил дополнительные возможности: сжатие без потерь, поддержку анимации и прозрачности, а также цветовых профилей ICC и метаданных EXIF и XMP. Благодаря этому WebP стал универсальным решением, способным в разных задачах заменить JPEG, PNG и GIF.

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

Размер изображений при использовании WebP в среднем уменьшается на 25-35 %. Это помогает веб-мастерам экономить дисковое пространство и размещать на сайтах больше графического контента.

При разработке WebP инженеры Google использовали технологии сжатия, применяемые в видеокодеке VP8.

Сжатие WebP с потерями и без потерь

WebP использует разные алгоритмы в зависимости от того, применяется сжатие с потерями или без них.

Сжатие WebP с потерями

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

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

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

Сжатие WebP без потерь

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

Источник: shutterstock.com

Для уменьшения размера файла WebP использует несколько методов:

• Алгоритм Хаффмана анализирует частоту появления фрагментов данных. Частым значениям присваиваются короткие коды, а редким - более длинные. Это позволяет сократить общий объем файла.

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

• Рекурсивное представление и кодирование заключается в последовательном разделении изображения на блоки разного размера, то есть крупные области разбиваются на более мелкие. Затем методы сжатия применяются к полученным уровням изображения, включая цветовые каналы и слои.

При сжатии без потерь WebP может сохранять альфа-канал, аналогично PNG. Он содержит информацию о степени прозрачности каждого пикселя, благодаря чему изображение может иметь прозрачные и непрозрачные участки.

«Голодные игры» для бизнеса:
Как занять нишу за 3–6 месяцев и получать в 3–5 раз больше клиентов

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

Мы разработали стратегию, которая помогла 196 нашим клиентам стать №1 в своих нишах за 3–6 месяцев.

Что показали кейсы:

• стратегия сработала в 93%;
• средняя окупаемость инвестиций — 312%;
• в сложных нишах заявка в 7 раз дешевле, чем в Директе;
• клиенты в среднем увеличили прибыль на 217% за первые 3 месяца.

Мы уверены в результате, поэтому даём финансовую гарантию в договоре.
И да, вы можете внедрить стратегию сами (хотя мы будем немного ревновать).

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

Скачать стратегию роста

PDF 2,3 MB

Причины исторически сложившегося недовольства WebP

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

В Firefox поддержка WebP появилась только в 2019 году, а в Safari, стандартном браузере устройств Apple - лишь в 2020-м. Другим компаниям также потребовалось время, чтобы добавить новый формат в свои продукты. Как отмечалось в блоге Adobe, он изначально создавался прежде всего для использования в интернете, поэтому за пределами веб-среды работать с ним было довольно сложно.

В результате WebP долго не мог стать по-настоящему массовым форматом. Поддержка появилась в популярных графических редакторах не сразу: Photoshop, Blender и CorelDraw получили возможность работать с WebP только в 2022–2023 годах. Возможность открывать такие изображения в Windows 11 появилась в мае 2023 года. При этом ограничения встречались даже в некоторых сервисах Google. Например, картинки WebP нельзя было напрямую вставить в Google Документы.

Источник: shutterstock.com

Представим ситуацию: пользователь скачивает файл WebP из Chrome, а затем пытается открыть его на компьютере. Оказывается, что привычный графический редактор не умеет с ним работать, а иногда изображение невозможно открыть даже в стандартном приложении для просмотра. Дополнительные сложности возникали и при загрузке файлов на сторонние сервисы. Социальные сети и другие площадки могли не принимать WebP и требовали использовать обычный JPEG.

Пользователи Twitter довольно резко отреагировали на появление WebP. В сети его сравнивали с Антихристом, предлагали «выбросить в мусорное ведро» и активно высмеивали в мемах. Главной причиной недовольства оставались сложности при скачивании и использовании изображений в новом формате.

Объектом насмешек стал и Юрки Алакуйяла - создатель алгоритма WebP без потерь. Пользователи связывали с ним неудобства, возникшие при работе с картинками, и некоторые даже обещали найти разработчика или желали ему попасть под автобус. Алакуйяла отвечал на такие публикации и признавался, что именно он разработал WebP, но подобные ответы не прекращали поток критики.

Особенности формата WebP

При работе с WebP стоит учитывать несколько важных моментов.

1. Настройки сжатия отличаются от JPEG. При слишком сильном снижении качества изображение может быстро потерять детализацию. Поэтому рекомендуется начинать с высокого значения качества и постепенно уменьшать его.

2. Поддержка прозрачности. WebP может использовать альфа-канал, как PNG. При этом изображение можно сжать примерно до 10 % от размера аналогичного PNG-файла, что позволяет существенно экономить место.

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

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

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

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

Обобщим основные особенности WebP и кратко рассмотрим его сильные и слабые стороны.

Преимущества WebP

Поддержка большого количества цветов. WebP способен отображать до 16,7 млн цветов. Как и PNG, формат поддерживает 24-битную цветовую модель RGB, а также 32-битную RGBA, включающую альфа-канал для передачи прозрачности.

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

Источник: shutterstock.com

Качественная анимация. WebP работает с анимацией эффективнее, чем GIF. Формат поддерживает полноцветные изображения с глубиной цвета 24 бита, а также позволяет использовать альфа-канал. Для ключевых и промежуточных кадров можно задавать разные параметры сжатия. Это дает возможность уменьшить размер анимации и одновременно сохранить качество ее наиболее важных элементов.

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

Одно из главных преимуществ WebP заключается в возможности существенно уменьшить размер файла без заметного ухудшения качества изображения. При сжатии с потерями объем в среднем сокращается примерно на 30 % в сравнении с JPEG, а сжатие без потерь позволяет уменьшить размер примерно на 26 % в сравнении с PNG.

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

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

Недостатки WebP

У любого графического формата есть свои ограничения, и WebP не является исключением.

Ограниченная поддержка браузерами долгое время оставалась одним из основных недостатков WebP. Несмотря на постепенное распространение формата, старые версии браузеров по-прежнему не умеют с ним работать. Особенно заметно отставала поддержка в Safari на iOS и macOS. Apple начала поддерживать WebP с выходом iOS 14, а затем добавила эту возможность в macOS 11 Big Sur.

Не все программы на ПК умеют открывать файлы WebP. Например, стандартное приложение «Фотографии» в Windows может не поддерживать такой файл. Возникали сложности и с Photoshop: старые версии программы не открывали WebP без специального плагина, а встроенная поддержка появилась только в версии 23.2 и последующих.

Дополнительные сложности возникают и у веб-разработчиков. Если сайт должен корректно отображаться в браузерах, которые не поддерживают WebP, приходится предусматривать fallback-механизмы. Обычно для этого используются теги <picture> и <source>, с помощью которых можно указать альтернативный формат изображения.

Источник: shutterstock.com

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

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

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

Сферы применения формата WebP

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

• Веб.

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

• Мобильные приложения.

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

Формат подходит и для кроссплатформенной разработки. Например, React Native и Flutter уже умеют работать с WebP, а в других фреймворках такую возможность при необходимости можно добавить.

Источник: shutterstock.com

Для iOS WebP стал более востребован после появления встроенной поддержки в iOS 14. Это также расширило возможности оптимизации мобильных приложений.

• Другие области.

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

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

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

Сравнение WebP с форматами JPEG, PNG и GIF

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

• JPEG.

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

Источник: shutterstock.com

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

• PNG.

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

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

• GIF.

С GIF все немного проще. Этот формат преимущественно используют для создания простой анимации.

Из-за ограниченной цветовой палитры GIF плохо подходит для фотографий, сложных иллюстраций и дизайн-макетов.

Браузеры, поддерживающие WebP

Сегодня WebP работает во многих популярных браузерах. На момент написания статьи WebP поддерживается следующими браузерами (со временем информация о совместимости может измениться:

1. Google Chrome - поддержка WebP появилась со 2-й версии браузера.

2. Mozilla Firefox - формат поддерживается начиная с версии 65.

3. Microsoft Edge - поддержка WebP появилась с версии 18. Сейчас браузер работает на Chromium и также поддерживает этот формат.

4. Apple Safari - встроенной поддержки WebP нет. Просматривать такие изображения можно с помощью плагина или после конвертации в другой формат.

5. Opera - поддержка WebP появилась с версии 11.

6. Android Browser - формат поддерживается начиная с версии 4.0 (Ice Cream Sandwich).

7. Chrome для Android - работает с WebP начиная с версии 25.

8. Samsung Internet Browser - поддержка WebP появилась начиная с версии 4.0.

Алгоритм действий по открытию WebP-файла

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

1. Откройте изображение WebP на любом сайте, где оно размещено.

2. Нажмите на картинку правой кнопкой мыши и сохраните файл WebP на жесткий диск.

3. После сохранения снова кликните по файлу правой кнопкой мыши.

4. В контекстном меню выберите пункт «Открыть с помощью…» и укажите подходящий браузер.

Также существуют специальные программы, с помощью которых можно открыть файл WebP.

На Windows: Adobe Photoshop версии 23.2 и выше или плагин WebP File Format, GIMP, Google Picasa, IrfanView, XnView и другие.

На Mac: Photoshop с упомянутыми особенностями, Pixelmator, WebP Viewer, WidsMob WebP и другие.

На Linux: gThumb, XnView, Gwenview и другие.

Конвертация PNG или JPEG в WebP

Если вам требуется время от времени преобразовывать изображения, проще всего использовать онлайн-сервисы. Для постоянной работы дизайнеров и вебмастеров больше подойдут программы для компьютера и специальные дополнения для CMS. Рассмотрим основные варианты.

Способ 1. Онлайн-конвертеры.

В интернете доступно много сервисов, позволяющих конвертировать PNG или JPG в WebP онлайн, без установки программ. Найти их можно, например, по запросам «PNG to WebP» или «JPEG to WebP». Среди популярных решений:

• CloudConvert.

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

Источник: shutterstock.com

• Convertio.

Еще один многофункциональный и быстрый сервис, работающий более чем с 300 форматами. Он позволяет загружать файлы с компьютера, Dropbox или Google Drive. С его помощью можно, например, преобразовать фото в WebP или другой формат.

• Online-Convert.

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

• Squoosh.

Это специализированный сервис, который объединяет функции конвертации и сжатия графики. Он подходит для разных типов изображений: иллюстраций, скриншотов, SVG-иконок и фотографий большого размера.

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

Способ 2. Десктопные программы.

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

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

Для старых версий Photoshop можно установить специальный плагин, который добавляет возможность работать с изображениями WebP. Он поддерживает разные версии Windows и Mac, поэтому при поиске важно учитывать используемую операционную систему. Начиная с Photoshop 23.2 отдельный плагин не требуется.

Источник: shutterstock.com

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

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

• Плагин для WordPress.

При работе с CMS WordPress можно установить плагин WebP Express. Он использует WebP Convert Library и позволяет конвертировать изображения PNG и JPG в формат WebP.

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

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

ТОП-7 кейсов
из разных ниш с ростом
от 89% до 1732%

Узнать подробнее

• Webpconv для Windows.

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

• WebPonize для Mac.

Программа с открытым исходным кодом, созданная специально для конвертации изображений в WebP. Она имеет узкую специализацию и поддерживает простой способ работы drag-and-drop: достаточно перетащить нужные картинки в окно программы.

• Sketch для Mac.

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

Способ 3. Node.js.

Этот вариант подойдет тем, кому требуется массово перевести в WebP разные изображения и при этом максимально автоматизировать процесс. Для работы понадобится базовое понимание Node.js и установленная среда на компьютере с Linux.

Предположим, что Node.js уже установлен и готов к работе. Для автоматической конвертации воспользуемся плагином imagemin и дополнительным модулем imagemin-webp. Сначала устанавливаем их через командную строку:

Затем создаем JavaScript-скрипт с необходимыми параметрами и запускаем его через Node.js:

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

Способ 4. Плагины для CMS.

Для популярных CMS существуют плагины, позволяющие работать с WebP и оптимизировать изображения:

• Ускорение загрузки сайта для 1С-Битрикс - комплексная оптимизация изображений, стилей, скриптов и других элементов сайта.

• WebP Image для OpenCart - добавляет поддержку формата WebP и позволяет использовать его для изображений на сайте.

Конвертация WebP в другой формат

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

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

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

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

Источник: shutterstock.com

Можно открыть ссылку на изображение WebP в Internet Explorer. Поскольку браузер не поддерживает этот формат, изображение загрузится в другом расширении.

Также можно скопировать картинку непосредственно с веб-страницы и вставить ее в Microsoft Paint. Затем нажмите Ctrl + Shift + S, выберите нужный формат, например JPEG или TIFF, и сохраните WebP-изображение в нужном вам виде.

Наконец, преобразовать WebP можно с помощью декодера dwebp.exe через командную строку: C:\Путь до файла dwebp.exe название файла.WebP - o название файла.png. В команде необходимо указать путь к декодеру. По умолчанию он находится в папке «Изображения».

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

При использовании плагинов и CMS загрузка изображений обычно выполняется через графический интерфейс. При работе с кодом все ненамного сложнее: картинки WebP можно добавлять в HTML так же, как обычные, используя тег <img>.

Однако такой способ подойдет только для браузеров с поддержкой формата.

Если необходимо обеспечить отображение изображений и в неподдерживаемых браузерах, в HTML-разметку добавляют альтернативные источники с другими расширениями. Например: <source srcset="ссылка на картинку" type="image/формат">. В CSS WebP можно подключить в качестве фонового изображения с помощью background-image: url(ссылка на картинку).

Подключение WebP с резервным форматом

Чтобы браузер мог выбрать подходящий формат изображения, используется элемент <picture>. Внутри него источники указываются по порядку: сначала AVIF, затем WebP, а в конце - резервное изображение в JPEG или PNG.

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

Такой подход позволяет:

• применять WebP и AVIF, не создавая проблем с совместимостью;

• загружать только подходящую версию изображения;

• сохранять запасной вариант для браузеров без поддержки современных форматов;

• постепенно переводить существующий сайт на более оптимизированные изображения.

Также необходимо корректно указать типы содержимого на сервере:

• image/webp для WebP;

• image/avif для AVIF;

• image/jpeg для JPEG;

• image/png для PNG.

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

Рекомендации по использованию WebP

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

• Проведите аудит и расставьте приоритеты.

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

• Переходите на WebP постепенно.

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

Источник: shutterstock.com

• Предусмотрите резервные форматы.

Для браузеров без поддержки WebP необходимо оставить JPEG или PNG. Удобный вариант - использовать <picture> с несколькими <source> и резервным <img>. Тогда современные браузеры получат оптимизированное изображение, а остальные - совместимый формат.

• Автоматизируйте конвертацию.

При большом количестве файлов ручная обработка занимает много времени. Для пакетного преобразования можно использовать:

1. консольные инструменты, например cwebp из пакета libwebp;

2. плагины для CMS - WordPress, Joomla и другие системы позволяют автоматически создавать версии изображений в WebP;

3. скрипты сборки - в современных фреймворках, включая Next.js и Gatsby, доступны инструменты для автоматической конвертации при сборке проекта.

• Настройте сжатие.

Важно подобрать оптимальное соотношение качества и размера файла.

Для фотографий рекомендуется качество около 80-90 %. Для логотипов и иконок с четкими границами можно использовать сжатие без потерь. При работе с градиентами и плавными переходами стоит проверить изображение на появление заметных артефактов.

• Учитывайте особенности контента.

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

• Настройте сервер.

Сервер должен определять, поддерживает ли браузер WebP, и отдавать соответствующую версию изображения. Для этого настраивают обработку заголовка Accept и корректное кэширование.

• Проверяйте результат.

После внедрения убедитесь, что браузер действительно загружает WebP, а не исходный JPEG или PNG. Проверить результат можно с помощью Lighthouse или PageSpeed Insights.

Также стоит регулярно следить за изменениями в поддержке WebP браузерами и используемыми инструментами.

Распространенные ошибки в использовании WebP

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

• Отсутствие резервного формата.

Простая замена JPEG на WebP без предусмотренного fallback может привести к проблемам в старых браузерах. Если они не умеют работать с новым форматом, вместо изображения пользователь увидит пустое место. Поэтому для совместимости необходимо сохранять альтернативные версии в JPEG или PNG.

• Проблемы с обновлением кэша.

После замены изображений браузер или CDN может продолжить показывать старые файлы. Чтобы этого избежать, следует очистить кэш и добавить версию к адресу изображения, например: image.webp?v=123.

Источник: shutterstock.com

• Слишком сильное сжатие.

Если установить слишком низкое качество, на изображении могут появиться заметные дефекты: размытые участки, блоки и искажения градиентов. Для фотографий рекомендуется использовать качество примерно 75-85, а для графики - 90-100.

• Удаление данных об изображении.

Некоторые инструменты при конвертации автоматически стирают EXIF-метаданные: дату съемки, координаты, модель камеры и другую информацию. Если эти сведения важны, при обработке необходимо включить их сохранение.

• Ошибки в настройках сервера.

Неправильно настроенный сервер может некорректно передавать WebP из-за отсутствия нужного MIME-типа. Это способно повлиять на отображение и кэширование файлов. Например, в .htaccess можно указать AddType image/webp .webp.

• Исчезновение прозрачного фона.

При преобразовании PNG с прозрачностью альфа-канал иногда теряется. Чтобы сохранить прозрачные области, при использовании cwebp необходимо выбрать подходящий режим сжатия без потерь.

• Повторное сжатие картинки.

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

Источник: shutterstock.com

• Загрузка сразу нескольких форматов.

Ошибки в HTML-разметке или скриптах могут заставить браузер одновременно загружать WebP и JPEG. В результате пользователь видит только одну картинку, хотя трафик расходуется на загрузку обеих версий.

• Замена SVG на WebP.

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

• Проверка только в браузере на компьютере.

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

Полезная литература по WebP

Тем, кто хочет глубже разобраться в формате, стоит начать с книги «The WebP Manual» Джереми Вагнера. Это практическое руководство, посвященное работе с WebP. Книга вышла в 2018 году в издательстве Smashing Magazine и рассматривает основные возможности формата: сжатие с потерями и без потерь, прозрачность, анимацию, отличия от JPEG и PNG, способы конвертации изображений и применение WebP на сайтах.

Отдельное внимание автор уделяет резервным форматам. Поскольку поддержка WebP в браузерах может различаться, для совместимости рекомендуется предусматривать fallback - например, определять поддержку формата через заголовок Accept и при необходимости отдавать JPEG или PNG. Книга доступна в форматах PDF, ePub и Kindle.

Источник: shutterstock.com

Еще один источник - RFC 9649: WebP Image Format. Это техническая спецификация IETF, которая подойдет тем, кому необходимо детально изучить устройство формата. В документе описываются структура файла, RIFF-заголовок, различные чанки, включая VP8X, ICCP, ANIM, EXIF и XMP, а также особенности сжатия VP8 и VP8L.

Из научных публикаций можно обратить внимание на работу И. Пирович «Введение в WEBP: формат сжатия изображений». В ней рассматриваются преимущества WebP по сравнению с другими форматами и особенности его реализации. Также полезна статья Е. А. Агафоновой «Обзор преимуществ и недостатков формата WebP», посвященная сильным и слабым сторонам формата с точки зрения компьютерной графики и сжатия данных.

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

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

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Источник изображения на шапке: shutterstock.com

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Последние статьи этого автора:

• Как провести вебинар: правила, этапы, полезные инструменты
• Массовая рассылка email: задачи, виды, этапы создания