Почему вес картинок так важен
Изображения занимают большую часть веса страницы. Когда на экране телефона человек ждёт, пока загрузится главная фотография, он видит пустой экран, а в мобильном интернете с нестабильной связью — особенно долго. Поисковики учитывают скорость, а посетители уходят, не дождавшись.
Снимок с современного телефона содержит тысячи пикселей по каждой стороне, а на экране показывается шириной около 400–1200. Остальное — лишний вес, за который платит ваш посетитель и ваш трафик.
Форматы изображений
- WebP
- Современный формат с хорошим сжатием, поддерживается всеми актуальными браузерами. Основной выбор для фото и графики.
- AVIF
- Ещё меньший вес при том же качестве, но кодирование дольше. Подходит для крупных изображений при поддержке сборкой.
- JPEG
- Универсальный вариант для фото, если нужна совместимость со старыми системами.
- PNG
- Нужен только для изображений с прозрачностью и резкими краями. Для фото тяжёлый.
- SVG
- Векторный формат для логотипов и иконок: весит мало и не теряет резкость.
Что сделать с каждой картинкой
Подобрать размер
Загружайте картинку не шире, чем она показывается, с запасом в два раза для экранов с высокой плотностью.
Сжать
Сервисы и инструменты сборки уменьшают вес в несколько раз почти без заметной потери качества.
Выбрать формат
WebP как основной, SVG для логотипа и иконок.
Указать размеры в коде
Ширина и высота предотвращают прыжки страницы при загрузке.
Включить ленивую загрузку
Картинки ниже первого экрана подгружаются, когда посетитель до них доскролит.
Частые ошибки
- Главное фото на первом экране загружается лениво, хотя должно появиться сразу
- Один и тот же большой файл используется как маленькая миниатюра
- Видео-фон заменяет фото без необходимости, а весит как десятки картинок
- У картинок нет описания alt — это вредит доступности и поиску по изображениям
- Тексты зашиты в картинки, и поисковик их не читает
- Карусель на десять слайдов загружает все изображения сразу