Почему изображения замедляют сайт
Каждое изображение нужно загрузить на устройство посетителя. Чем больше файл, тем дольше открывается страница, особенно на мобильной сети.
Частая ошибка - загрузить прямо с камеры фото шириной 4000 пикселей и весом несколько мегабайт, хотя на экране оно показывается шириной 800 пикселей.
Медленная загрузка бьёт с двух сторон: посетитель уходит, не дождавшись открытия, и Google понижает позицию, потому что скорость - фактор ранжирования.
Изображения влияют и на метрику Core Web Vitals под названием LCP, которая измеряет, как быстро появляется самый крупный элемент страницы, часто это большое hero-изображение.
Выберите правильный формат
Формат определяет, сколько весит файл при том же качестве. Устаревшие форматы избыточно тяжёлые.
- WebP - сегодняшний выбор по умолчанию: то же качество, что у JPEG, но файл на 25-35% меньше. Его поддерживают все современные браузеры.
- AVIF идёт ещё дальше и даёт ещё меньший файл, особенно хорош для крупных фотографий.
- PNG оставьте для элементов с прозрачностью и логотипов, а не для фотографий, потому что как фото он очень тяжёлый.
- SVG лучший для иконок и простой графики, потому что это вектор и он остаётся чётким в любом размере.
Размер и габариты
Никогда не загружайте картинку крупнее, чем она показывается. Если элемент шириной 600 пикселей, от файла в 3000 пикселей нет пользы, только лишний вес.
Используйте адаптивные изображения, где браузер сам выбирает нужный размер под экран. Так телефон получит маленькую версию, а компьютер большую.
Сжимайте файл перед загрузкой. Инструменты вроде Squoosh или TinyPNG уменьшают объём в разы без заметной потери качества.
Задайте разумный ориентир: большинство контентных изображений должны быть меньше 200 КБ, hero-изображения меньше 400 КБ.
Загрузка и стабильность вёрстки
Ленивая загрузка (lazy loading) означает, что изображения ниже первого экрана грузятся только тогда, когда пользователь до них доскроллит. Это заметно ускоряет первое открытие.
Задавайте каждому изображению ширину и высоту или соотношение сторон. Иначе вёрстка прыгает во время загрузки, что портит метрику CLS и раздражает пользователя.
Hero-изображение первого экрана не ставьте на ленивую загрузку, оно должно появиться сразу. Lazy loading нужен картинкам ниже.
Добавляйте каждому изображению осмысленный alt-текст. Это помогает доступности, даёт Google контекст и приводит трафик из поиска по картинкам.
Простой рабочий процесс
Хорошая работа с изображениями не требует дорогого софта, только последовательной привычки с каждой картинкой.
- Уменьшите габариты до отображаемого размера.
- Переведите в формат WebP или AVIF.
- Сожмите файл и проверьте, что вес разумный.
- Добавьте alt-текст, ширину и высоту.
Если сайт на WordPress, большую часть этого автоматизирует плагин оптимизации изображений, но за оригинал в правильных размерах всё равно отвечаете вы.
FAQ
Какой формат изображений лучший для сайта?
Для фотографий сегодня лучший WebP: то же качество, что у JPEG, но файл заметно меньше, а ещё меньше даёт AVIF. Для элементов с прозрачностью подходит PNG, для иконок SVG. Главное - избегать тяжёлого неоптимизированного JPEG или PNG в роли фото.
Какого размера может быть файл изображения?
Общее правило - держать контентные изображения меньше 200 КБ, а крупные hero-изображения меньше 400 КБ. Гораздо важнее точной цифры то, что картинка не грузится крупнее отображаемого размера и сжата перед загрузкой. Так страница остаётся быстрой и на мобильном.
Что такое ленивая загрузка и стоит ли её использовать?
Ленивая загрузка грузит изображения ниже первого экрана только когда пользователь до них доскроллит, что ускоряет первое открытие страницы. Её стоит использовать на всех контентных картинках, но не на hero-изображении первого экрана, которое должно появиться сразу. Большинство современных платформ включают её по умолчанию.