Как уменьшить JPG до 100 КБ?
Измеренная лестница качества для одной фотографии размером 538,6 КБ, почему ползунок застревает на 131 КБ и почему обрезка пикселей — это рычаг, который действительно влияет на бюджет байтов.
· Updated
Форма загрузки говорит, что максимальный размер 100 КБ. Ваша фотография составляет 538,6 КБ. Рефлекс — схватить ползунок качества и перетащить его влево, и для большой фотографии этот рефлекс не сработает. Мы взяли один файл и протестировали всю лестницу: texture.jpg размером 3840x2160, 538,6 КБ на диске. Даже при качестве 30 он достигает 131 КБ, и к тому времени изображение становится заметно испорченным.
Число, которое на самом деле контролирует размер JPEG, — это количество пикселей. Baseline JPEG кодирует изображение в блоках 8x8, поэтому уменьшение обоих размеров вдвое оставляет четверть блоков для хранения. Если у вас есть только ползунок, вы застрянете примерно на 131 КБ для файла такого размера. Каждая цифра ниже получена из нашего собственного компрессора и ресайзера, работающего в вкладке браузера. Нет шага загрузки, на который нужно ждать.
Почему ползунок качества не позволяет мне достичь 100 КБ?
Вот лестница, один и тот же исходный файл каждый раз, запущенный в компрессоре изображений в ручном режиме. Умный режим выбирает собственный стандартный параметр каждого кодировщика, который составляет 80 для JPEG и WebP, 63 для AVIF и без потерь для PNG.
| Настройка | Выход | Изменение |
|---|---|---|
| Ползунок 90 | 347,8 КБ | -35% |
| Умный (ползунок 80) | 286,1 КБ | -47% |
| Ползунок 60 | 212,4 КБ | -61% |
| Ползунок 30 | 131 КБ | -76% |
Шестьдесят пунктов ползунка дали 216,8 КБ. Последний этап, от 60 до 30, отдал много видимых деталей за 81,4 КБ. Фотография размером 3840x2160 содержит 8,3 миллиона пикселей, и есть предел, сколько байтов может описать их при таком размере. Этот предел реальный.

