Щоразу, зберігаючи зображення, ви ухвалюєте маленьке рішення: який формат? Оберете не той — і отримаєте розмитий логотип, скриншот на 15 МБ або файл, який сайт відмовляється приймати. Ось чим відрізняються чотири щоденні формати й коли який використовувати.
Коротка відповідь
- Фото, щоб надіслати, відправити поштою чи надрукувати: JPG.
- Скриншоти, логотипи, усе з текстом або прозорістю: PNG.
- Зображення на власному сайті: WebP, або AVIF, якщо потрібні найменші файли.
JPG: універсальний формат фото
JPG стискає з втратами, налаштованими під фотографії: відкидає деталі, які око майже не помічає, і тримає файли маленькими.
- Відкривається на кожному пристрої, у кожній програмі й формі.
- Якість регулюється: 80–90% — оптимум для фото.
- Без прозорості; на різких краях і дрібному тексті з’являються розмиті ореоли.
PNG: без втрат і з прозорістю
PNG зберігає кожен піксель точно й підтримує повний альфа-канал.
- Ідеальний для скриншотів, інтерфейсів, схем і логотипів.
- Фото в PNG часто у 5–10 разів більші, ніж у JPG.
- Якщо PNG-фото завелике для надсилання, конвертуйте PNG у JPG.
WebP: менші файли для вебу
WebP створив Google для сайтів. Він підтримує стиснення з втратами й без, прозорість і анімацію.
- Зазвичай на 25–35% менший за аналогічний JPG чи PNG.
- Підтримується всіма сучасними браузерами.
- Старі програми можуть його не відкрити — допоможе WebP у PNG.
AVIF: найновіший і найефективніший
AVIF побудований на відеокодеку AV1 і часто обганяє WebP за розміром файлу за тієї самої якості.
- Чудовий для максимально оптимізованих сайтів.
- Кодування повільніше, а поза браузерами підтримка досі обмежена.
- Потрібен файл, що відкривається будь-де? Скористайтеся AVIF у JPG.
Порівняння
| JPG | PNG | WebP | AVIF | |
|---|---|---|---|---|
| Стиснення | З втратами | Без втрат | Обидва | Обидва |
| Прозорість | Ні | Так | Так | Так |
| Анімація | Ні | Лише APNG | Так | Так |
| Розмір для фото | Малий | Великий | Менший | Найменший |
| Працює всюди | Так | Так | Майже | Лише браузери |
Просте правило
Поставте два запитання. Чи потрібна зображенню прозорість або чіткий текст? Обирайте PNG. Воно піде на ваш сайт? Обирайте WebP або AVIF. Для всього іншого JPG досі найнадійніший вибір.