Повзунок якості JPEG — це не відсотки! У чому насправді різниця між 80 і 100

Коли експортуєш зображення, той повзунок якості JPEG — ти його весь час сприймав як відсотки? Тягнеш до 80 і думаєш: «зберіг вісімдесят відсотків якості»; ставиш 100 і вважаєш: «тепер нічого не втрачено».

Це розуміння треба повністю перевернути: число на повзунку не має жодного відношення до «відсотка якості», і якість 100 теж не є безвтратною. Спершу практичні висновки: якщо хочеш зберегти фото надійно, став 85–92; для вебу й соцмереж достатньо 75–82; 100 не варто ставити за замовчуванням, воно лише подвоїть або навіть потроїть розмір файлу, а якості не додасть анітрохи. Далі поясню простими словами, як розібрати цей повзунок.

Одним реченням: повзунок якості JPEG керує не тим, «скільки якості зберегти», а тим, наскільки жорсткі ті дільники в таблиці квантування — чим більший дільник, тим жорсткіше округлення, тим більше втрат. Він не має лінійного зв’язку ні з якістю, ні з розміром: зміна від 100 до 90 не дорівнює зміні від 20 до 10.

Що насправді робить повзунок якості JPEG

Спочатку приймімо передумову: JPEG — формат із втратами, з моменту натискання «Зберегти» він уже втрачає дані, а повзунок визначає лише «наскільки жорстоко втрачати», а не «втрачати чи ні». У нього є фіксований конвеєр втрат, і повзунок — це останній засув на цій лінії.

Під час збереження зображення спершу перетворюється з RGB у YCbCr, розділяючи яскравість і колір на два канали. Це робиться тому, що людське око значно краще бачить яскравість, ніж колір; спочатку розділити, а потім легше зберегти саме яскравість.

Далі все зображення нарізається на блоки 8×8 пікселів, і кожен блок проходить дискретне косинусне перетворення (DCT), яке перетворює колір пікселів у набір частотних значень. Можна порівняти це з розкладанням акорду на окремі ноти: низькі частоти — це основа й градієнти зображення, високі — різкі краї та дрібні текстури. Повний опис цього процесу добре викладено в статті про JPEG у Вікіпедії.

Справжній убивчий крок — останній: кожне частотне значення ділиться на число з таблиці квантування (Quantization Table), а потім округлюється до цілого. Округлення — це місце, де інформація остаточно гине: залишок, який не ділиться націло, просто відкидається й більше не повертається. Повзунок якості керує саме тим, наскільки жорстокі ці дільники: вище значення повзунка — менші дільники, округлення майже не шкодить даним; нижче значення — більші дільники, округлення просто стирає деталі. А дільники для високочастотних компонентів зростають швидше, тому щоразу першими жертвують краями й дрібними текстурами.

Ось чому він не може бути відсотком. Від 100 до 90 і від 20 до 10 зміна дільників — це абсолютно різні речі, і падіння якості та розміру теж абсолютно різне: біля 90 один крок ти можеш і не відчути; біля 20 один крок — і зображення зруйноване. Сприймати його як відсоток — найпоширеніше й найдорожче непорозуміння щодо цього елемента керування.

Чому якість 100 не є безвтратною

Спочатку відповідь: 100 не дотягує до безвтратності через дві принципові вади — одна не залежить від повзунка, а другу не врятує навіть повзунок.

Перша — субдискретизація кольоровості (chroma subsampling). Після перетворення RGB у YCbCr, ще до початку власне стиснення, більшість кодувальників спочатку відкидають близько 75% деталей кольоровості, з тієї ж причини: людське око погано бачить колір, тож втрату не помітить. Цей крок взагалі не під контролем повзунка; навіть якщо поставити 100, він усе одно виконується.

Друга — сама математика не є чистою. Навіть якщо дільники в таблиці квантування зведені до мінімуму, «пікселі → частоти → пікселі» — це все одно подорож туди й назад із дрібними похибками округлення. Розпакований файл уже не містить тих самих пікселів, які були в момент натискання «Зберегти».

Якщо справді потрібно не втратити жодного біта, обирай безвтратний шлях: PNG, TIFF або безвтратний режим WebP. Стиснення з втратами — це дорога в один бік; будь-який рівень JPEG такий самий, включно з тим «ідеальним» 100.

85–92 і 75–82: як вибрати

Численні практичні тести й порівняння на рівні пікселів зрештою зводяться до досить чіткого поділу: два діапазони покривають майже всі сценарії.

