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

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

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

Отчёт HTTP Archive о весе страниц показывает, что изображения остаются существенными, хотя медианы меняются. Largest Contentful Paint (LCP) измеряет рендеринг крупнейшего подходящего элемента области; часто, но не всегда, это изображение.

Пороги Google считают до 2.5 секунды хорошим LCP, а больше 4 — плохим на 75-м процентиле посещений. Работа с изображениями может сдвинуть страницу, когда ресурс LCP — узкое место, но сама не гарантирует прохождение Core Web Vitals или поисковую позицию.

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

Формат заметно влияет на размер и функции. Сравнение качественное: результаты зависят от источника, кодировщика, настроек и цели качества:

WebP — полезный стандартный кандидат, не универсальный ответ. При поддержке AVIF конвейером и аудиторией тестируйте его более ранним <source> с резервным WebP или JPEG. В Vizua можно конвертировать JPG в WebP или в AVIF; файл обрабатывается в браузере и не отправляется на наш сервер.

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

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

Фото 4000 × 3000 пикселей при показе 800 × 600 содержит гораздо больше исходных пикселей, чем нужно слоту. Адаптивному экрану высокой плотности может требоваться больший вариант, но оригинал камеры обычно добавляет лишнюю передачу и декодирование.

Принцип — предлагать варианты рядом с размером и плотностью рендеринга. Используйте srcset и sizes, учитывая ширину макета, плотность устройства, качество, масштаб и кадрирование, вместо фиксированного множителя «Retina».

Примеры начальных размеров для адаптации к макету:

• Полноширинный hero: начать с крупнейшего слота и создать варианты для нужных плотностей и точек
• Изображение статьи: соответствовать колонке и более широким адаптивным состояниям
• Миниатюра: создавать вариант для каждого размера карточки, не переиспользовать hero
• Аватар: учитывать круг или квадрат, плотность и подробный профиль

Перед сжатием создайте варианты через изменение размера Vizua. Экономия зависит от исходного и целевого числа пикселей; измеряйте файлы.

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

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

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

• JPEG: 75–85 — осторожный начальный диапазон для фото. Шкалы различаются; проверяйте.
• WebP: 75–80 — начальный диапазон, не гарантированный эквивалент JPEG.
• AVIF: 60–75 может быть началом в некоторых инструментах; шкалы и кодировщики различаются.
• PNG: сначала более сильное сжатие без потерь. Палитра до 256 записей может сэкономить больше, но это потеря цвета, требующая проверки.

Компрессор JPEG Vizua позволяет менять качество и проверять результат. Подробный метод — в материале о сжатии без потери качества.

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

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

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

Задайте каждому <img> точные внутренние width и height или зарезервируйте слот правилом. Браузер рано определит пропорцию. Это снижает движение от изображения, хотя шрифты, вставки, анимации и неверные стили всё ещё влияют на Cumulative Layout Shift (CLS).

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

Рассмотрите loading="lazy" для изображений достаточно далеко от начальной области. Не применяйте механически к LCP или немедленно нужному содержимому. Эвристики, карусели, печать, быстрое прокручивание и скрытые макеты требуют тестов.

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

Не откладывайте вероятное LCP-изображение. Используйте fetchpriority="high", если оно действительно заслуживает раннюю полосу, и сделайте его доступным в исходном HTML. Не назначайте высокий приоритет широко; подтвердите эффект в trace и полевых данных.

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

srcset и sizes дают варианты и описывают слот. Браузер учитывает область, плотность, кэш и реализацию. sizes должен соответствовать макету; ошибка выбирает слишком большой или маленький вариант.

Шаг 5: регулярно проверяйте и измеряйте

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

• PageSpeed Insights: запускайте PageSpeed Insights на типичных страницах. Разделяйте полевой и лабораторный LCP и смотрите текущую диагностику, а не изменяемое имя проверки.
• Network DevTools: сортируйте запросы по размеру и проверяйте большие изображения в контексте. Сопоставляйте размеры, формат, сжатие, кэш и приоритет с ролью вместо общего лимита КБ.
• Автоматизация: добавьте оптимизацию в сборку, чтобы находить большие изображения до публикации.

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

• Создавать и сравнивать подходящие JPEG, WebP, AVIF, PNG или SVG
• Уменьшать до реальных размеров показа, не шире необходимого
• Начинать с осторожных настроек, сравнивать байты и вид; не приравнивать числа качества форматов
• Резервировать точный слот для каждого <img>, обычно через внутренние width и height
• Рассмотреть fetchpriority="high" для LCP и затем измерить
• Откладывать подходящие заэкранные изображения; проверять прокрутку и макет
• srcset/sizes для адаптивной доставки
• Задавать бюджеты из страницы, аудитории и полевых данных
• Удалять ненужные личные метаданные, сохраняя нужные профили и данные — см. EXIF и конфиденциальность
• Регулярный аудит через PageSpeed Insights

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