Как ускорить загрузку изображений на сайте
Пять изменений, которые уменьшают вес изображений на любом сайте, в порядке эффекта.
На большинстве сайтов изображения составляют основную часть того, что скачивает посетитель. Одно неоптимизированное фото с телефона может весить больше, чем вся остальная страница. Исправление изображений обычно самое большое и дешёвое ускорение из доступных, а быстрые страницы лучше ранжируются, дольше удерживают посетителей и лучше конвертируют.
1. Загружайте изображения в том размере, в каком их показывают
Фото прямо с телефона шириной 4000 пикселей и больше. Колонка текста на сайте редко шире 1200 пикселей, а карточка или миниатюра намного меньше. Каждый лишний пиксель скачивается, а потом выбрасывается браузером. Меняйте размер до загрузки: около 2000 пикселей для баннеров во всю ширину (чтобы оставаться чёткими на экранах высокой плотности), 1200-1600 для изображений в тексте и 600-800 для карточек. Инструмент изменения размера обработает целую папку за раз.
2. Сжимайте
При правильных размерах остальное делает сжатие. Фото с качеством 80 на веб-странице выглядит так же, как со 100, и часто весит втрое меньше. Компрессор изображений обрабатывает пачки и показывает экономию по каждому файлу.
3. Используйте WebP
WebP поддерживают все современные браузеры, обычно он на 25-35 % легче JPG при том же видимом качестве, а поддержка прозрачности позволяет заменить им и многие PNG. Конвертируйте через JPG в WebP или PNG в WebP. AVIF ещё легче, но медленнее кодируется и хуже поддерживается системами загрузки, поэтому практичный выбор по умолчанию это WebP.
4. Выбирайте формат под содержимое
| Содержимое | Лучший формат |
|---|---|
| Фотографии | WebP, или JPG там, где WebP не принимают |
| Логотипы и иконки | SVG, если есть, иначе PNG или WebP |
| Скриншоты с текстом | PNG или WebP без потерь |
| Простая анимация | Короткое видео вместо GIF |
5. Помогите браузеру загружать их разумно
- Ленивая загрузка. Изображения ниже первого экрана должны грузиться, только когда посетитель до них доскроллит. Большинство платформ делают это сами; в чистом HTML добавьте loading="lazy" к тегам img, которые не видны сразу.
- Размеры. Задавайте каждому изображению ширину и высоту, чтобы страница не прыгала по мере появления картинок. Сдвиг макета это одна из метрик Core Web Vitals от Google.
- Главное изображение первым. Большое изображение вверху страницы, обычно то, что считается Largest Contentful Paint, никогда не должно грузиться лениво. Оно должно загружаться как можно раньше.
Какая разница на практике
Типичная страница с десятью фото прямо с телефона может весить 30 МБ. После изменения размеров до разумной ширины и сжатия та же страница обычно весит около 2 МБ. После перевода в WebP ближе к 1,4 МБ. На мобильном соединении это разница между страницей, которая появляется за секунду, и страницей, которую многие посетители бросают.
Проверка результата
PageSpeed Insights от Google и панель Lighthouse в инструментах разработчика Chrome показывают слишком большие изображения, изображения, которые стоит перевести в WebP, и элемент Largest Contentful Paint. Запустите их до и после и начинайте со страниц с наибольшим трафиком.