Изображения обычно самое тяжёлое на странице, что делает их самым большим рычагом скорости в ваших руках. Задайте правильно их размеры и вес файла — и страницы ощущаются мгновенными. Ошибитесь — и вы проваливаете Core Web Vitals, каким бы чистым ни был ваш код. Вот ориентиры и процесс, чтобы в них попасть.
Ориентиры по размерам
Сопоставьте размер изображения в пикселях с тем, где оно реально появляется. Грубый ориентир:
- Полноширинный герой: 1600–2000 px в ширину покрывает большинство десктопных макетов. Шире редко помогает и стоит много байтов.
- Фото внутри контента: ширина вашей колонки контента, часто 800–1200 px.
- Миниатюра / картинка карточки: 300–500 px.
- Аватар / иконка: 48–200 px в размере отображения.
Подача изображения 4000px в слот 800px означает, что браузер скачивает и декодирует в 25 раз больше пикселей, чем когда-либо покажет. Это чистые потери — а декодирование крупных изображений ещё и подтормаживает главный поток.
Ориентиры по весу
Размеры задают потолок; сжатие задаёт фактический вес. Целитесь в:
- Изображение-герой: менее 200 КБ (в идеале 100–150 КБ).
- Фото внутри контента: 80–150 КБ.
- Миниатюра: 10–30 КБ.
- Всего изображений на странице: старайтесь держаться под ~1 МБ на всю страницу.
Если одно изображение превышает ~300 КБ, считайте это багом для разбирательства.
Почему это влияет на Core Web Vitals
Google-метрика Largest Contentful Paint (LCP) измеряет, сколько времени до отрисовки самого большого элемента на экране — а на большинстве страниц этот самый большой элемент и есть изображение (обычно герой). Тяжёлый, раздутый герой напрямую вздувает LCP. Хороший LCP — менее 2,5 секунд; раздутый герой сам по себе может выбить это на мобильных соединениях.
Ещё два выигрыша, связанных с изображениями:
- Задавайте атрибуты width и height, чтобы браузер зарезервировал место — это защищает ваш показатель Cumulative Layout Shift (CLS).
- Приоритизируйте герой (не откладывайте ленивую загрузку LCP-изображения) и лениво грузите всё ниже сгиба.
Процесс из двух шагов
Шаг 1 — уменьшите до реальной ширины отображения. Используйте изменение размера изображений, чтобы привести каждое изображение к размеру, в котором оно появляется. Блокировка соотношения включена, качественное уменьшение. Одно это часто срезает вес на 80–90%.
Шаг 2 — сожмите. Подайте уменьшенные файлы в сжатие изображений: качество 75–85 для фото (визуально без потерь), квантование до 256 цветов для PNG. Оно никогда не выдаёт файл больше оригинала, обрабатывает пакеты и имеет опциональный лимит ширины, так что можно эффективно сделать оба шага сразу. Для современных браузеров конвертация фото в WebP выжимает ещё 25–35%.
Измеряйте, а не гадайте
Когда изображения оптимизированы, подтвердите, что страница действительно стала быстрее. Page QA от IMG.DIY проверяет живой URL через Google PageSpeed Insights и сообщает вес изображений страницы, чтобы вы заметили любой файл, который всё ещё слишком тяжёл. Одна оговорка: Page QA нужно интернет-соединение — в отличие от инструментов для изображений, он обращается к API Google PageSpeed, поэтому не работает офлайн. Используйте его после публикации, чтобы проверить реальный LCP и бюджет изображений.
Приватно по умолчанию
Инструменты изменения размера, сжатия и конвертации работают целиком в вашем браузере через Canvas и WebAssembly — ничего не загружается, а после первого визита они кэшируются и работают офлайн. Можно подготовить изображения на целый сайт без соединения, а затем запустить Page QA онлайн, когда страница уже опубликована.
Кратко: подберите правильные размеры, сожмите до ориентиров по весу, приоритизируйте герой ради LCP и проверьте через Page QA.