Как сжать изображения для сайта

Одна неоптимизированная фотография может весить больше, чем вся остальная страница вместе взятая. Привести в порядок изображения — самый дешёвый способ ускорить сайт, и это напрямую влияет на Largest Contentful Paint — один из показателей Core Web Vitals, по которым Google ранжирует сайты.

1. Уменьшайте до реального размера показа

Главному изображению шириной 1200 px не нужны все 4000 px. Откройте Изменить размер изображения, задайте ширину (1600 px — безопасный максимум для полноэкранных изображений на retina-экранах, 800 px — для изображений в тексте) и обработайте всю папку сразу.

2. Выберите правильный формат

• Фото → WebP (или JPG, если нужно поддерживать очень старые браузеры). WebP на 25–35% легче JPG того же качества, и его открывает любой современный браузер.
• Логотипы, иконки, скриншоты с плоскими цветами → PNG, а затем квантуйте палитру. Хранить фото в PNG — ошибка: файл будет в пять-десять раз тяжелее без всякой пользы.
• Иконки и простые иллюстрации → SVG, если есть вектор.

3. Сжимайте

• JPG в WebP на 80–85% для фотографий.
• Сжать PNG — квантование палитры, тот же приём, что и в pngquant, уменьшает плоскую графику на 50–70% без видимой потери качества и сохраняет прозрачность.
• Сжать JPG на 75–80%, если остаётесь на JPG.

4. Отдавайте правильно

Добавьте атрибуты width и height к каждому <img>, чтобы браузер заранее резервировал место (без сдвига вёрстки), включите ленивую загрузку для изображений ниже экрана через loading="lazy" и используйте srcset, если хотите пойти дальше. Шаги сжатия выше — то, что чаще всего пропускают, а они важнее всего.