Оптимизация изображений для сайта: полное руководство на 2026 год

Изображения — это около 40% общего веса средней веб-страницы. Оптимизируйте их грамотно — и вес страницы уменьшится вдвое, Largest Contentful Paint опустится ниже 2,5 секунд, а позиции в поиске вырастут. Вот полный процесс, шаг за шагом.

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

По данным HTTP Archive, медианная веб-страница на мобильном устройстве весит около 2,5 МБ, из которых на изображения приходится примерно 1 МБ. Core Web Vitals от Google — в частности, Largest Contentful Paint (LCP) — напрямую измеряют, как быстро загружается крупнейший видимый элемент. На большинстве страниц этот элемент — изображение.

Ориентир: LCP не более 2,5 секунд — «хорошо». Свыше 4 секунд — «плохо». Страницы, где элемент LCP — изображение, имеют 75-й перцентиль загрузки почти вдвое медленнее, чем страницы с текстовым LCP. Разница между хорошо оптимизированным hero-баннером и раздутым — зачастую разница между зелёным и красным показателем Core Web Vitals.

Шаг 1: Выберите правильный формат

Выбор формата оказывает наибольшее влияние на размер файла. Сравнение основных веб-форматов на основе реальных бенчмарков:

Для большинства сайтов WebP — самый безопасный выбор по умолчанию. Он хорошо справляется и с фото, и с графикой, агрессивно сжимает и работает повсеместно. Если ваш стек поддерживает, отдавайте AVIF как основной формат с WebP как запасным через элемент <picture>. Вы можете конвертировать JPG в WebP или конвертировать в AVIF с помощью Vizua — всё работает в браузере, без загрузки на сервер.

Подробное сравнение — в нашем анализе WebP vs AVIF и объяснении сжатия с потерями vs без потерь.

Шаг 2: Масштабируйте до реальных размеров отображения

Фотография 4000 × 3000 пикселей с камеры, отображаемая на сайте как 800 × 600, тратит впустую около 80% своих пикселей. Эти невидимые пиксели по-прежнему стоят трафика и времени парсинга.

Правило: отдавайте изображения в размерах, близких к фактическому отображению. На обычном дисплее — совпадение пиксель в пиксель. На 2x Retina — ширина изображения вдвое больше ширины отображения для чёткости, но не более.

Практические ориентиры:

• Hero на всю ширину: 1600-1920px (до 2x для Retina)
• Изображение в статье: 800-1200px
• Миниатюра: 300-400px
• Аватар: 64-128px (до 256px для 2x)

Используйте инструмент изменения размера Vizua, чтобы уменьшить изображения до нужной ширины перед сжатием. Одно только масштабирование может сократить размер файла на 70-90%.

Шаг 3: Сожмите с правильными настройками качества

После выбора формата и масштабирования сжатие — финальный этап экономии. Ползунок качества важнее, чем многие думают: зависимость между качеством и размером файла нелинейна. Снижение качества JPEG со 100 до 80 экономит огромный объём; снижение с 80 до 60 даёт убывающую отдачу с видимыми артефактами.

Рекомендуемые настройки:

• JPEG: 75-85 — оптимум для фотографий. JPEG при качестве 80 обычно на 60-80% меньше несжатого оригинала без видимых отличий.
• WebP: 75-80 — эквивалентное визуальное качество JPEG 85 при меньшем размере.
• AVIF: 60-75 — даже низкие значения выглядят хорошо благодаря эффективности кодека.
• PNG: Максимальный уровень сжатия (lossless). Для дополнительной экономии — сокращение до 8 бит (256 цветов), когда графика это позволяет.

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

Шаг 4: Отдавайте изображения эффективно

Хорошее сжатие — это лишь полдела. Как именно вы доставляете изображения в браузер — не менее важно для производительности.

Указывайте явные размеры

Всегда добавляйте атрибуты width и height к тегу <img> (или используйте CSS aspect-ratio). Это предотвращает сдвиг макета — «прыжки» контента при загрузке изображений, — что напрямую влияет на показатель Cumulative Layout Shift (CLS).

Lazy loading для изображений ниже сгиба

Добавьте loading="lazy" к изображениям, не видимым при первой загрузке страницы. Браузер отложит их загрузку до тех пор, пока пользователь не прокрутит к ним, экономя трафик при начальной загрузке.

Приоритизируйте hero-изображение

Для самого важного изображения над линией сгиба сделайте обратное: добавьте fetchpriority="high" и убедитесь, что у него нет loading="lazy". Тесты Google показывают: предзагруженные LCP-изображения достигают почти идеальных показателей (75-й перцентиль — 364 мс), тогда как отложенные LCP-изображения почти вдвое медленнее (720 мс).

Используйте адаптивные изображения

Атрибуты srcset и sizes позволяют браузеру выбрать оптимальный вариант для размера и разрешения экрана пользователя. Отдавайте 400px телефону, 800px планшету и 1600px десктопу — всё из одного тега <img>.

Шаг 5: Аудит и измерение

Оптимизация — не разовая задача. Каждое новое добавленное изображение — шанс для регресса.

• PageSpeed Insights: запустите PageSpeed Insights от Google на ключевых страницах. Смотрите на показатель LCP и рекомендации «Serve images in next-gen formats» или «Properly size images».
• Вкладка Network: откройте DevTools в браузере, вкладку Network. Отсортируйте по размеру. Если какое-то изображение превышает 200 КБ — подумайте, можно ли его масштабировать, пересжать или конвертировать в более эффективный формат.
• Автоматизация: добавьте оптимизацию изображений в пайплайн сборки. Ловите тяжёлые картинки до того, как они попадут в продакшен.

Чек-лист для быстрой проверки

• Используйте WebP или AVIF как формат по умолчанию
• Масштабируйте до реальных размеров отображения (не шире необходимого)
• Сжатие: JPEG/WebP при качестве 75-85, AVIF при 60-75
• width и height на каждом <img>
• fetchpriority="high" на hero/LCP-изображении
• loading="lazy" на всём, что ниже сгиба
• srcset/sizes для адаптивной доставки
• Hero-изображения до 200 КБ, миниатюры до 80 КБ
• Удаляйте ненужные метаданные (EXIF, ICC-профили) — подробнее в гайде по EXIF и приватности
• Регулярный аудит через PageSpeed Insights

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