В этой статье мы расскажем о формате изображений WebP и о том, как он помогает лучше охватить целевую аудиторию. А также о том, чем этот формат может быть полезен для любого сайта с фотографиями и картинками.
Но сначала нам нужно взглянуть на то, как на самом деле происходит доставка рекламы, так что давайте ненадолго погрузимся в эту тему.
По сути, когда пользователь заходит на сайт, браузер отправляет рекламный запрос на рекламный сервер издателя. Если рекламный запрос возвращает ответ (объявление), объявление отображается в браузере пользователя. Как только объявление отображается, отслеживается впечатление. Если конечный пользователь нажимает на объявление, то клик также регистрируется.
Подобно тому, как скорость страницы влияет на коэффициент конверсии, доставка объявлений влияет на то, как быстро объявление отображается на экране конечного пользователя, как оно превосходит другие объявления на той же странице и, в конечном счете, как быстро оно привлекает внимание конечного пользователя.
Чем медленнее загружается объявление, тем меньше у него шансов привлечь внимание пользователя. Низкая скорость доставки приводит к низкой конверсии рекламных кампаний, что означает больше потраченных денег вебмастером при низких результатах.
Способность быстро и качественно доставлять креативы - залог успеха рекламных кампаний рекламодателей и, в свою очередь, успешной монетизации сайтов.
Что такое формат WebP?
WebP - это формат файлов изображений, разработанный компанией Google. Он сочетает в себе набор методов сжатия для получения наилучшего сочетания размера и качества. Он призван заменить более известные форматы изображений, такие как JPG, PNG и GIF, предлагая схожие функции с каждым из этих форматов.
WebP позволяет создавать изображения примерно на 30% легче, чем JPEG, без заметного снижения качества. Кроме того, он поддерживает анимацию и прозрачность (как это делают форматы GIF и PNG).
WebP - это современный формат изображений, который обеспечивает превосходное сжатие без потерь и с потерями для изображений в Интернете. Используя WebP, веб-мастера и веб-разработчики могут создавать более компактные и насыщенные изображения, которые делают работу в Интернете быстрее.
Изображения WebP без потерь имеют на 26% меньший размер по сравнению с PNG. Изображения WebP с потерями на 25-34% меньше, чем аналогичные изображения JPEG при эквивалентном индексе качества SSIM.
WebP и WordPress: улучшенное время загрузки и производительность?
Многие пользователи WordPress заинтересованы в формате изображений WebP, поскольку он сочетает в себе преимущества JPG и PNG. В то же время, он не заменяет эти два распространенных формата изображений.
Однако для пользователей WordPress, которые используют много изображений, WebP будет особенно полезен.
Люди визуальны и часто могут быстрее и лучше усваивать информацию, которую они видят. Поскольку изображения обычно занимают более половины дискового пространства сайта, здесь есть большой потенциал для оптимизации.
Теперь еще несколько фактов о WebP, прежде чем перейти дальше:
• WebP поддерживает видеоформат VP8, который подходит, например, для небольших анимированных изображений, известных нам по GIF-файлам;
• Максимальный размер изображения для WebP составляет 16 383 x 16 383 пикселей;
• Вы также можете масштабировать изображение WebP вверх или вниз, подобно файлам SVG, но многие не разрешают этого делать по соображениям безопасности.
Различия по сравнению с PNG и JPG
Сначала сравним WebP и PNG.
Изображение WebP примерно на 25-30 процентов меньше PNG без потери качества. В то же время фон может быть прозрачным. Это зависит только от самого изображения, глубины изображения, деталей, цветового пространства и т.д. Благодаря небольшому размеру файла формат WebP дает явное преимущество в плане производительности.
На основе этих двух изображений можно сказать, что WebP-изображение на 30,1 процента меньше, чем PNG-версия. Здесь я выбрал метод без потерь и намеренно установил ползунок качества на 80 процентов. Оставшиеся 20 из 100 процентов практически никогда не будут видны, поэтому 80 процентов вполне достаточно для онлайн-приложений.
Недостатки формата PNG
PNG не подходит для фотографов, поскольку создает значительно больший файл изображения. Формат PNG в основном используется для скриншотов, потому что ПК сохраняют изображения в формате PNG. Почему? Потому что скриншоты часто представляют собой смесь изображений и текста.
PNG используется, например, для изображений, требующих прозрачного фона. Это делает формат очень универсальным и популярным в графическом дизайне, где многие элементы часто сочетаются друг с другом.
PNG доступен в форматах PNG 8 и PNG 24. PNG 8 использует глубину цвета 8 бит и максимум 256 цветов. PNG 24 использует глубину цвета 24 бита и до 16,7 миллионов цветов. Таким образом, PNG 24 сопоставим с форматом JPEG.
Формат изображений JPG и WebP
В прямом сравнении с JPG, изображение WebP примерно на 25-35 % меньше - при том же качестве изображения. Здесь нечего сказать между двумя кандидатами JPG и WebP - WebP просто лучший выбор.
Формат JPG подходит, если вы можете смириться с потерей качества и если резкость и детали не важны. Этот формат часто используется для изображений с насыщенным цветом, поскольку композиция JPG позволяет отобразить множество цветов и градаций.
Небольшое замечание: то, как изображения выглядят на экране, зависит от многих факторов: например, от разрешения экрана (HD, QHD, UHD/4K, 8K и т.д.), настроек экрана, таких как sRGB, Adobe RGB, соответствующего режима отображения ваших мониторов и конечного устройства, с помощью которого вы просматриваете изображения.
Цветовое пространство и глубина WebP
Здесь все становится немного сложнее. WebP основан на алгоритме сжатия видео с потерями VP8, со сжатием до 24 бит и максимальным размером 16 383 x 16 383 пикселей.
Поэтому он всегда имеет глубину цвета 24 бита, как и JPG. Глубина цвета PNG варьируется от 8 до 48 бит, при этом последний вариант не имеет смысла из-за большого размера файла,
Как VP8 bitstream, генерация WebP изображений без потерь работает только с 8-битным форматом изображения - также известным как YUV420 формат изображения.
Формат YUV420 разбит на части: Давайте сначала рассмотрим, как монитор отображает изображение по умолчанию: Каждый цвет может быть представлен тремя цветами (так называемая модель RGB), т.е. красным, зеленым и синим.
Каждый цвет в отдельности - т.е. красный, зеленый и синий - может быть записан на компьютере в 1 байт (8 бит). Таким образом, ОДИН пиксель в мониторе имеет 3 байта (каждый байт содержит информацию о соответствующем цвете - красном, зеленом и синем).
Человеческий глаз очень чувствителен к яркости, но менее чувствителен к цветам и их градациям. Таким образом, термин YUV состоит из Y = яркость (яркость), а U и V означают цветность (цвет). Таким образом, YUV подобен RGB, с помощью которого представляется цвет.
Но зачем нам это нужно? Потому что здесь важен размер файла. В модели RGB мы должны использовать 3 байта (24 бита) для хранения одного цвета. В то время как в модели YUV размер уменьшается вдвое из-за способа вычисления и последующего хранения.
Какие мобильные и десктопные браузеры поддерживают WebP?
Статистика показывает, какой браузер чаще всего используется тем или иным "конечным устройством", таким как ПК, планшет или смартфон. Поскольку WebP поддерживается не всеми браузерами, вам следует следить за этим.
Конечно, вы можете видеть, что "мобильные устройства" находятся в большем фокусе, что также объясняет, почему лучшая поддержка WebP обеспечивается для смартфона. Поэтому посмотрите на свою статистику пользователей и выясните, с какого браузера и устройства к вам приходит больше всего посетителей.
В следующем списке показано, какие версии браузеров на каких конечных устройствах уже могут использовать WebP.
Текущая поддержка браузеров для настольных компьютеров:
• Firefox с версии 65.x;
• Opera с версии 39.x;
• Chrome с версии 23.x;
• Edge с версии 17.x;
• Internet Explorer с версии 11.x.
Актуальная поддержка для мобильных устройств:
• Android Browser с версии 5.6 (Chromium 67);
• Android Chrome с версии 73.x;
• Opera Mini все версии;
• Opera Mobile с версии 12.x;
• Android Firefox с версии 66.x;
• Internet Explorer Mobile с версии 11.x;
• WebP VP8 (Анимированные изображения);
• Google Chrome (Desktop и Android) с версии 32.x;
• Microsoft Edge с версии 18.x;
• Firefox с версии 65.x;
• Opera с версии 19.x.
Плагины WordPress с поддержкой WebP
WordPress в настоящее время не поддерживает изображения WebP самостоятельно.
Поэтому мы переходим к следующему пункту, а именно использование плагинов.
•
Бесплатно при соблюдении трафика до 50 000 уников в месяц.
Выше – платные тарифы: от 19 долларов за месяц.
•
Бесплатный.
Технически выполнен сложнее платных аналогов.
•
Бесплатная версия на 100 кредитов (по факту, это больше похоже на триал).
Платно - от 4 долларов в месяц. Множество тарифов для выбора оптимального.
•
Бесплатно при весе изображения до 100 Кб, платно – от 29 долларов за разовую покупку навсегда при весе до 10 Мб.
•
Помесячно: 7 долларов за 200 Гб, 15 долларов за 400 Гб, 25 за 800 Гб.
Более высокие тарифы также включают в себя дополнительные полезные опции.
•
Бесплатно - 20 Мб в месяц.
Платно - $4,99 за 500 Мб или $9,99 в месяц за неограниченное количество изображений.
•
Триал на 7 дней. Платно – 7.5 долларов за месяц.
•
• 50 долларов за год – 120 000 изображений;
• 100 долларов за год – 300 000 изображений;
• 250 долларов за год – 840 000 изображений.
Еще советуем:
