Размеры файлов изображений для веба: форматы, пиксели и целевые КБ

У каждого изображения на сайте есть свой «бюджет» по размеру файла. Превысили — страница грузится мучительно долго. Уложились — всё работает мгновенно. Этот гайд даёт конкретные цели в КБ для всех типичных задач, нужные пиксельные размеры и подходящий формат для каждого случая.

Справочная таблица: оптимальные размеры по задачам

Цели рассчитаны для WebP или AVIF. Если вы используете JPEG, добавьте примерно 25-30% к каждому числу.

Откуда взялись эти цифры

По данным HTTP Archive за 2025 год, медианная веб-страница на мобильном устройстве весит около 2,5 МБ, из которых примерно 1 МБ приходится на изображения — это около 40% общего веса. Порог «хорошего» Largest Contentful Paint по стандартам Google — 2,5 секунды. Чтобы уложиться в это время на 4G-соединении (реальная пропускная способность ~1,5 МБ/с), hero-баннер должен загружаться менее чем за секунду, а значит — весить не больше 200 КБ.

Цели в таблице не случайны. Они обратно рассчитаны из реальных бюджетов производительности: общий бюджет изображений 400-600 КБ на страницу, распределённый между hero, контентом и миниатюрами.

Формат — решающий фактор

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

Переход с JPEG на WebP экономит 25-35%. Переход на AVIF — около 50% по сравнению с JPEG. Оба формата поддерживают прозрачность. Подробное сравнение — в нашем гайде WebP vs AVIF.

Конвертировать можно прямо сейчас: JPG в WebP, любой формат в AVIF или пакетная конвертация для нескольких файлов одновременно.

Пиксельные размеры: скрытый множитель

Размер файла зависит от двух факторов: количества пикселей и сжатия. Большинство людей фокусируются на сжатии и игнорируют пиксели — хотя уменьшение разрешения даёт куда больший эффект.

Простой пример: фотография 4000 × 3000 — это 12 миллионов пикселей. Уменьшите её до 1200 × 900 — получите 1,08 миллиона пикселей, то есть на 91% меньше исходных данных. Ещё до сжатия вы убрали основную часть «веса».

Правило: никогда не отдавайте изображение шире контейнера, в котором оно отображается. Если ширина контентной колонки блога — 720px, то максимальная ширина изображения для 2× Retina — 1440px. Всё, что больше, — пустая трата трафика.

Используйте инструмент изменения размера Vizua, чтобы привести картинки к нужным размерам, а затем сжимайте через JPEG-компрессор или PNG-компрессор.

Качество сжатия: золотая середина

Когда размер и формат подобраны, остаётся настроить уровень качества. Вот практический сценарий, показывающий, как три рычага работают вместе:

Исходная точка: фотография с камеры, 4000 × 3000, сохранённая как PNG — около 14 МБ.

1. Масштабирование до 1200 × 900 (ширина контента, 2× Retina): ~3,5 МБ как PNG
2. Конвертация в WebP при качестве 80: ~130 КБ
3. Конвертация в AVIF при качестве 65 (если стек поддерживает): ~90 КБ

Итого — уменьшение на 99,3% от оригинального PNG. Полученное изображение визуально неотличимо от источника при обычном размере просмотра.

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

Особые случаи

Интернет-магазины

Товарные фото должны оставаться чёткими при увеличении. Основное изображение — 800-1000px (1600-2000px для Retina) в WebP. Большинство товарных снимков хорошо сжимаются до 80-150 КБ. Миниатюры в каталоге — 300-400px, примерно 20-50 КБ каждая.

Фотопортфолио

Качество на первом месте, но скорость загрузки тоже важна. Превью — 1200-1600px в WebP (качество 85), целевой размер — 150-250 КБ. Отдельная ссылка «Открыть в полном размере» для высокого разрешения.

Open Graph для соцсетей

OG-изображения — 1200 × 630px. Facebook и Twitter принимают JPEG и PNG; некоторые платформы поддерживают WebP. Держите их под 150 КБ. Эти картинки загружаются краулерами, а не ленивой загрузкой браузера, поэтому каждый килобайт на счету.

Общий бюджет изображений на страницу

Полезный ориентир: стремитесь к суммарному весу изображений не более 500 КБ на страницу. Обычно это выглядит так:

• 1 hero-баннер: ~150 КБ
• 3-4 контентных изображения: по ~100 КБ, итого 300-400 КБ
• Миниатюры, аватары, иконки: ~50 КБ суммарно

При таком бюджете страница быстро грузится на 4G и не расходует мобильный трафик. Если нужно больше изображений (галерея, каталог товаров), ленивая загрузка удерживает начальный вес в рамках бюджета — на производительность первой загрузки влияют только изображения «выше сгиба».

Часто задаваемые вопросы