Як стиснути зображення без втрати якості
Практичний посібник зі зменшення розміру зображень із збереженням чіткості: що означає якість, правильні налаштування, зміна розміру, формати й помилки.
«Стиснути зображення без втрати якості» — одна з найпопулярніших пошукових фраз у мережі й водночас одна з найбільш неправильно зрозумілих. Чесна відповідь полягає в тому, що ідеальне стиснення без жодних змін можливе лише у вузьких випадках. Але практична відповідь набагато обнадійливіша: за правильного підходу ви зазвичай можете зменшити зображення до третини чи навіть десятої частини його розміру, і результат виглядатиме ідентичним для людського ока. Цей посібник пояснює, як це зробити і що насправді означає «без втрати якості».
Що насправді означає «без втрати якості»
За словом якістьховаються дві різні ідеї, і саме плутанина між ними — те, на чому помиляється більшість людей:
- Математична точність— чи зберігається кожен піксель біт у біт. Це гарантує лише стиснення без втрат.
- Перцептивна якість — чи можете ви помітити різницю, дивлячись на зображення у звичайних умовах. Саме це насправді важливо для фотографій на сайті, у документі чи прикріплених до листа.
Формати зі втратами, як-от JPEG і WebP, відкидають дані, які людська зорова система погано помічає — тонкі варіації кольору та ледь помітні деталі. Зроблено правильно, це викидає байти, яких ви все одно ніколи б не побачили. Тож реалістична мета — не нуль змін, а нуль видимих змін. Якщо вам справді потрібен кожен піксель недоторканим, перейдіть до розділу про стиснення без втрат нижче.
Оберіть розумний рівень якості (70–85)
Майже кожен компресор зображень має повзунок якості, зазвичай від 0 до 100. Люди припускають, що чим вище, тим краще, але крива має різко спадну віддачу. Перехід від якості 100 до 90 часто прибирає 40–60% розміру файлу без жодної помітної різниці, тоді як перехід від 60 до 50 економить зовсім небагато й починає вносити видимі блокові артефакти.
Для більшості фотографій оптимальна точка — якість від 70 до 85. У цьому діапазоні ви зберігаєте чистими тони шкіри, градієнти та краї, водночас скидаючи майже всю вагу. Корисний робочий процес — почати приблизно з 80, подивитися на результат у повному розмірі й знижувати лише тоді, коли файл усе ще має бути меншим. Оскільки такі інструменти, як наш компресор JPEG та компресор WebP, працюють повністю у вашому браузері, ви можете повторно експортувати з кількома налаштуваннями й миттєво порівнювати, нічого не завантажуючи.
Змініть розміри — найбільший важіль
Ось найбільш недооцінений прийом: більшість зображень набагато більші, ніж їх будь-коли відображатимуть. Сучасний телефон робить фотографії завширшки 4000 пікселів або більше, але допис у блозі показує їх, можливо, у 1200 пікселів, а підпис у листі чи мініатюра потребують лише кількох сотень. Зберігання всіх цих зайвих пікселів — чисте марнотратство.
Оскільки розмір файлу масштабується разом із площеюзображення, зменшення вдвічі ширини та висоти скорочує кількість пікселів до чверті. Зміна розміру фотографії з 4000 пікселів до 1600 пікселів для вебу може зменшити файл більше, ніж будь-яке налаштування якості — і оскільки ви видаляєте пікселі, яких ніколи не побачили б на екрані, видима якість у розмірі відображення залишається незмінною. Установіть найдовшу сторону відповідно до того, що насправді потрібно сторінці, за допомогою інструмента зміни розміру зображень до того, як торкнетеся повзунка якості, або замість цього.
Оберіть правильний формат для вмісту
Обраний формат повністю змінює математику. Правильний вибір залежить від того, чим зображення є:
- Фотографії та реалістичні зображення: використовуйте JPEG або, ще краще, WebP, який зазвичай дає файли на 25–35% менші за JPEG за тієї самої видимої якості.
- Логотипи, іконки, скріншоти, штрихова графіка та все з текстом чи чіткими краями: використовуйте PNG. Формати зі втратами розмазують чіткі краї в розмиті ореоли; PNG без втрат залишає їх гострими як лезо.
- Зображення, яким потрібна прозорість: PNG або WebP, оскільки JPEG не може зберігати альфа-канал.
WebP тепер підтримується кожним сучасним браузером, тож для вебу це безпечний і високоефективний варіант за замовчуванням. Посібник web.dev із подачі зображень WebP — гарне джерело, якщо ви хочете заглибитися в компроміси.
Коли вам справді потрібне стиснення без втрат
Іноді вам справді потрібно зберегти кожен піксель — майстер-архів, діаграма з дрібним текстом або ресурс, який ви продовжуватимете редагувати. У такому разі використовуйте стиснення без втрат, яке зменшує файл суто за рахунок ефективнішого кодування, без жодних змін у самому зображенні.
Конкретно для PNG значна частина розміру файлу походить від того, як кодувальник вирішив упакувати дані, а не від самого зображення. Оптимізатори без втрат (популярний рушій OxiPNG — хороший приклад) перепаковують стиснений потік PNG і прибирають надлишкові метадані, часто заощаджуючи 10–30% із гарантовано ідентичними пікселями. Це найближче до справжнього безкоштовного сиру у стисненні зображень: менший файл, те саме зображення байт у байт.
Уникайте повторного стиснення — завжди починайте з оригіналу
Найшвидший спосіб зіпсувати зображення — стиснути те, що вже було стиснене. Формати зі втратами втрачають трохи деталей щоразу, коли їх пересохраняють, і ця шкода є накопичувальною та незворотною— JPEG, збережений, відкритий і пересохранений кілька разів, накопичує видимі артефакти навіть за високих налаштувань якості. Це інколи називають поколіннєвою втратою.
Цьому запобігають дві звички. По-перше, завжди стискайте зі свого оригіналу найвищої якості— файлу з камери чи експорту прямо з вашого редактора — а не з копії, яка вже пройшла через віджимання. По-друге, зберігайте цей бездоганний майстер, щоб ніколи не доводилося повторно отримувати стиснене зображення з іншого стисненого зображення. Стисніть один раз, до формату й розміру, які потрібні для завдання, і збережете ту якість, з якої почали.
Збираємо все докупи
Щоб зменшити зображення, зберігши його чудовий вигляд: змініть його розмір до тих розмірів, які ви насправді відображаєте, оберіть правильний формат для вмісту, експортуйте з якістю 70–85 (або без втрат, коли точність є неперемовною) і завжди працюйте з оригіналом. Кожен крок примножується, і разом вони зазвичай дають вражаючу економію без видимих втрат.
Усі інструменти FileShrinking працюють на 100% у вашому браузері — ваші файли ніколи нікуди не завантажуються — тож ви можете експериментувати без жодного ризику. Перетягніть фото в компресор зображень, спробуйте кілька рівнів якості й порівняйте результати самостійно.