WebP или AVIF: какой формат выбрать для сайта в Узбекистане

Почему формат картинок влияет на заявки

Покупатель из Ташкента на хорошем Wi-Fi и покупатель из Нукуса или Андижана на мобильной сети видят один и тот же сайт по-разному. Если главная тянет десятки тяжёлых фотографий в JPEG, второй уйдёт раньше, чем появится первый экран. Для поиска это тоже сигнал: Google оценивает скорость появления главного блока страницы (LCP), и крупная картинка в шапке часто становится причиной плохой оценки.

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

WebP и AVIF: в чём разница по сути

WebP разработан в Google. Он умеет сжимать с потерями и без потерь, хранит прозрачность и анимацию, открывается во всех распространённых браузерах. Его понимает большинство CMS, конструкторов и плагинов, поэтому сюрпризов с ним мало. Кодируется быстро, а это важно, когда картинки создаются на лету, например при загрузке товаров менеджерами.

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

Итог простой: WebP — надёжный универсал, AVIF — максимальная экономия там, где вы готовы потратить время на подготовку и настройку.

Сравнение по практическим задачам

Вместо абстрактных характеристик сведём различия к вопросам, которые реально возникают при работе над сайтом.

• Фотографии: AVIF обычно легче, но и WebP справляется хорошо
• Скорость кодирования: у WebP быстрее, у AVIF заметно дольше
• Браузеры: WebP работает практически везде, AVIF — в современных версиях
• CMS, конструкторы, плагины: у WebP поддержка шире, у AVIF она растёт, но не везде
• Прозрачность: есть у обоих форматов
• Логотипы, иконки, схемы: лучше SVG, а не растр
• Open Graph и превью в мессенджерах: безопаснее JPEG или PNG

Какой формат подойдёт вашему сайту

Единого ответа нет, он зависит от типа бизнеса и от того, как на сайт попадают картинки. Вот несколько типичных ситуаций.

Интернет-магазин одежды или электроники в Ташкенте: сотни карточек, фото загружают менеджеры. Здесь нужна автоматика, поэтому базой становится WebP, а AVIF подключается для главных фото через CDN или плагин. Агентство недвижимости или студия ремонта: крупные снимки интерьеров, где важны детали и свет. Это территория AVIF с запасным WebP.

Клиника, школа или кафе на конструкторе: платформа часто сама отдаёт современный формат. Не усложняйте, а проверьте, что именно уходит в браузер. Лендинг под рекламу из Instagram: вы платите за каждый клик, а первый экран решает, дождётся ли человек загрузки. Тут стоит выжать максимум из первой картинки и не экономить время на её подготовке.

Лучший вариант: оба формата через picture

Если нужна и экономия, и надёжность, не выбирайте один формат, а отдайте оба. Тег picture позволяет перечислить источники по порядку: сначала AVIF, затем WebP, а внутри тега img лежит обычный JPEG как запасной вариант. Браузер берёт первый формат, который умеет показать. Новые браузеры получают самый лёгкий файл, старые не остаются без картинки.

В коде это выглядит так: внутри picture два элемента source с атрибутом type (image/avif и image/webp) и srcset с адресом файла, затем img с src на JPEG, описанием alt и указанными width и height. Размеры нужны, чтобы страница не «прыгала» во время загрузки.

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

Внедрение по шагам

Порядок действий, который работает и для небольшого сайта-визитки, и для магазина.

• Откройте PageSpeed Insights для главной, категории и карточки товара и выпишите самые тяжёлые изображения
• Возьмите три-четыре типичных файла: фото товара, интерьер, портрет, баннер с текстом
• Сохраните каждый в WebP и AVIF при разных настройках качества
• Сравните результат на экране телефона и на мониторе, а не только по размеру файла
• Выберите настройки, при которых разница не видна глазу, и зафиксируйте их для типа картинок
• Включите автоматическую конвертацию при загрузке, на этапе сборки или на стороне CDN
• Проверьте сайт на нескольких телефонах и браузерах, затем сравните вес страниц до и после

Типичные ошибки

Большинство проблем с форматами возникает не из-за самих форматов, а из-за спешки при внедрении.

• Конвертировать уже сильно сжатые JPEG: качество падает второй раз, а выигрыш мал. Берите исходники
• Отдавать AVIF без запасного формата, из-за чего часть посетителей остаётся без картинок
• Заменить формат, но оставить огромные размеры: фото шириной с рекламный щит в маленьком блоке
• Одинаковое качество для всех: схема с текстом и фото на белом фоне сжимаются по-разному
• Забыть про картинки в CSS-фонах, слайдерах и всплывающих окнах
• Не проверить, что сервер отдаёт корректный тип файла, и страница показывает пустые блоки
• Конвертировать логотипы и иконки в растр вместо SVG

SEO, превью и картинки в мессенджерах

Поисковики индексируют изображения в WebP и AVIF, так что сам формат позиции не повышает. Эффект косвенный: быстрее страница, лучше поведенческие метрики и показатели скорости. Не забывайте об alt, понятных именах файлов и тексте рядом с картинкой, а если вы меняете адреса файлов, настройте переадресацию, чтобы не потерять трафик из поиска по картинкам.

Отдельный случай — картинка для Open Graph. Когда ссылку на ваш сайт отправляют в Telegram или соцсети, превью строится по этому изображению, и не каждая программа одинаково показывает новые форматы. Для превью оставьте JPEG или PNG. Если вам нужна помощь с технической частью, команда markdev в рамках SEO-оптимизации сайта проверяет вес страниц, формат изображений и показатели скорости вместе, а не по отдельности.

Чек-лист перед запуском

Пройдитесь по списку на тестовой копии сайта и на боевом сайте после публикации.

• Главные картинки первого экрана весят заметно меньше, чем раньше
• У AVIF есть запасной WebP или JPEG
• У каждого img заполнены alt, width и height
• Фоновые изображения в CSS тоже переведены
• Картинка для превью ссылок осталась в JPEG или PNG
• В Network разработчика видно, какой формат реально загружается
• Lighthouse больше не предупреждает о картинках в устаревших форматах