AVIF, WebP, PNG, JPEG, GIF... Вчера опубликовал статью про WebP изображения и про плагины WordPress. Сегодня речь пойдет о самом новом в этой линейке – AVIF – самом прогрессивном формате.
Чтобы дать вам общий обзор, давайте сведем все к нескольким словам. Формат AVIF - это новый оптимизированный формат изображений с открытым исходным кодом.
Он был создан с конкретной целью: сделать ваши изображения меньше без потери качества. А его разработчики принадлежат крупным корпорациям, таким как Netflix, Amazon и Google.
Догадываетесь, почему я вам об этом рассказываю? Упомянутые мною компании очень заинтересованы в том, чтобы предоставлять изображения максимально возможного качества без ущерба для времени загрузки. Короче говоря, они хотят, чтобы их медиафайлы доставлялись на любое устройство как можно быстрее.
Давайте сосредоточимся на том, что, как мне кажется, может вас больше всего заинтересовать. А именно, я приведу несколько фактов для вебмастеров, которые должны убедить вас оптимизировать изображения в формат AVIF на вашем сайте WordPress.
WebP и AVIF - почему их всегда ставят вместе?
В двух словах: формат AVIF является преемником формата WebP. WebP был первой попыткой устранить доминирование JPEG и PNG, а AVIF имеет все шансы стать стандартом обработки изображений следующего десятилетия. По эффективности AVIF во всех тестах превосходит JPEG, а также WebP - он просто бьет все остальные форматы.
Формат AVIF все еще относительно новый и относится к современным форматам изображений. Я уверен, что это лишь вопрос времени, когда AVIF вытеснит другие форматы, как на настольных компьютерах, так и на мобильных устройствах, поскольку в последнее время он получает все больше положительных отзывов.
Из-за его небольшого размера и отличной компрессии многие сайты добавляют его по умолчанию вместо WebP - его предшественника.
Ниже вы можете сравнить качество изображения в формате AVIF и в формате WebP.
Файлы AVIF примерно на 40% меньше, чем файлы WebP.
Причины для использования AVIF
Давайте рассмотрим 4 ключевых вопроса, которые помогут нам выяснить, почему изображения на вашем WordPress сайте должны быть сжаты в формат AVIF.
Качество изображений в формате AVIF
По сравнению с другими форматами изображений, такими как, например, WebP, AVIF предлагает лучшее качество изображения при меньшем размере файла. Являясь усовершенствованием существующих форматов изображений, AVIF, новейший кодек изображений нового поколения, предлагает непревзойденное качество изображения.
Формат AVIF более эффективен, когда речь идет о сжатии фотографий без потерь и с потерями.
Что касается нефотографических изображений с потерями, то AVIF, как правило, обеспечивает одни из лучших результатов. Его следует выбрать, если вы имеете дело с изображением с низкой точностью, поскольку с AVIF вы получите лучшее качество изображения и производительность для вашего сайта.
Более быстрая загрузка изображений с форматом AVIF
Скорость загрузки изображений на вашем сайте не менее важна, чем их качество. Что толку от изображений отличного качества, если они будут замедлять работу вашего сайта?
Используя формат AV1, вы больше не столкнетесь с этой проблемой. Благодаря небольшому размеру файлов AVIF браузеры быстрее их отображают и быстрее передают по сети, в результате чего ваш сайт загружается быстрее.
Помните, что этот формат используется Netflix - они эксперты в быстрой загрузке изображений. Поэтому мы можем смело доверять им, когда речь идет о выборе наиболее быстро загружаемого формата изображений.
Более того, они ускорят время загрузки сайта и улучшат пользовательский опыт. Чего еще можно желать?
Степень сжатия AVIF
Изображения в формате AVIF намного меньше по сравнению с изображениями, преобразованными в другие форматы, такие как, например, WebP. В настоящее время размер изображения, сжатого в формат WebP, уменьшается в среднем на 60% по сравнению с JPEG.
Однако когда речь идет об изображениях AVIF, они уменьшаются еще примерно на 40% по сравнению с WebP. Это огромная разница!
Формат AVIF позволяет получать высококачественные изображения как при сжатии с потерями, так и без потерь. Короче говоря: он обеспечивает значительно улучшенное сжатие без потерь.
Кроме того, изображения в формате AVIF не замедляют работу сайта, как это могут делать некоторые другие форматы с более низким уровнем сжатия.
Поддержка AVIF современными браузерами
Пока еще не все браузеры поддерживают изображения в формате AVIF.
Несмотря на то, что тенденция растет, в настоящее время так поступают 76% всех браузеров. Почему не все, спросите вы? AVIF - относительно новый формат, поэтому было и остается очень сложно внедрить его поддержку сразу во всех браузерах.
Тем не менее, в этом вопросе следует быть оптимистом. Формат AVIF набирает обороты, и, глядя на эволюцию данных о поддержке браузеров, которые были предшественниками AVIF, мы находимся на правильном пути.
Он распознается не всеми браузерами и устройствами. Как следствие, по умолчанию WordPress не позволяет загружать файлы AVIF в медиатеку.
Поскольку AVIF все еще является относительно новой технологией и пока не полностью поддерживается всеми браузерами, одним из способов ее реализации является использование согласования содержимого, которое в данном случае представляет собой теги HTML 5 < picture> и < source>.
Это делается для того, чтобы, если браузер не поддерживает тип файла AVIF, вместо него отображалось резервное изображение, то есть JPEG. Следующий пример кода должен быть использован в тегах страницы вашего сайта.
Еще способ обойти это ограничение WordPress - загрузить файлы напрямую по FTP или из файлового менеджера хостинга. Либо использованием плагинов.
Какие плагины AVIF есть для WordPress сайтов?
Существует несколько плагинов, созданных провайдерами CDN для изображений. Большинство из них предлагают простую процедуру настройки с автоматическим преобразованием. Вам не придется разбираться с кодом или сложными настройками.
Большинство плагинов изменяют HTML-содержимое вашего сообщения, заменяя базовый URL своей конечной точкой, чтобы изображения загружались через CDN.
•
Опенсорс плагин Avif Express поддерживает массовое преобразование ранее загруженных изображений и массовое преобразование изображений темы.
Полная совместимость с CDN. Поддерживает русский язык.
•
Imagekit предлагает бесплатный тарифный план с неограниченным количеством запросов и преобразований. В вашем распоряжении 20 Гб медиатеки с неограниченным хранилищем преобразований.
Они предоставляют полный набор функций, связанных с изображениями.
•
Cloudinary предлагает бесплатный вечный тарифный план без необходимости использования кредитной карты. Они используют кредиты для отслеживания вашего использования, при этом бесплатный план предлагает 25 кредитов.
Вы можете потратить их на 25 тыс. преобразований, 25 ГБ управляемого хранилища или 25 ГБ пропускной способности для чистого просмотра. Они также обеспечивают преобразование видео, доступ к API, удаленную выборку, автоматическое резервное копирование и отслеживание ревизий.
Более продвинутые тарифные планы предоставляют расширенный функционал.
•
ImageEngine предлагает бесплатную 30-дневную пробную версию без необходимости оплаты. Вы можете передавать до 100 Гб данных через их глобальную CDN.
Они утверждают, что имеют более эффективную оптимизацию для мобильных устройств и называют ее "оптимизация с учетом устройств". Более продвинутые планы предлагают больше конверсий, оптимизацию в приложении и выделенные граничные серверы.
•
Shortpixel предлагает множество тарифных планов, от бесплатного плана на 150 конверсий изображений в месяц до плана, масштабируемого до неограниченного количества.
Они автоматически уменьшают масштаб больших изображений и совместимы с другими плагинами WordPress, такими как WooCommerce. Они также поставляются с интеграцией Cloudflare и автоматизированными решениями для резервного копирования.
•
IMGhaste использует подход, который не переписывает URL, а использует подсказки клиента. Этот плагин регистрирует Service Worker, предоставляющий функциональные возможности Progressive Web App для вашего сайта, чтобы перехватывать ваши изображения.
Скрипт размером 708 gzipped bytes автоматически определяет наилучшее изображение, необходимое вашему конечному пользователю. IMGhaste предлагает бесплатный уровень с 1000 кредитов и платные планы, начинающиеся от 20$ в месяц.
•
TwicPics поставляется с легким, ненавязчивым помощником jаvascript. Этот скрипт анализирует контекст просмотра и автоматически определяет, когда загружать ваши медиафайлы и какие преобразования к ним применять.
Он предлагает бесплатный тарифный план на 3 ГБ пропускной способности CDN, с 50 центами за каждый дополнительный ГБ.
Вы можете загружать неограниченное количество основных и адаптированных изображений с бесконечным количеством преобразований. Планы дороже позволяют улучшить организацию, использовать несколько сайтов, субдомены и премиум-поддержку.
•
Gumlet автоматически изменяет размеры и сжимает изображения. Они предлагают несколько тарифных планов, включая неограниченное количество основных изображений и оптимизацию изображений, отсутствие ограничений на хранение кэша и подробную аналитику использования.
Бесплатный тарифный план обеспечивает использование одного веб-сайта и 1 ГБ пропускной способности в месяц по цене 1 доллар за каждый дополнительный ГБ.
Более продвинутые тарифные планы предлагают неограниченное количество сайтов, приоритетную поддержку, пользовательские домены, полные отчеты и предупреждения, а также механизмы резервного копирования.
•
Работает быстро, поддерживая все актуальные форматы: WebP, JPEG, AVIF и так далее.
Планы начинаются с бесплатного тарифа (до 25 Гб в месяц) и масштабируются по мере роста функционала.
•
Бесплатный и максимально простой плагин конвертации изображений WebP, JPGXL и AVIF.
Для установки формата на выходе перейти в Настройки – Медиа и задать нужный. Работает только для новых изображений, старые не удастся переделать.
Еще советуем:
