Оптимальный размер и качество изображений для сайта (по задачам)

«Какого размера делать картинки?» — один из самых частых вопросов в веб-дизайне, и ответ всегда один: «зависит от того, где они показываются». Неверный размер либо тормозит страницу, либо портит качество; ориентиры по задачам помогают избежать обоих. Этот гид даёт практические стартовые значения размеров, веса и качества — чтобы не гадать.

Два важных числа

У каждого веб-изображения два размера: пиксельные габариты (например, 1600×900) и вес в килобайтах. Габариты должны примерно соответствовать месту, которое картинка занимает на экране, а вес — быть минимальным при чистой картинке. Оптимизировать нужно оба.

Ориентиры по задачам

Полноширинные обложки (hero)

Ориентируйтесь на ширину 1600–2000 px для больших экранов и держите файл примерно до 200 КБ в WebP или AVIF. Обложка обычно и есть LCP-элемент, так что её вес непропорционально влияет на ощущаемую скорость.

Фото в блоге и контенте

Большинство колонок статей — 700–900 px, поэтому изображение в 1200–1600 px покрывает и retina-экраны. Цельтесь сильно ниже 150 КБ. Качества 75 в WebP почти всегда достаточно.

Миниатюры и карточки

Миниатюры малы на экране, так что 400–600 px хватает с запасом. Часто их можно ужать ниже 30–50 КБ — что очень заметно, когда на странице их десятки.

Отправная точка по качеству

Для форматов с потерями безопасный диапазон для фото — качество 70–80. AVIF даёт тот же вид при чуть меньших значениях. Всегда сравнивайте до и после: правильное значение — наименьшее, при котором разницы не видно.

Применяем на практике

Выберите целевую ширину для каждой задачи, уменьшите до неё и конвертируйте в WebP или AVIF с качеством 75. В Scrunch можно пакетно конвертировать целый набор и проверить каждый результат рядом с оригиналом до скачивания — чтобы каждая картинка весила ровно столько, сколько нужно.

Частые вопросы

Можно ли загружать изображения больше размера показа?

До ~2x от размера показа полезно для retina-экранов. Сверх этого вы лишь тратите трафик и замедляете страницу — считайте 2x потолком.

Чем меньше файл, тем лучше?

Пережмёте — и качество заметно пострадает. Цель — наименьший файл, который всё ещё выглядит чисто. Сравнивайте до/после, чтобы найти баланс.

Использовать одно качество для всех изображений?

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

Влияют ли имена файлов на SEO?

Да. Осмысленные имена файлов и alt-текст помогают поиску по картинкам и доступности. red-running-shoes.webp лучше, чем img12345.jpg. Вместе с оптимизацией размеров и веса это усиливает SEO изображений.