85–92 — режим збереження. Портфоліо, знімки для клієнтів, ті оригінали, які не хочеться чіпати, — сюди. Файл, збережений із якістю 90, становить приблизно 1/8–1/12 від нестисненого, а різниця невидима оком — потрібно збільшити до 400% і вдивлятися в окрему ділянку, щоб помітити зміни.

75–82 — веб-режим. Зображення для сайтів, завантаження в соцмережі — сюди. Файл ще на 40–60% менший, ніж у режимі збереження, а ціна — переважно легке розм’якшення в складних текстурах, яке за звичайного перегляду майже непомітне.

Якщо ти читав попередню статтю «З втратами та без втрат», то наведений там оптимальний діапазон 80–85 не суперечить цим двом: 80 приблизно входить у веб-режим, а 85 якраз переходить у режим збереження; зображення, уже збережені з 80–85, не потрібно перетискати повторно.

Три режими можна звести до одного речення: те, що треба зберегти, став 85–92; те, що публікуєш, став 75–82; нижче 60 — мінне поле, обходь.

Порівняння одного й того самого фрагмента фото, експортованого в JPEG з якістю 90, 75 і 35. За 90 і 75 різниці не видно, за 35 зображення помітно розмите й блочне
Той самий фрагмент, три реальні експорти. Якість 90 — 102 КБ, якість 75 — 62 КБ. Без видимої різниці файл приблизно на 40% менший. У зоні обвалу якість 35 ще на 28 КБ менша, але зображення стає розмитим і блочним.

Експорт за замовчуванням на 100 — це тривога, а не стратегія. Файл із якістю 85 на 60–75% менший за файл із якістю 100, але за якістю різниці не видно; для вебу це просто марне подовження часу завантаження — цей розрахунок для сайтів я детально описав у статті про прискорення веб-зображень.

Чому нижче якості 60 усе руйнується

Коли повзунок опускається нижче 60, падіння якості — це не схил, а обрив.

Причина знову в округленні. Коли значення надто низьке, дільники високочастотних компонентів стають абсурдно великими, і після ділення й округлення частотне значення просто стає нулем — ця деталь ніби не збережена. Тоді цілі класи візуальної інформації зникають масово: волосся, переплетення тканин, кінчики штрихів шрифтів із засічками — саме вони зникають першими.

Те, що залишається, — це стандартні артефакти JPEG: блоки 8×8, смуги в градієнтах, бахрома біля різких країв і комариний шум (mosquito noise). Великі форми ще є, але це вже не «зображення для людей». Про кожен різновид артефактів я писав окрему статтю з ілюстраціями.

Збільшене порівняння фрагментів JPEG якості 90 і 30. На боці низької якості розмиті промені світла, цегляна стіна, що розпадається на блоки, плямисте небо
Що відбувається нижче 60. Обидва рядки — те саме місце з триразовим збільшенням. Ліворуч якість 90, праворуч якість 30. Верхній рядок: промені світла й цегляна стіна — тонкі лінії зникають першими, шви розпадаються на блоки. Нижній рядок: небо й край стіни — на гладкому градієнті з’являється плямистість, краї розмиваються.

Тому мій висновок: 60 — це практична нижня межа для звичайних зображень. Економія в кілька KB нижче цієї межі дає результат, що виглядає фальшиво з першого погляду, і не варта того.

Те саме значення якості 90 у різних програмах дає різні результати

«Якість 90» — це не універсальна валюта. Специфікація JPEG дає набір рекомендованих таблиць квантування (Annex K), але яку саме таблицю використовує кожна програма й як її масштабує — це визначає кожен розробник сам. Навіть за однакової «високої якості» чотири поширені інструменти дають зовсім різні числа: у Photoshop шкала 0–12, і його 10 приблизно відповідає 90 у референсній реалізації libjpeg; GIMP і ImageMagick мають шкалу 1–100, причому GIMP у режимі «висока якість» бере 85, а ImageMagick — 92; libjpeg як референсна реалізація використовує власне еталонне значення 90.

Якщо в двох інструментах встановити «якість 85», експортовані файли все одно не будуть однаковими. Тому не запам’ятовуй одне число в одній програмі й не переноси його на іншу. Для порівняння між програмами й проєктами надійних способів лише два: дивитися на фактичний розмір вихідного файлу й на фактичний вигляд зображення.

Надійніша за око мірка: SSIM

Повзунок ненадійний, а око залежить від екрана й стану — чи можна все ж кількісно виміряти «невидимість різниці»? Так, значно надійніший підхід — узяти іншу мірку: індекс структурної схожості (SSIM, Structural Similarity Index Measure).

Він не порівнює пікселі по одному, а дивиться, наскільки змінилися структура, яскравість і контраст — це ближче до того, як людина оцінює зображення, ніж «порахувати, скільки пікселів відрізняється». Оцінка від 0 до 1, де 1 означає, що два зображення повністю однакові. Формула й передумови добре описані в статті про SSIM у Вікіпедії.

Для типових рівнів якості SSIM приблизно такий: файл із якістю 85 зазвичай отримує оцінку понад 0.97 і візуально не відрізняється від оригіналу; на 60 оцінка падає до 0.90–0.93, з’являється легке розм’якшення, помітне лише при збільшенні; на 40 залишається лише 0.82–0.87, артефакти вже видно неозброєним оком.

Ці числа значно чесніші за повзунок. Якщо хочеш визначати якість без здогадок, можна скористатися командою compare в ImageMagick, щоб безпосередньо обчислити SSIM двох зображень і знайти точку, де «розмір зменшено максимально, але не пробито поріг сприйняття 0.85». Про використання цієї мірки я написав окрему докладну статтю про SSIM.

Спробуйте самі: повзунок, SSIM та оптимальна якість

Невеликий інструмент нижче працює повністю в браузері, зображення нікуди не надсилаються. Виберіть зображення (або натисніть «Спробувати зразок») і рухайте повзунок, спостерігаючи розмір після стиснення та зміну SSIM. Можна також автоматично знайти налаштування з найменшим розміром за SSIM ≥ 0.85. Значення SSIM обчислюється в реальному часі для щойно стиснутого зображення. Це та сама мірка з попереднього розділу.

Оригінал
Після стиснення (поточна якість)
Різниця (відкинуті деталі)
Розмір: —
SSIM: —
—
Масштаб оригінал/після стиснення
Підсилення різниці Біле = відкинуті деталі. Що яскравіше, то більші втрати
Конвертер якості між програмами (одне й те саме число в різних програмах означає різне. Не переносіть напряму)

Примітка: вбудований у браузер кодувальник JPEG не розкриває параметри субдискретизації кольоровості й таблиці квантування. Цей інструмент показує реальний ефект повзунка й кількісно вимірює різницю через SSIM, а не дозволяє налаштовувати внутрішні параметри кодувальника. І це прямо підтверджує тезу статті: якість 100 не безвтратна, а одне й те саме число в різних програмах означає різне.

Часті запитання

Що краще ставити для JPEG — 80 чи 100?

У переважній більшості випадків достатньо близько 80; 100 не варто ставити за замовчуванням. Файл із якістю 85 на 60–75% менший за файл із якістю 100, але око не бачить жодної різниці; для фотографій, які треба зберегти надійно, став 85–92, для вебу й соцмереж достатньо 75–82, а нижче 60 з’являться помітні артефакти.

Чи є якість JPEG 100 безвтратною?

Ні. Навіть якщо викрутити на 100, JPEG зазвичай спочатку втрачає близько 75% деталей кольору через субдискретизацію кольоровості, а потім зазнає незворотних втрат через квантування й округлення. Для безвтратності використовуй PNG, TIFF або безвтратний WebP.

Чому у Photoshop не знайти якість 85?

Шкала якості JPEG у Photoshop — 0–12, а не 1–100; його 10 приблизно відповідає 90 у референсній реалізації libjpeg. Різні програми по-різному зіставляють одне й те саме число, тож між програмами не перенось числа наосліп — орієнтуйся на фактичний розмір вихідного файлу й вигляд зображення.

Як визначити, чи помітно погіршилася якість зображення після стиснення?

Найпряміший спосіб — збільшити й порівняти з оригіналом; для об’єктивного показника використовуй SSIM. JPEG із якістю 85 зазвичай має SSIM понад 0.97 і візуально не відрізняється від оригіналу; близько 40 оцінка падає до 0.82–0.87, і артефакти видно неозброєним оком. Команда compare в ImageMagick дає змогу обчислити цю оцінку безпосередньо.

Насамкінець

Число на повзунку — це параметр ділення, а не відсоток якості; 100 — не безвтратність, а нижче 60 — обрив. Якщо потрібна одна формула: фотографії зберігай на 85, для вебу став 80, а 100 не потрібне ніде — файл подвоюється, а якість не зростає ані на крихту.

Якщо хочеш пройти шлях від вибору формату й зміни розмірів до налаштування якості та прискорення вебу, дивись «Повний посібник зі стиснення зображень» — увесь ланцюжок описано саме там.