Практическое руководство по размерам и форматам изображений для веба

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

Начальные бюджеты по назначению

Эти диапазоны показывают сдержанный бюджет веб-доставки. Результаты JPEG, WebP или AVIF могут быть выше или ниже; корректируйте их по источнику, кодировщику, размеру показа, полевым данным и визуальной проверке.

Как превратить начальные диапазоны в свой бюджет

Отчёт HTTP Archive о весе страниц даёт актуальное распределение, но глобальная медиана — не ваша аудитория. Опубликованный Google «хороший» порог LCP равен 2,5 секунды на 75-м процентиле посещений. По полевым данным и диаграмме загрузки распределите время между ответом сервера, обнаружением ресурса, передачей, декодированием и задержкой отрисовки.

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

Формат — одна из основных переменных

Один источник может дать очень разные размеры в зависимости от кодировщика и цели качества. Таблица показывает поведение для сравнения, а не универсальный эталон для фотографии шириной 1200 пикселей.

В отдельных сравнениях WebP или AVIF могут превзойти JPEG, но фиксированный процент не действует для всех источников и кодировщиков. Оба современных формата поддерживают прозрачность. Смотрите руководство по WebP и AVIF.

Создавайте кандидаты с помощью JPG в WebP, Конвертации в AVIF для указанных входов или Пакетной конвертации для показанных инструментом форматов.

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

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

Изображение 4000 × 3000 содержит 12 MP; 1200 × 900 — 1,08 MP, на 91% меньше пикселей. При том же числе каналов и точности это сокращает несжатый растр для кодировщика, хотя итоговая экономия байтов зависит от содержимого и настроек.

Правило для отзывчивых изображений: предлагайте кандидаты около возможных ширин и плотностей показа. Для области шириной 720 CSS-пикселей кандидат 1440px может подойти экрану 2×, но масштаб, обрезка, изменение макета и более высокая плотность меняют выбор. Опишите варианты через srcset и sizes.

Создайте кандидата нужных макету размеров инструментом Vizua Изменить размер. Затем проверьте подходящее сжатие JPEG или PNG; уже оптимизированный источник может не уменьшиться.

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

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

Пример процесса: начните с мастера 4000 × 3000 и храните его вне набора доставки.

1. Измените размер до кандидата вроде 1200 × 900, если он соответствует области и целевой плотности
2. Экспортируйте WebP-кандидат с выбранным начальным качеством и проверьте реальный файл
3. Экспортируйте AVIF-кандидат, если стек его поддерживает, и сравните размер, вид и стоимость кодирования

Выберите наименьший кандидат, отвечающий задаче. Итоговая экономия и видимое различие зависят от реальных источников и результатов, а не только от примерных размеров.

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

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

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

Фото товара должно оставаться полезным при поддерживаемом магазином увеличении. Создавайте отзывчивые кандидаты из защищённого мастера, проверяйте детали и задавайте отдельные бюджеты для сетки, главного вида и увеличения. Требования маркетплейса могут отличаться от доставки магазина.

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

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

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

Рекомендации и форматы Open Graph различаются между платформами и могут меняться. JPEG или PNG 1200 × 630 — распространённая отправная точка, но проверяйте текущие требования и предпросмотр. Краулеры получают эти файлы независимо от ленивой загрузки страницы.

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

Создайте бюджет страницы из цели производительности. Один из начальных вариантов для теста:

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

Этот пример не гарантирует скорость. Галереи и сетки могут отложить подходящие заэкранные изображения, но ленивые ресурсы всё равно расходуют данные при запросе и могут влиять на прокрутку. Измеряйте начальную и интерактивную производительность на типичных устройствах и сетях.

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