Как сжать фото для сайта
Обновлено
Тяжёлые изображения — самая частая причина, по которой страницы кажутся медленными. Вот как сделать их лёгкими, не ухудшив вид.
Почему вес картинок важен
На большинстве сайтов именно изображения — самое тяжёлое, что грузит браузер, часто больше, чем код и шрифты вместе взятые. Каждые лишние сто килобайт отодвигают момент, когда страница становится готовой к работе, а эту задержку Google измеряет как Largest Contentful Paint — один из Core Web Vitals, влияющих на ранжирование.
Лёгкие картинки — это ещё и меньше отказов на мобильных, где связь медленнее, а трафик стоит денег. Сжатие изображений — обычно самый сильный по эффекту и самый простой шаг для ускорения сайта.
Насколько сжимать
Цель — самый маленький файл, который всё ещё выглядит идентично на глаз, а не минимально возможный размер. Агрессивное сжатие с видимым замыливанием или бандингом вредит доверию и конверсии сильнее, чем чуть больший файл.
Compresso делает это сам: сжимает, затем сравнивает результат с оригиналом попиксельно и оставляет меньший вариант, только если разница незаметна. Типичная экономия — 50–80% для PNG и около 70% для JPEG без видимых изменений.
Какой формат выбрать
JPEG — для фотографий, PNG — для логотипов, иконок и всего с прозрачностью, WebP — когда нужен лучший баланс размера и качества для современного веба. WebP поддерживают все актуальные браузеры, и он обычно на 25–35% легче аналогичного JPEG.
Если сомневаетесь — сначала сожмите в исходном формате. Конвертация в WebP — это отдельная оптимизация, которую можно добавить позже, когда база уже сделана.
Быстрый рабочий процесс
Перетащите все картинки страницы в компрессор разом, дайте обработать и скачайте всё одним ZIP. Замените оригиналы в проекте, закоммитьте и передеплойте. Для обычной страницы это пара минут, а вес изображений нередко падает больше чем вдвое.
Повторяйте это при добавлении новых картинок. Привычка сжимать до коммита держит сайт быстрым по мере роста, не давая весу незаметно вернуться за месяцы.