Какой формат изображений лучше всего подходит для сайтов в 2026 году?

Ваши изображения, скорее всего, слишком большие. Средняя веб-страница весит более 2 МБ, и изображения составляют почти половину этого веса. Выбор правильного формата для каждого изображения — самый простой способ ускорить сайт.

Но когда доступны JPG, PNG, WebP, AVIF и SVG, как выбрать? У каждого формата есть своя причина существования. Неправильный тратит трафик. Правильный делает страницы быстрыми без потери качества.

Рассказываем, какой формат использовать и когда.

Какой формат использовать для фотографий?

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

Лучший выбор: AVIF. Создаёт самые маленькие файлы. Фото размером 1 МБ в JPG становится 500-600 КБ в AVIF при том же визуальном качестве. Это сокращение на 40-50%. Поддержка браузерами составляет 93% и продолжает расти.

Второй выбор: WebP. Файлы на 25-35% меньше, чем JPG. Поддержка браузерами превышает 97%. Если вам нужен самый безопасный современный вариант, это WebP. Смотрите как WebP превосходит JPG в нашем подробном сравнении.

Запасной вариант: JPG. До сих пор работает везде. Используйте его как последнее средство для небольшого процента пользователей с очень старыми браузерами.

Никогда: PNG для фотографий. Фото в формате PNG в 5-10 раз больше, чем нужно. PNG не предназначен для фотографического контента. Если вы видите PNG-фото на своём сайте, конвертируйте их немедленно.

Идеальная настройка использует HTML-элемент <picture>:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description">
</picture>

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

Что насчёт изображений с прозрачностью?

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

Лучший выбор: WebP. Полная поддержка прозрачности. Файлы на 30-70% меньше, чем PNG с прозрачностью. Поддерживается более чем 97% браузеров. Читайте о различиях между WebP и PNG для более глубокого понимания.

Альтернатива: AVIF. Ещё меньше, чем WebP с прозрачностью. Но 93% поддержки браузерами означает, что нужен запасной вариант. Наше сравнение AVIF и WebP охватывает полную картину.

Запасной вариант: PNG. Идеальная поддержка прозрачности. Файлы больше. Используйте как запасной вариант в элементе <picture>.

Никогда: JPG для прозрачных изображений. JPG вообще не поддерживает прозрачность. Прозрачные области становятся белыми (или чёрными). Обходных путей нет.

Частая ошибка: сохранение фото товаров с прозрачным фоном в PNG. Один вырезанный товар в PNG может весить 2-3 МБ. То же изображение в WebP — 200-400 КБ. Умножьте на 50 товаров на странице категории, и вы сэкономите 100 МБ данных.

Стоит ли использовать SVG для логотипов и иконок?

Да. SVG — лучший формат для векторной графики в вебе. Логотипы, иконки, простые иллюстрации и диаграммы почти всегда должны быть в SVG.

Почему SVG выигрывает для векторов:

• Масштабируется до любого размера без потери качества
• Размеры файлов крошечные (часто 2-10 КБ)
• Можно стилизовать с помощью CSS
• Можно анимировать
• Доступен (программы чтения с экрана могут читать текст SVG)

Когда не стоит использовать SVG:

• Фотографии (SVG не может эффективно представлять фото)
• Сложные иллюстрации с множеством цветов и градиентов (размер файла резко растёт)
• Когда платформа не принимает SVG (некоторые соцсети, почтовые клиенты)

Если у вас логотип в PNG весом 80 КБ, замена на SVG-версию весом 5 КБ экономит 94%. При этом SVG-версия выглядит чётче на любом размере экрана.

В ситуациях, где SVG использовать нельзя (электронная почта, соцсети), конвертируйте его в WebP или PNG нужных размеров.

Насколько формат изображений влияет на скорость загрузки?

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

Largest Contentful Paint (LCP). Измеряет, когда загружается самый большой видимый элемент. На большинстве страниц это изображение. Использование AVIF или WebP вместо JPG/PNG может сократить LCP на 1-3 секунды на мобильных соединениях.

Общий вес страницы. Переход с PNG на WebP для всех изображений обычно сокращает общий вес страницы на 40-60%. С JPG на WebP ожидайте сокращения на 25-35%.

Time to Interactive. Меньшие изображения означают меньше данных для загрузки. Браузер быстрее заканчивает загрузку. Страница становится интерактивной раньше.

Реальный пример: страница категории интернет-магазина с 30 фото товаров.

Формат	Общий вес изображений	Время загрузки (3G)
PNG	45 МБ	30+ секунд
JPG (85%)	9 МБ	8 секунд
WebP (85%)	6 МБ	5 секунд
AVIF (80%)	4 МБ	3,5 секунды

Разница между PNG и AVIF — более чем в 10 раз. Даже переход с JPG на WebP экономит 33% и сокращает время загрузки на мобильных на 3 секунды.

Google использует скорость загрузки как фактор ранжирования. Более быстрые страницы занимают более высокие позиции. Лучшие форматы изображений напрямую улучшают SEO. Также вы можете сжать ваши изображения для дополнительной экономии помимо смены формата.

Какие настройки качества использовать?

Одного формата недостаточно. Настройки качества определяют баланс между размером файла и визуальной чёткостью.

Для hero-изображений и контента первого экрана: Используйте качество 85-90%. Эти изображения большие и на виду. Качество здесь важно. Разница в размере файла между 85% и 95% невелика, поэтому ставьте повыше.

Для изображений в контенте (фото в статьях): Используйте 80-85%. Эти изображения обычно отображаются в меньшем размере. Разница в качестве по сравнению с 90% незаметна на обычном расстоянии просмотра.

Для миниатюр и сеточных макетов: Используйте 70-80%. Маленьким изображениям высокое качество не нужно. При размере миниатюры артефакты сжатия невидимы. Экономьте байты.

Для фоновых изображений за текстом: Используйте 60-75%. Эти изображения частично закрыты. Более низкое качество вполне допустимо и может сэкономить более 50% размера файла.

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

Нужно ли поддерживать старые браузеры?

В 2026 году вопрос не столько в «нужно ли», а в «сколько усилий потратить».

WebP: 97%+ поддержки. 3% без поддержки используют Internet Explorer или браузеры до 2020 года. Для большинства сайтов достаточно простого фолбэка с <picture>.

AVIF: 93% поддержки. 7% — это в основном старые версии Safari и некоторые мобильные браузеры. Фолбэк на WebP хорошо покрывает этих пользователей.

JPG и PNG: 100% поддержки. Каждый когда-либо созданный браузер может их отобразить.

Практичный подход: отдавайте современные форматы с фолбэками. Современные пользователи получают маленькие и быстрые изображения. Старые браузеры получают более тяжёлые, но рабочие изображения. Каждый увидит что-то.

Если ваша аналитика показывает нулевой трафик со старых браузеров, фолбэки можно убрать совсем. Просто отдавайте WebP. Если хотите подстраховаться, добавьте элемент <picture> с фолбэком на JPG. Это всего пару дополнительных строк HTML.

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

Как конвертировать изображения в лучший формат?

ConvertIMG конвертирует между всеми основными форматами. JPG, PNG, WebP, AVIF, TIFF, GIF, SVG и HEIC. Всё работает в вашем браузере. Без загрузки на сервер. Без регистрации.

Перетащите свои изображения, выберите целевой формат, настройте качество и скачайте. Пакетная конвертация обрабатывает целые папки за раз. Ваши изображения всё время остаются на вашем устройстве. Готовы перевести PNG? Конвертируйте изображения в WebP с нашим пошаговым руководством.