Швидка відповідь: фото йдуть у JPEG, графіка з чіткими краями чи прозорістю йде в PNG. Якщо ви не запам'ятаєте більше нічого, це правило правильно вирішує 90% випадків. Решта цієї сторінки пояснює чому, щоб ви могли самі розсудити граничні випадки.
Одна відмінність, що має значення
JPEG і PNG були створені для різних видів зображень.
- JPEG — це формат із втратами, налаштований під фотографії. Він чудовий на плавних градієнтах — шкіра, небо, розфокусоване тло — і залюбки відкидає дрібні деталі, які ваше око ігнорує. Ось як він уміщує 12-мегапіксельне фото у 2 МБ.
- PNG — це формат без втрат, створений для плоского кольору, чітких ліній і тексту. Він також підтримує прозорість, чого JPEG не вміє зовсім. Логотип, іконка, скріншот інтерфейсу чи діаграма належать до PNG.
Використайте не той — і ви одразу відчуєте. Збережіть логотип як JPEG — і чіткі краї облямуються сірим «москітним шумом». Збережіть фото як PNG — і файл роздується вп'ятеро-вдесятеро без жодної видимої користі.
Швидкий посібник із рішення
Поставте два питання по порядку:
- Чи потрібна прозорість? Якщо так → PNG (або WebP). У JPEG прозорості немає, крапка.
- Це фотографія чи фотоподібне зображення з великою кількістю градієнтів? Якщо так → JPEG. Якщо це плоский колір, чіткий текст чи штрихова графіка → PNG.
Скріншоти — класична пастка. Скріншот веб-сторінки, насиченої фото, краще стискається як JPEG; скріншот коду, таблиці чи інтерфейсу лишається чітким і малим як PNG. Коли сумніваєтеся, спробуйте обидва й порівняйте — що приводить нас до інструментів.
Конвертація між ними
Якщо у вас не той формат, перемкнутися просто. Конвертер зображень від tools.faxianai.com переходить між PNG, JPG, WebP і AVIF прямо в браузері. (Зауваження: браузери не можуть кодувати AVIF через canvas, тож вивід AVIF відкочується до WebP — який майже такий само малий і повсюдно підтримується.) Ви можете конвертувати цілий пакет за раз.
Найпоширеніша перемога: дизайнер передав вам теку PNG-фотографій. Конвертуйте їх у JPG і дивіться, як тека зменшується на 80% чи більше без видимих втрат.
Стиснення кожного формату правильним способом
Вибір формату — лише половина роботи; ви все ще хочете, щоб файл був малим.
- Для JPEG (і WebP): використовуйте повзунок якості. Діапазон 75–85 візуально без втрат для більшості фото, водночас сильно зрізаючи розмір.
- Для PNG: повзунка якості немає, бо він без втрат. Натомість зменшуйте кількість кольорів. Більшість PNG використовують значно менше кольорів, ніж їм дозволено, тож квантування до палітри в 256 кольорів зазвичай економить 60–80% без видимих змін — і при цьому зберігає прозорість недоторканою.
Стиснення зображень від tools.faxianai.com застосовує правильний метод автоматично залежно від формату, який ви подаєте, і ніколи не виводить файл більший за оригінал. Обробіть пакетно змішану теку з JPG і PNG — і кожен отримає потрібне саме йому.
А як щодо WebP?
Варто згадати: WebP робить обидві роботи. Він стискає фото як JPEG і підтримує прозорість як PNG, зазвичай у менших розмірах, ніж будь-який із них. Якщо ваша аудиторія на сучасних браузерах (а це тепер майже всі), конвертація в WebP часто найкращий окремий хід. Тримайте запасний JPEG чи PNG лише якщо ви змушені підтримувати дуже старе програмне забезпечення.
Підсумок
Фото → JPEG. Логотипи, іконки, текст, прозорість → PNG. Потрібні і стиснення, і прозорість, або якомога менший файл → розгляньте WebP. Потім стисніть методом, доречним для формату. Кожен крок тут виконується повністю у вашому браузері — нічого не завантажується, а після першого візиту інструменти працюють офлайн.