Почему качество 30 на самом деле не 30?
Это сбивает людей с толку, и нам нужно это объяснить. Когда источник — это JPEG, наш компрессор считывает таблицы квантования из первых 64 КБ файла и оценивает качество, с которым он был сохранен. Ваш ползунок затем масштабирует эту оценку. Фотография, сохраненная при качестве 60, с ползунком на 80, кодируется на 48. Масштабирование предотвращает вторичный проход от получения качества, которое пиксели не могут обеспечить, потому что повторное кодирование файла качества 60 на 90 просто тратит байты на описание повреждений, которые уже встроены. Кодировщик внизу — это MozJPEG. Еще одна важная деталь: сжатие удаляет все метаданные, EXIF, GPS, ICC-профиль и встроенные миниатюры. Ориентация сохраняется.
Почему оценка рядом с ползунком не совпадает с результатом?
Потому что это кривая, а не кодирование. Панель выводит это число до того, как что-либо запустится, только из двух вещей: размера вашего файла и положения ползунка. Это оригинальные байты, умноженные на ползунок, деленный на 100, возведенные в степень 1,8. Она никогда не видит пиксель вашего изображения и не знает о масштабировании выше, поэтому в примере качества 60 она выводит цифру для 80, в то время как кодировщик собирается использовать 48.
На том же тестовом файле размером 538,6 КБ разрыв велик, и он меняет направление по всему диапазону. При ползунке 90 панель предсказала 445,5 КБ против фактических 347,8 КБ, 28% выше. При ползунке 30 она предсказала 61,7 КБ против фактических 131 КБ, 53% ниже. Прочитайте это второе еще раз, если вы нацелены на предел в 100 КБ: оценка говорит, что вы превысили его на 38 КБ в тот момент, когда кодировщик собирается не дотянуть до него на 31. КБ на карточке результата — это единственное число, на которое стоит ориентироваться. В режиме палитры PNG нет оценки вообще, и панель выводит предупреждение вместо этого.
Как мне на самом деле получить JPG меньше 100 КБ?
Сначала обрежьте пиксели, затем сожмите. Откройте ресайзер и используйте предустановки по процентам, которые составляют 25, 50 и 75. Пятьдесят процентов уменьшает 3840x2160 до 1920x1080, четверть пикселей. Двадцать пять процентов уменьшает его до 960x540, одну шестнадцатую. Также есть 15 социальных предустановок с фиксированными размерами, от квадратного изображения Instagram 1080x1080 до баннера YouTube 2560x1440, плюс режим точных пикселей с режимами cover, contain и stretch fit. Этот режим точных пикселей — это то, как квадрат паспорта 600 x 600 вводится без сжатия лица. Если вы нацелены на 100 КБ из 4K фотографии, начните с 25% и увеличивайте.
Есть две вещи о ресайзере, которые стоит знать сначала. Выход PNG остается без потерь, и каждый другой формат по умолчанию перекодируется с качеством 90, так что JPEG, который проходит через оба инструмента, кодируется дважды. Анимированные источники выходят как один неподвижный кадр. И когда выход компрессора будет больше, чем файл, который вы ему передали, он возвращает ваш оригинал без изменений.
Поможет ли WebP или AVIF быстрее достичь цели?
| Кодировщик | Ползунок 80 | Ползунок 63 |
|---|---|---|
| JPEG | 286,1 КБ | не измерялось |
| WebP | 290,3 КБ | 200,6 КБ |
| AVIF | 312,7 КБ | 186,9 КБ |
Прочитайте эту таблицу дважды. На одной и той же позиции ползунка 80 JPEG создал самый маленький файл, а AVIF — самый большой, что выглядит странно, пока вы не вспомните о масштабировании выше. 80 JPEG был масштабирован относительно собственной оценочной качества источника, поэтому это на самом деле не было 80, в то время как WebP и AVIF воспринимают число буквально. Уменьшите их до умного стандартного значения AVIF 63, и современные кодеки вырываются вперед: 200,6 КБ для WebP, 186,9 КБ для AVIF. Оба все еще далеко от 100 КБ при 3840x2160, что и является основной целью. AVIF также занимает около 10-11 секунд на кодирование на этой машине, в то время как JPEG и WebP возвращаются мгновенно, а поддержка браузеров еще молода. Наш путь JPG в WebP заблокирован на 4:2:0 хрома, так что жесткие красные края немного смягчаются.
Что если мой файл — это PNG с прозрачностью?
Совсем другой рычаг. Мы протестировали alpha.png, 900x606 и 942,4 КБ с реальным альфа-каналом, через оба режима PNG. Опция "Без сжатия" — это oxipng на уровне 3, полностью без потерь, и она вернула 383,9 КБ, сокращение на 59% с каждым пикселем нетронутым. Опция "Меньший размер файла" использует libimagequant, которая уменьшает изображение до палитры, и она вернула 98,3 КБ. Это 90% экономия, и это укладывается в бюджет 100 КБ, не затрагивая размеры. Палитры могут сглаживать плавные градиенты, поэтому проверьте небо или мягкую тень перед отправкой. Прозрачность сохраняется в обоих режимах. Запросите выход JPEG, и альфа-канал исчезнет, наложенный на белый.
Могу ли я обрезать, чтобы достичь 100 КБ?
Частично. Обрезка удаляет пиксели, поэтому она удаляет байты. Наш обрезчик принимает один файл за раз до 10 МБ и предлагает восемь предустановок соотношения сторон, плюс пользовательское соотношение Ш:В. Нет поля для ввода целевой ширины в пикселях, поэтому вы не можете нацелиться на точный размер выходного файла, и каждая обрезка формата с потерями перекодируется с жестко заданным качеством 92. GIF возвращается как однофреймовый PNG. Для достижения бюджета байтов предустановки процентов ресайзера дают вам более прямой контроль.
Загружает ли это мою фотографию?
Нет. Это приложение не имеет API-маршрутов и серверных действий, и единственные сетевые запросы, которые оно делает, — это запросы того же происхождения для своих собственных ресурсов и кодеков WASM. Ваш файл декодируется на холст и снова кодируется с помощью WASM в той же вкладке. Большинство других инструментов в этой категории работают наоборот: ваше изображение отправляется на их сервер и хранится в их хранилище, пока не сработает таймер удержания. Вот в чем разница, которую объясняет наша страница конфиденциальности. Это также причина, по которой пакет здесь ограничен 10 файлами и 50 МБ, поскольку ваша собственная ЦП выполняет работу. Это же ограничение объясняет, почему папка с 300 файлами не является задачей для браузера.