Изображения — самая частая причина медленной загрузки. Они занимают больше всего веса страницы, и именно с них стоит начинать ускорение. Хорошая новость: привести картинки в порядок проще, чем кажется, и эффект обычно самый заметный из всех оптимизаций. Разберём, как это сделать без потери качества и почему на правильной платформе всё это происходит само собой.
Почему картинки замедляют сайт
Снимок с современной камеры или смартфона весит 5–10 мегабайт. Если залить его на сайт как есть, браузер должен скачать весь этот объём, прежде чем показать страницу. На мобильном интернете это оборачивается секундами ожидания — а большинство посетителей заходят именно с телефона. Часть людей уходит, не дождавшись.
Поэтому в практическом плане ускорения сайта картинки стоят на первом месте: привели их в порядок — и балл скорости часто подскакивает сразу на десятки пунктов. Хорошая новость в том, что это разовая настройка: один раз выстроенный правильный процесс работы с изображениями дальше поддерживает скорость сам, без ручного труда над каждым новым фото.
Современные форматы: WebP и AVIF
Старые форматы JPEG и PNG весят много. Современные WebP и AVIF дают то же качество при значительно меньшем размере файла. Перевод изображений в эти форматы заметно ускоряет сайт, особенно на мобильном интернете, и при этом разницу в качестве на глаз не видно.
| Формат | Сильная сторона | Когда использовать |
|---|---|---|
| AVIF | Максимальное сжатие | Фото, где браузер поддерживает — лучший выбор |
| WebP | Баланс веса и совместимости | Фото как основной рабочий формат |
| SVG | Вектор, чёткость, малый вес | Логотипы, иконки, простая графика |
| JPEG / PNG | Широкая совместимость | Запасной вариант для старых браузеров |
Что ещё помогает, кроме формата
Один только перевод в WebP не решает всё. Полная оптимизация — это несколько приёмов вместе, и каждый убирает свой кусок лишнего веса.
- Сжатие: убрать лишний вес без видимой потери качества.
- Правильный размер: не грузить фото 4000 пикселей туда, где нужно 800.
- Ленивая загрузка: картинки ниже экрана подгружаются по мере прокрутки.
- Резервирование места: чтобы вёрстка не прыгала при загрузке картинок.
Одно неоптимизированное фото может весить больше, чем весь остальной сайт. Изображения — первое, что стоит привести в порядок.
Адаптивные изображения под устройство
Одна и та же картинка не должна грузиться одинаково на 4K-мониторе и на телефоне. Адаптивные изображения отдают версию под размер экрана: маленькому экрану — лёгкий файл, большому — детальный. Это экономит трафик и ускоряет загрузку именно там, где это критично, — на мобильных.
Настраивать это вручную для каждой картинки и каждого размера экрана — большая и скучная работа. Поэтому на хороших платформах подбор размера автоматизирован.
Автоматизация на чистом коде
На сайте, сделанном на Next.js, оптимизация изображений работает автоматически: при загрузке картинка конвертируется в WebP или AVIF, сжимается, и под каждое устройство отдаётся нужный размер. Вам не нужно вручную пересохранять фото — достаточно загрузить исходник.
Именно поэтому наши сайты держат 95–100 баллов Google PageSpeed даже с большим числом фотографий. Качественный визуал и скорость перестают конфликтовать. Как подобрать сами фотографии и где их взять — в статье про фото и контент для сайта.
Не забудьте про alt — текст у картинок
Оптимизация — это не только вес. У каждой значимой картинки должен быть атрибут alt — короткое текстовое описание того, что на ней изображено. Он нужен сразу для двух вещей: поисковик понимает, что на фото, и может показать картинку в поиске по картинкам, а программы для незрячих зачитывают это описание вслух.
Пишите alt по делу: не «картинка1.jpg», а «ремонт ванной под ключ в современном стиле». Декоративным фонам alt не нужен — их помечают пустыми, чтобы не засорять. Это мелочь, которая бесплатно добавляет сайту трафика из поиска по картинкам и делает его доступнее.
Как это влияет на бизнес
Скорость — не абстрактная метрика. Быстрый сайт выше ранжируется в поиске, потому что скорость входит в Core Web Vitals и влияет на SEO, и дешевле в рекламе: качественная быстрая посадочная снижает цену клика. А ещё быстрый сайт просто удерживает больше посетителей до заявки.
Если ваш сайт медленный из-за тяжёлых картинок и платформа не даёт это нормально исправить, стоит задуматься о переносе на код. Для магазинов с большим каталогом это особенно важно — интернет-магазин на коде оптимизирует сотни карточек товаров автоматически, без ручной возни с каждым фото.
Частые ошибки с изображениями
Даже зная про форматы, легко ошибиться. Вот промахи, которые встречаются чаще всего и сводят оптимизацию на нет.
- Грузят исходник с камеры «как есть», рассчитывая, что «и так сойдёт».
- Ставят огромную картинку и уменьшают её только размерами в вёрстке — вес остаётся прежним.
- Используют PNG для фотографий, где он весит в разы больше JPEG или WebP.
- Забывают про логотип и иконки: держат их в тяжёлых растрах вместо лёгкого SVG.
- Не задают картинкам размеры, и вёрстка прыгает при загрузке, пугая посетителя.
Итог: с чего начать
- Проверьте вес самых больших картинок на сайте.
- Сожмите их и переведите в WebP или AVIF.
- Уберите избыточные размеры: отдавайте фото под нужный экран.
- Включите ленивую загрузку для картинок ниже первого экрана.
- Если платформа не позволяет — рассмотрите переезд на чистый код.