Как сжимать изображения без потери качества
Практический гайд по уменьшению файлов PNG и JPG для веба: где ползунок качества действительно важен, а где он бесполезен.
Тяжёлые изображения - самая частая причина, по которой страница кажется медленной. Хорошая новость в том, что большую часть этого веса можно убрать без заметных потерь, если понимать, на что реагирует каждый формат.
Потери и без потерь - это разные рычаги
JPG работает с потерями. Он отбрасывает детали, которые глаз почти не замечает, а ползунок качества решает, насколько агрессивен этот обмен. Снижение с максимума примерно до семидесяти пяти процентов часто уменьшает файл вдвое, при этом на обычном расстоянии просмотра он выглядит так же.
PNG в классическом смысле без потерь, поэтому сам по себе ползунок качества ничего не даёт. Чтобы уменьшить PNG, сокращают число хранимых цветов. Фото с миллионами цветов почти не сожмётся, а логотип или скриншот с ограниченной палитрой может похудеть очень сильно.
Рабочий процесс, который не подводит
По возможности начинайте с оригинала. Каждое сохранение с потерями накладывает новые артефакты поверх старых, поэтому сжатие уже сжатого JPG - верный путь к мутной картинке.
Выбирайте формат под содержимое. Фотографии идут в JPG или WebP, а плоская графика с чёткими краями остаётся PNG или переходит в SVG. Затем сожмите один раз, проверьте превью и оставьте самую лёгкую версию, которая всё ещё выглядит чисто на экране.
Ориентиры по размеру
Для большинства веб-изображений старайтесь держать каждое под двести килобайт. Большие баннеры могут быть тяжелее, но всё, что стоит в списке или сетке, должно быть лёгким, ведь такие файлы быстро складываются.
Наш компрессор PNG уменьшает число цветов с помощью контроля качества, а компрессор JPG даёт ползунок потерь напрямую. Оба работают в браузере, поэтому экспериментировать можно свободно и ничего не загружая.
О чём часто забывают
Сжатие - улица с односторонним движением. Удалённые детали не вернутся, поэтому всегда храните оригиналы в надёжном месте. Считайте сжатые файлы расходным результатом, который можно пересоздать, как только изменятся требования.