Сначала формат, потом качество
Основная экономия приходит от формата, а не от ползунка:
| Содержимое | Лучший формат | Почему | | --- | --- | --- | | Фотографии | WebP или AVIF | На 25–50% меньше JPEG при том же качестве | | Скриншоты, логотипы, плоский цвет | PNG или WebP | Резкие края сохраняются, JPEG их размазывает | | Всё, где нужна прозрачность | WebP, PNG или AVIF | У JPEG нет альфа-канала | | Максимальная совместимость | JPEG | Открывается везде, включая софт двадцатилетней давности |
Перевод фотографии из JPEG в WebP при том же визуальном качестве обычно экономит больше, чем снижение качества JPEG с 90 до 70, — и выглядит при этом лучше.
Что означает число качества
Это не процент от чего-либо. Оно управляет тем, насколько агрессивно кодировщик отбрасывает детали, которые глаз заметит в последнюю очередь, и шкала нелинейна: шаг с 95 до 85 визуально почти ничего не стоит и много экономит, а с 60 до 50 — там, где начинают проступать артефакты на краях и в плавных градиентах.
Прозрачность и JPEG
У JPEG нет альфа-канала. При конвертации прозрачного PNG в JPEG под изображение нужно что-то подложить, и этот инструмент подкладывает белый — как обычно и ожидают. Если картинка лежит на тёмном фоне, белая кайма появляется именно поэтому. Используйте WebP.
Метаданные исчезают
Повторное кодирование создаёт новый файл из декодированных пикселей, и EXIF уходит вместе с ним: камера, объектив, время съёмки и координаты GPS. Для всего, что вы публикуете, это плюс — отпускные фотографии регулярно несут в себе координаты дома, в котором сняты. Если метаданные нужно сохранить, берите инструмент, работающий с файлом, а не с пикселями.
Вопросы
Мои изображения куда-то загружаются?+
Нет. И декодирование, и повторное кодирование происходят в этой вкладке через canvas API браузера. Можно открыть панель сети и убедиться: пока вы работаете, ничего не отправляется. Это и есть причина пользоваться локальным сжатием для всего, где есть лицо, документ или скриншот внутренней системы.
Какое качество выбрать?+
75 — разумное значение по умолчанию для фотографий, на нём же стоят большинство CDN. Поднимайте до 85 для картинок с мелкими деталями или текстом и опускайте до 60 для крупных декоративных фонов, в которые никто не всматривается. Разница между 90 и 100 почти всегда незаметна и примерно удваивает вес файла.
Почему мой PNG стал больше?+
Потому что повторное кодирование через canvas хорошо работает с форматами с потерями, а PNG к ним не относится. PNG со скриншотом или логотипом уже сжат эффективно, и прогон через canvas это преимущество теряет. Для изображений с плоскими цветами конвертируйте в WebP — строка состояния сообщает, когда результат вырос, а не уменьшился.
Удаляются ли EXIF и геоданные?+
Да, как побочный эффект. Повторное кодирование создаёт новый файл из одних пикселей, поэтому модель камеры, даты и координаты GPS не сохраняются. Для публикации в вебе это обычно желательно, но знать об этом стоит, если данные были нужны.