Изображения на сайте: как не замедлить загрузку
Изображения делают сайт красивым, но именно они чаще всего виноваты в медленной загрузке. Одна неоптимизированная фотография может весить больше, чем вся остальная страница. Хорошая новость: пара простых приёмов держит сайт и красивым, и быстрым, без потери качества картинки.
Почему изображения замедляют сайт
Каждое изображение нужно загрузить на устройство посетителя. Чем больше файл, тем дольше открывается страница, особенно на мобильной сети.
Частая ошибка - загрузить прямо с камеры фото шириной 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-изображении первого экрана, которое должно появиться сразу. Большинство современных платформ включают её по умолчанию.