Кожен формат зображень — це набір компромісів між розміром файлу, якістю й можливостями на кшталт прозорості чи анімації. Оберіть не той — і отримаєте роздуті файли, розмитий текст чи графіку, яка не відображається. Ось кожен із поширених форматів простими словами, а після — таблиця, яку можна тримати під рукою.
Дві великі родини
Перед окремими форматами одна відмінність пояснює більшість із них:
- Растрові зображення — це сітки пікселів. Фото растрові. Наблизьте достатньо — і побачите квадратики. PNG, JPG, WebP, AVIF і GIF — усі растрові.
- Векторні зображення — це математика: лінії, криві й фігури, задані координатами. Вони масштабуються до будь-якого розміру без розмиття. SVG — векторний формат у вебі.
Інша ключова ідея — із втратами проти без втрат. Формати з втратами (JPG, зазвичай AVIF/WebP) відкидають частину деталей, щоб зменшити файл. Формати без втрат (PNG, GIF, WebP без втрат) зберігають кожен піксель точно.
Формати, один за одним
JPG (JPEG) — робоча конячка для фотографій. З втратами, малий і читається буквально всюди. Без прозорості, без анімації. Повторне пересохраняння повільно його погіршує. Використовуйте для фото й скрізь, де потрібна максимальна сумісність.
PNG — без втрат, підтримує прозорість. Правильний вибір для скріншотів, логотипів, іконок і діаграм — усього з текстом чи чіткими краями. Фото в PNG великі, тож не використовуйте його для них.
WebP — сучасний формат, що робить обидві роботи: режим із втратами перевершує JPG за розміром (~25–35% менше), режим без втрат підтримує прозорість і лишається компактним. Також обробляє анімацію. Тепер повсюдно підтримується в браузерах. Ідеальний для вебу; менше — для електронної пошти чи старого програмного забезпечення.
AVIF — найновіший і найкращий тут стискач, приблизно вдвічі менший за JPEG при схожій якості, з прозорістю та HDR. Браузери можуть добре його відображати, але не можуть надійно кодувати його з canvas — тож браузерні інструменти відкочуються до WebP, коли ви запитуєте AVIF. Справжнє кодування AVIF потребує сервера чи нативного застосунку.
GIF — старий, обмежений 256 кольорами, але класика для простої анімації. Для будь-чого понад короткий цикл WebP (чи відео) менший і чіткіший. Годиться для крихітних анімованих іконок; поганий для фото.
SVG — вектор, тож масштабується нескінченно без розмиття й лишається крихітним для простої графіки. Ідеальний для логотипів, іконок та ілюстрацій. Це код, а не пікселі, тож не може відтворити фотографію.
Порівняльна таблиця
| Формат | Тип | Стиснення | Прозорість | Анімація | Найкраще для |
|---|---|---|---|---|---|
| JPG | Растр | З втратами | Ні | Ні | Фото, макс. сумісність |
| PNG | Растр | Без втрат | Так | Ні | Скріншоти, логотипи, текст |
| WebP | Растр | Обидва | Так | Так | Веб-зображення, мале + альфа |
| AVIF | Растр | З втратами/без | Так | Так | Макс. стиснення (на сервері) |
| GIF | Растр | Без втрат | Лише 1-бітна | Так | Прості анімації |
| SVG | Вектор | Н/д | Так | Так (з CSS/JS) | Логотипи, іконки, ілюстрації |
Як обрати, швидко
- Фотографія? JPG для сумісності, WebP для вебу.
- Скріншот, логотип чи текст? PNG (растр) або SVG (якщо це справжня векторна графіка).
- Потрібна прозорість? PNG, WebP, AVIF чи SVG — ніколи JPG.
- Анімація? WebP для якості й розміру, GIF лише заради застарілої простоти.
- Публікація на сайт? WebP зазвичай розумний вибір за замовчуванням.
Конвертація між ними
Коли у вас не той формат, не потрібно нічого завантажувати, щоб це виправити. Конвертер зображень перемикає між PNG, JPG і WebP прямо у вашому браузері за допомогою Canvas — без облікового запису, нічого не передається, і працює офлайн після першого візиту. Він обробляє пакети, а якщо ви запитуєте AVIF, відкочується до WebP (менший за JPG/PNG і підтримується всюди), оскільки браузери не можуть надійно кодувати AVIF.
Тримайте таблицю вище на думці — і вибір формату перестане бути вгадуванням: узгодьте формат із вмістом (фото проти графіки), потім із призначенням (веб, пошта, друк) — і ви обиратимете правильно майже щоразу.