Как сжать изображения для сайта без потери качества
Картинки — обычно самая тяжёлая часть страницы: они занимают больше всего веса и сильнее всего тормозят загрузку. А скорость влияет и на позиции (Core Web Vitals), и на поведение посетителей. Хорошая новость: вес фото можно сократить в разы почти без потери качества. Разберём как.
Почему это важно
Непережатая фотография с телефона может весить 3–8 МБ. Десяток таких на странице — и она грузится секундами, особенно на мобильном интернете. Это бьёт по метрике LCP из Core Web Vitals, повышает отказы и косвенно тянет позиции вниз. Оптимизированные изображения часто весят в 5–10 раз меньше при том же визуальном качестве.
Шаг 1: выберите правильный формат
Половина успеха — формат. Современные WebP и AVIF сжимают заметно сильнее старых JPEG и PNG:
| Формат | Для чего | Вес |
|---|---|---|
| JPEG | Фотографии (без прозрачности) | Средний |
| PNG | Логотипы, скриншоты, прозрачность | Большой |
| WebP | Замена JPEG и PNG — фото и графика | −25–35% |
| AVIF | Самое сильное сжатие фото | −50% |
| SVG | Иконки, логотипы (векторные) | Минимальный |
Правило: фотографии — в WebP/AVIF (запасной вариант JPEG), иконки и логотипы — в SVG. PNG оставляйте только там, где нужна прозрачность и нет WebP.
Шаг 2: сожмите и уменьшите
Шаг 3: правильно подключите на странице
- loading="lazy" — откладывает загрузку картинок вне экрана, страница показывается быстрее (улучшает LCP).
- width и height — задавайте у каждого изображения: браузер резервирует место, и вёрстка не «прыгает» (метрика CLS).
- alt — описание для поиска по картинкам и доступности.
- <picture> с источниками WebP/AVIF и запасным JPEG — современные браузеры берут лёгкий формат, старые — обычный.
Коротко
Изображения — самый тяжёлый элемент страницы, и их вес легко сократить в разы. Выбирайте формат (фото → WebP/AVIF, иконки → SVG), уменьшайте до реального размера отображения, сжимайте до качества 75–85% и убирайте EXIF. На странице добавляйте loading="lazy", width/height и alt, отдавайте современные форматы через <picture>. Это ускоряет сайт, улучшает Core Web Vitals и поведенческие факторы.