WebP — будущее изображений, которое уже наступило. WebP в SEO
Формат изображений WebP был разработан еще в 2010. Но только неделю назад стал таким, который можно рекомендовать к внедрению на всех сайтах.
Что произошло? Почему следует использовать на всех сайтах? Как внедрить на сайте?
Почему Google рекомендует заменить изображения?
Разберемся с вопросами далее.
WebP — будущее изображений в интернете, которое уже настало
WebP является форматом изображений, который был разработан Google. Формат создан как альтернатива PNG и JPG. WebP отличается значимо меньшим размером файла при аналогичном качестве изображения.
Что произошло? Worldwide Developers Conference прошла пару недель назад. На конференции было объявлено о том, что обновлен браузер Safari.
Публично Apple большую часть изменений не огласили. Но разработчики разобрались с обновлениями.
Выяснилось, что теперь Safari поддерживает WebP. Причем, как на MacOS, так и на iPhone.
Еще были внесены такие изменения:
Браузер Safari использует значительная часть аудитории. По различным данным доля на рынке составляет около 20%.
По популярности Safari является вторым в мире, сразу после Google Chrome, а поддержка WebP имплементирована только с последним обновлением.
Итого теперь все самые популярные браузеры поддерживают WebP — Safari, Opera, Firefox, Chrome, Edge.
Преимущества WebP
Формат поддерживает сжатие как с потерями так и без, а также полупрозрачность и анимацию.
Сравнение возможностей форматов WebP, PNG, JPG:
Чем WebP лучше других форматов изображений? WebP позволяет уменьшать файлы изображений без значимой потери в качестве. Различные тесты подтверждают. Google расписал преимущества по результатам собственного исследования.
WebP в поисковой оптимизации сайтов
В SEO следует найти баланс между приемлемым качеством изображения и размером файла. Быстрая загрузка улучшает сайт посредством влияния на скорость загрузки страницы и улучшения поведенческих факторов.
Как и AVIF, формат WebP позволяет добиться мелких улучшений, которые полезны при продвижении сайта.
AVIF и WebP называются форматами нового поколения, так называемые next-gen image formats.
Google посредством инструмента Lighthouse рекомендует использовать формат WebP на всех сайтах.
Множество проектов уже используют WebP вместо JPG. Facebook используем формат в приложении.
OLX использует формат на всем сайте. При загрузке фотографии все автоматически конвертируются в WebP.
Как внедрить WebP на сайте?
Правильная логика внедрения заключается в использовании прогрессивного метода улучшений на сайте. Что конкретно имеется ввиду? Принцип следующий:
Вариантов по внедрению множество. Инструменты являются бесплатными.
Способ 1. Наилучшее решение заключается в настройках веб-сервера. В таком варианте нет надобности даже менять верстку на страницах сайта.
Как реализовать такое решение на сайте? Вариант с использованием NGINX в примере.
Ссылка на конвертер WebP под Linux, Windows — WebP Precompiled Utilities.
Внедрением подобных решений занимаются технические специалисты. Задача оптимизатора заключается в правильной постановке цели.
Способ 2. Использовать тег picture. Пример:
Как работает тег picture? При использовании такой разметки браузер загрузит первое изображение, которое поддерживает. Если браузер не поддерживает picture, то указан img по умолчанию.
Способ 3. Если контента на сайте мало, есть вариант использовать конвертер изображений.
Инструмент Squoosh предоставляет возможность оптимизации изображений. Разработкой занимался Google.
Также инструмент позволяет наблюдать за процессом изменения графики. Сервис бесплатный.
Кстати в MegaIndex есть бесплатный инструмент, применяя который можно провести аудит сайта по другим параметрам.
Пример отчета далее:
Выводы
Формат изображений WebP теперь поддерживают все популярные браузеры.
Как поисковая система обрабатывает WebP? Технологию разработал Google. Изображения индексируются, обрабатываются и ранжируются аналогично, как и JPG. Разметка логотипов теперь также допускает использование формата.
Преимущество от внедрения WebP заключается в уменьшении размера файлов изображений на 30%.
Область применения. Использовать формат для элементов навигации нет смысла. Формат следует использовать для изображений товаров и прочих больших файлов. Например, на карточке товара.
В результате — улучшение поисковой оптимизации посредством увеличения скорости загрузки страниц, повышение лояльности и снижение расходов на содержание сайта.
Остались вопросы, замечания или комментарии по теме использования формата WebP? Напишите в комментариях.
Для чего и как использовать сегодня изображения WebP
Дата публикации: 2018-12-24
От автора: изображение WebP — это формат, разработанный Google в 2010 году. Он был создан в качестве альтернативы таким форматам, как PNG и JPG, позволяя иметь файлы гораздо меньшего размера при сохранении схожего качества изображения.
Для чего использовать WebP?
WebP — невероятно полезный формат, потому что он предлагает и производительность, и функционал. В отличие от других форматов, WebP поддерживает сжатие с потерями и без потерь, а также прозрачность и анимацию.
И даже с учетом этих функций WebP обеспечивает стабильно меньшие размеры файлов, чем его альтернативы. При сравнительном исследовании этих форматов изображений было обнаружено, что изображения с потерями качества в WebP были в среднем на 30% меньше, чем JPG, а изображения без потерь качества — в среднем на 25% меньше, чем PNG.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Как конвертировать изображения в формат WebP
Существует несколько инструментов, которые мы можем использовать для того, чтобы перевести файлы JPG, PNG и другие форматы в WebP. Онлайн инструменты:
Squoosh — онлайн сжатие и преобразование изображений
Online-Convert.com — онлайн преобразование изображений
Инструменты командной строки
cwebp — самый популярный инструмент командной строки для преобразования изображений в формат WebP. После установки мы можем использовать его для преобразования изображений, передавая в числе других параметров качество, входной и выходной файлы.
WebP: преимущества и как открыть файлы с этим форматом изображения
Хотя компьютеры, мобильные телефоны и планшеты становятся все более мощными, правда заключается в том, что сегодня веб-сайты, которые мы посещаем, имеют все более качественный контент. Это означает, что если мы посетим один из этих веб-сайтов, загруженных мультимедийным контентом, на компьютере с несколько более ограниченным оборудованием, мы увидим, как сокращается время или скорость загрузки по сравнению с другими веб-сайтами с меньшим весом. В этом смысле изображения, содержащиеся на веб-странице, несомненно, являются одной из главных причин медленной загрузки. Если добавить к этому, что на одной странице может быть много изображений высокого качества, то это может быть сложно. Однако несколько лет назад Формат WebP начал использоваться, более эффективный способ изображения в интернете.
Что такое WebP?
С этого момента именно Google продолжил развитие этого формата, добавив новые функции, и тот, кто позаботился о том, чтобы Chrome собственный движок браузера начал поддерживать этот формат сжатия.
Преимущества и недостатки WebP по сравнению с JPEG
Как открыть файлы WebP
Если мы являемся одним из тех, кто использует веб-браузер Google, возможно, что при загрузке изображения в формате WebP, если у нас на компьютере установлен Chrome в качестве браузера по умолчанию, наиболее вероятно, что мы связываем сам браузер по умолчанию приложение для открытия изображения.
Если нет, мы можем открыть изображение в этом формате, просто перетащив его в окно Chrome. Другие браузеры на основе Chromium также предлагают эту поддержку, хотя некоторые старые версии могут еще не поддерживать ее. Что-то, что также может случиться с нами с другими веб-браузерами, поэтому мы можем использовать наш браузер, чтобы открыть изображение в этом формате в зависимости от браузера и его версии.
Но если мы хотим открыть изображение в этом формате с помощью какого-либо инструмента визуализации или редактирования изображений, то нам придется искать тот, который поддерживает этот формат. Если вы один из тех, кто использует Photoshop, вы наверняка уже заметили, что если мы попытаемся открыть файл WebP, саман Инструмент покажет нам сообщение о том, что это невозможно, потому что это неправильный тип документа.
Как открыть файл WebP в Photoshop
Еще одна бесплатная альтернатива для просмотра фотографий в этом формате
Вы также можете конвертировать файл WebP в другие форматы изображений
Если нам нужно открыть файл в этом формате с компьютера, на котором нет Microsoft операционной системы или в которой мы не можем устанавливать сторонние приложения, то мы можем конвертировать WebP в JPG, PNG, GIF или другие форматы.
И остановите это, нам не нужно ничего устанавливать на наш компьютер. Нам просто нужно открыть веб-браузер и посетить один из интернет-сайтов, где мы можем конвертировать изображения из одного формата в другой. Одним из самых популярных и используемых является ezgif.com веб-сайт, где мы можем конвертировать файл WebP в GIF, PNG, JPG или MP4 и наоборот всего за пару кликов и бесплатно.
Все, что нам нужно сделать, это посетите сайт ezgif выберите тип преобразования, которое мы хотим выполнить, например WebP в JPG а затем загрузить файл или указать URL-адрес, где он находится, и нажмите на Загрузить кнопка. Через несколько секунд изображение будет загружено, в котором мы можем сделать определенные параметры редактирования, такие как обрезка, изменение размера, поворот, оптимизация, добавление текста или добавление определенных эффектов, среди других.
Когда все готово, остается только нажать на Конвертировать в JPG кнопку или выходной формат, который мы выбрали, и затем мы можем приступить к загрузке результата. Теперь, с изображением в формате JPG, мы можем без проблем открыть его в любом другом средстве просмотра изображений или фоторедакторе, не совместимом с этим форматом.
Что такое формат изображения WebP (и почему это важно знать)?
Формат WebP это новый формат изображения от Google, который использует как сжатие с потерями (компромисс между качеством и размером), так и без потерь (снижение размера без компромисса в отношении качества).
Основной механизм WebP сжатия
Алгоритм сжатия WebP с потерями использует предиктивное кодирование для прогнозирования значения цветов смежных пикселей. Затем он только кодирует разницу между фактическими значениями и прогнозами. Из этих закодированных или остаточных значений, многие равны нулю, и это явление способствует в дальнейшем уменьшению размера изображения WebP.
Таким образом, сжатие с потерями WebP – как JPEG – основано на прогнозировании блока.
Поддержка и использование
В Google Chrome и Opera есть встроенная поддержка WebP. Среди графических программных обеспечений, Picasa, Photoline, Pixelmator, ImageMagick, Konvertor, XnView, IrfanView и GDAL все изначально поддерживают WebP.
Facebook начал использовать WebP для снижения затрат сети и ускорения своего веб-сайта. Даже относительно небольшие улучшения в области эффективности начинают расти в масштабе Facebook. Когда люди загружают JPEG / JPG изображения, Facebook автоматически делает копии в формате WebP. Они, видимо, начали сейчас отправлять эти изображения людям, использующим Chrome и Opera.
Telegram тоже начал использовать WebP для своих популярных стикеров. Мгновенный предпросмотр поисковика Google использует WebP внутренне, чтобы уменьшить дисковое пространство, используемое превью.
Основные проблемы возникают, когда человек хочет просмотреть изображение в программном обеспечении, а не в браузере или внести изменения в него, так как большинство наиболее популярных графических приложений – в том числе Window’s или OS X’s image viewer и Photoshop – не могут изначально обработать WebP.
В октябре 2013 года, Джош Аас из Mozilla Research опубликовал всестороннее исследование о современных методах кодирования с потерями и не смог сделать вывод, что WebP обошел JPEG c каким-либо значительным отрывом.
Тем не менее, Telegraphics выпустили бесплатный плагин, который обеспечивает поддержку WebP в Adobe Photoshop, GIMP и поддержку Paint.NET плагинов WebP via. Google также выпустил плагин для Windows, который обеспечивает поддержку WebP в Windows Photo Viewer, Microsoft Office 2010 и любом другом приложении, которое использует Windows Imaging Component.
Преимущества и статистика
WebP документация Google утверждает:
Сжатые изображения WebP без потерь на 26% меньше по размеру по сравнению с изображениями PNG. Сжатые изображения WebP с потерями на 25-34% меньше по размеру по сравнению с изображениями в формате JPEG по эквивалентному индексу SSIM. WebP поддерживает прозрачность сжатых изображений без потерь (также известную как alpha channel) со всего лишь 22% дополнительных байт. Прозрачность также поддерживается сжатием с потерями и обычно обеспечивает размер файла в 3 раза меньше по сравнению с PNG, когда сжатие с потерями приемлемо для красного/зеленого/синего цветовых каналов.
Преобразование в WebP
Документация WebP обеспечивает доступ к предварительно скомпилированному программному обеспечению для преобразования PNG и JPEG изображений в WebP. Вы можете прочитать об этом больше и скачать его здесь. Вот ссылка на онлайн-конвертер, который обеспечит достижение задачи без загрузки какого-либо программного обеспечения.
Создание WebP стикеров для Telegram
Мы используем Photoshop, чтобы сделать фоновое изображение прозрачным. Мы сделаем это, выбрав ‘Background Eraser Tool “. Мы также обрежем изображение, так как оно довольно большое!
Далее мы выберем текущий слой и применим Blending Options (кайму) и выберем белый цвет. Кроме того, нам необходимо выбрать Drop Shadow для создания эффекта легкой тени, и сохранить его в формате PNG.
Вы можете создать много других стикеров аналогичным образом для общения с вашими друзьями в Telegram.
Вывод
WebP является новым форматом сжатия изображений и поддерживаясь Google, Facebook, Opera и Telegram, безусловно, стал популярней. Это формат, который уже имеет большое количество фанатов и недоброжелателей.
Однако, умение упаковывать ценные свойства GIF и PNG в один формат с уменьшенным размером изображения будет продолжать искушать веб-разработчиков создать более маленькие и качественные изображения.
И если это поможет ускорить работу интернета, мы все будем в выигрыше.
Формат WebP — как использовать и зачем он нужен
WebP — это формат изображения, разработанный Google в 2010 году. Он был создан как альтернатива форматам PNG и JPG. С помощью WebP можно создавать изображения гораздо меньших размеров, чем традиционные форматы JPG и PNG без ухудшения качества картинки.
Зачем нужен WebP?
WebP — очень полезный формат изображений, поскольку он предлагает как оптимизацию производительности, так и богатый функционал. В отличие от других форматов, WebP поддерживает сжатие как потерями, так и без потерь, а также прозрачность и анимацию.
| WebP | PNG | JPG | GIF | |
| Сжатие с потерями | + | + | + | — |
| Сжатие без потерь | + | + | + | + |
| Прозрачность | + | + | — | + |
| Анимация | + | — | — | + |
Даже с этим богатым функционалом формат WebP обеспечивает значительно меньшие размеры файлов, чем его альтернативы. В сравнительном изучении этих форматов изображений было обнаружено, что сжатые изображения с потерями качества WebP были в среднем на 30% меньше, чем JPG, а изображения без потерь WebP были в среднем на 25% меньше, чем PNG.
Как преобразовать изображения в WebP
Уже существует несколько инструментов для удобной конвертации JPG, PNG и других форматов файлов в WebP.
Онлайн-конвертеры в WebP
Инструменты командной строки для WebP
cwebp — самый популярный инструмент командной строки для преобразования изображений в формат WebP. После установки его можно использовать для преобразования форматов с различными опциями, такими как уровень качества, желаемые имена файлов и другие.
Инструменты Node
Ниже приведен пример сценария, который преобразует все PNG и JPG-файлы изображений в папке в формат WebP.
Этот скрипт можно использовать через интерфейс командной строки или с помощью различных инструментов сборки.
Sketch
В Sketch уже можно экспортировать любой элемент в формате WebP.
Как использовать WebP на сайте
На момент написания обзора формат изображения WebP поддерживается в 72% браузеров, используемых во всем мире.
Хотя это довольно много, этого недостаточно для того, чтобы не делать фолбэк для неподдерживаемых браузеров. Иначе все-таки часть юзеров не увидит изображение.
Резервные копии изображений можно создать с помощью элемента
элемента. Это HTML5 элемент, который позволяет нам использовать несколько исходных файлов для одного изображения.
Чтобы предоставить альтернативный источник изображения, мы используем элемент внутри элемента
элемента.
У элемента есть атрибуты для определения типа изображения и инструкций, когда какой тип использовать: