«Без втрати якості» зазвичай означає одне на практиці: зменшити файл настільки, щоб ніхто не міг сказати, що ви це зробили. Справжнє математичне стиснення без втрат існує, але воно ледь чіпає більшість фото. Економія, яку люди насправді хочуть, походить від візуально без втрат стиснення — викидання даних, які ваші очі все одно ніколи не помітили б.
Ось як зробити це надійно і як перевірити, що ви зробили правильно.
Одне число, що вирішує все
Для JPG і WebP уся гра — це повзунок якості. Задайте його надто високо — і файл лишається роздутим. Задайте надто низько — і отримаєте блочне небо й розмазаний текст. Золота середина для фотографій зазвичай — якість 75–85. У цьому діапазоні типовий JPEG падає на 40–70% у розмірі, виглядаючи ідентично на звичайній відстані перегляду.
Чому це працює? Фото повні градієнтів і шуму, що добре стискаються, а малі зсуви кольору в насиченому зображенні невидимі. Плаский логотип із різкими краями — протилежне — це робота для PNG, до якого ми дійдемо.
Починайте високо, потім спускайтеся, доки щойно не почнете бачити артефакти, потім підніміться на одну позначку назад. Це ваша точка візуально без втрат.
PNG — інший звір
У PNG немає повзунка якості, бо він уже без втрат. Щоб зробити PNG меншим, ви зменшуєте, скільки окремих кольорів він зберігає. Більшість PNG — скріншоти, іконки, ілюстрації — використовують набагато менше кольорів, ніж 16 мільйонів, які їм дозволено. Квантування до палітри з 256 кольорів часто ріже файл на 60–80% без видимих змін, бо оригінал усе одно ніколи не потребував усіх тих кольорів.
Це той самий трюк, який використовують відомі інструменти у стилі «tinify». Стискач зображень від IMG.DIY застосовує квантування до 256 кольорів для PNG автоматично, тож ви отримуєте велику економію без полювання за налаштуваннями. Якщо ваш PNG — це фотографія, збережена в неправильному форматі, спершу конвертуйте її в JPG чи WebP — це набагато більший виграш, ніж будь-яка оптимізація PNG.
Обмежте розміри теж
Фото 6000 пікселів завширшки, показане в колонці 1200 пікселів, несе вп'ятеро більше даних, ніж екран може показати. Перш ніж навіть торкатися стиснення, спитайте, чи зображення більше, ніж має бути. У стискача є опційне обмеження ширини — задайте його на найбільший розмір, у якому зображення справді з'явиться, і ви примножите економію.
Порядок операцій, що працює добре:
- Змініть розмір до реальної ширини показу (чи задайте обмеження ширини).
- Стисніть на якості 75–85 для фото чи дайте квантуванню впоратися з PNG.
- Порівняйте з оригіналом і огляньте оком кроп у повній роздільній.
Як перевірити, що ви нічого не втратили
Відкрийте стиснутий файл на масштабі 100% і подивіться на частини, що мають значення: обличчя, краї тексту, гладкі градієнти на кшталт неба. Якщо вони виживають, решта теж. Страхова сітка, про яку варто знати: хороший стискач ніколи не віддасть вам файл більший за оригінал — якщо стиснення не допомогло б, воно тримає те, з чим ви почали. IMG.DIY працює так, тож можна опрацювати цілу теку пакетом і довіряти, що нічого не стане гіршим.
Робіть це локально, тримайте приватно
Ще одне, що має значення, якщо зображення не ваші, щоб їх зливати: кожен крок вище працює повністю у вашому браузері. Нічого не завантажується. IMG.DIY використовує Canvas і WebAssembly, щоб обробляти файли на вашій власній машині, а після першого відвідування інструмент кешується, тож працює офлайн. Можна стиснути пакет фото клієнта в літаку без сигналу.
Киньте файли, оберіть якість і завантажте ZIP результатів:
Коротка версія: використовуйте повзунок якості для фото, квантування для PNG, обмежуйте завеликі розміри й перевіряйте кроп на 100%. Це стиснення, якого ніхто не побачить.