Колись обрати формат зображення було просто: JPEG для фотографій, PNG для графіки — і готово. Сьогодні картина складніша, але й вигідніша. Сучасні формати на кшталт WebP та AVIF здатні зменшити вагу зображення вдвічі або навіть більше без видимої втрати якості, а це безпосередньо покращує швидкість сторінки, ефективність у пошуку та зручність для кожного, хто користується повільним зʼєднанням.
Цей посібник пояснює, як насправді працює кожен основний вебформат зображень, у чому сильна сторона кожного з них і як зробити вибір упевнено. Він написаний для всіх, хто публікує зображення в інтернеті — розробників, дизайнерів, маркетологів та власників магазинів — і зосереджений на практичних рішеннях, а не на теорії.
Почніть із двох запитань
Майже кожне рішення щодо формату зводиться до двох властивостей вашого зображення.
**Це фотографія чи графіка?** Фотографії (плавні переходи тонів, градієнти, мʼякі краї) добре стискаються *lossy*-форматами, які відкидають деталі, майже непомітні для ока. Графіка з різкими краями, рівномірним кольором і текстом — логотипи, іконки, скриншоти, діаграми — потребує *lossless*-стиснення або векторного формату, щоб залишатися чіткою.
**Чи потрібна вам прозорість або анімація?** Логотип, що розміщується на різних фонах, потребує альфа-каналу. Короткий зациклений ролик потребує підтримки анімації. Ці вимоги відсівають формати ще до того, як до розмови взагалі дійде розмір файлу.
Тримайте ці дві відповіді в памʼяті, поки ми розбираємо формати.
Вебформати зображень коротко
| Формат | Стиснення | Прозорість | Анімація | Підтримка браузерів | Найкраще підходить для |
|---|---|---|---|---|---|
| JPEG (JPG) | Lossy | Ні | Ні | Універсальна | Фотографій, де важлива сумісність |
| PNG | Lossless | Так (alpha) | Ні | Універсальна | Логотипів, іконок, скриншотів, плоскої графіки |
| WebP | Lossy + lossless | Так (alpha) | Так | Усі сучасні браузери | Сучасного стандарту для фото та графіки |
| AVIF | Lossy + lossless | Так (alpha) | Так | Більшість сучасних браузерів | Максимальної ефективності для фото та головних зображень |
| SVG | Векторний (lossless) | Так | Так | Універсальна | Логотипів, іконок, ілюстрацій, що мають масштабуватися |
| GIF | Lossless, 256 кольорів | 1-бітна | Так | Універсальна | Простих застарілих анімацій |
JPEG (JPG): універсальний формат для фото
JPEG залишається стандартним форматом для фотографій уже три десятиліття, і його найбільша перевага — універсальна сумісність. Кожен браузер, операційна система, камера й редактор читають його без жодних запитань.
JPEG використовує lossy-стиснення: він відкидає високочастотні деталі, до яких людський зір найменш чутливий, а решту зберігає компактно. За високих налаштувань якості втрати непомітні; але якщо стиснути занадто сильно, зʼявляються блочні артефакти та ореоли навколо країв.
Його обмеження важать не менше, ніж його поширеність. JPEG не підтримує прозорості, тож будь-яка прозора ділянка перетворюється на суцільний фон, а ще він погано справляється з різкими краями та текстом. Використовуйте JPEG тоді, коли фотографія має відкриватися будь-де без ризику несумісності. Якщо ж ви маєте графіку або потребуєте прозорості, краще конвертуйте JPG у PNG.
PNG: коли потрібна прозорість або бездоганна деталізація
PNG є lossless-форматом: він відтворює кожен піксель точно так, як його було збережено, без жодних артефактів стиснення. Це робить його правильним інструментом для логотипів, іконок, скриншотів, схем і будь-якої графіки з чіткими краями чи великими ділянками рівномірного кольору. Він також підтримує повну альфа-прозорість, тож зображення акуратно лягають на будь-який фон.
Компроміс — це розмір файлу. Для фотографій PNG може бути в кілька разів більшим за рівноцінний JPEG високої якості. Просте правило таке: PNG — для графіки та прозорості, а не для фото. Коли PNG-фотографія сповільнює сторінку, конвертуйте PNG у JPG або, що краще для вебу, конвертуйте PNG у WebP. Докладніший розбір дивіться у статті JPG проти PNG.
WebP: практичний сучасний стандарт
WebP, розроблений компанією Google, — це формат, до якого сьогодні має звертатися першим більшість сайтів. Він підтримує і lossy-, і lossless-стиснення, повну альфа-прозорість та анімацію, охоплюючи майже всі сценарії використання в одному форматі. За даними Google, lossy-зображення WebP зазвичай на 25–34 відсотки менші за порівнянні JPEG, а lossless WebP зазвичай приблизно на 26 відсотків менший за PNG.
Підтримка більше не є перешкодою: WebP працює в кожному актуальному основному браузері, зокрема в Safari від версії 14. Для переважної більшості аудиторії ви можете віддавати WebP напряму, і саме тому це розумний стандарт як для фото, так і для графіки. Щоб перейти на нього, конвертуйте JPG у WebP або конвертуйте PNG у WebP. Для повнішого пояснення прочитайте Що таке WebP.
AVIF: найефективніший, але з кількома компромісами
AVIF — найновіший із мейнстримних форматів, побудований на основі відеокодека AV1 від Alliance for Open Media. Це чемпіон з ефективності: за порівнянної візуальної якості файли AVIF часто приблизно вдвічі менші за JPEG і відчутно менші за WebP. Він також працює з розширеним динамічним діапазоном (HDR), широкими колірними гамами, прозорістю та анімацією.
Існує два практичні компроміси. Кодування повільніше й вимогливіше, ніж у JPEG чи WebP, що має значення для великих пакетів. І хоча підтримка вже широка — Chrome, Firefox, Edge та Safari 16.4 і новіші — вона все ще трохи відстає від WebP, тож запасний варіант буде розумним. AVIF блищить на великих головних зображеннях і насичених фото сторінках, де важливий кожен кілобайт. Спробуйте його, конвертувавши JPG у AVIF або PNG у AVIF, а подробиці дивіться у статті Що таке AVIF.
SVG: для всього, що має масштабуватися
SVG докорінно інший: це векторний формат, який описує форми математикою, а не сіткою пікселів. SVG залишається ідеально чітким за будь-якого розміру — від фавікона до білборда — і водночас крихітним для простої графіки. Це правильний вибір для логотипів, іконок та ілюстрацій, побудованих із суцільних форм і ліній.
SVG не підходить для фотографій, які не мають чіткої геометрії, яку можна було б описати. Але для іконок інтерфейсу та брендових елементів ніщо не зрівняється з його масштабованістю й чіткістю. Дізнайтеся більше у статті Що таке файл SVG.
Проста схема для вибору
Коли ви вагаєтеся, пройдіться по цих пунктах по порядку:
- **Це логотип, іконка чи плоска ілюстрація?** Використовуйте SVG.
- **Це графіка чи скриншот, або їм потрібна прозорість чи бездоганно чіткі краї?** Використовуйте PNG або lossless WebP для менших файлів.
- **Це фотографія для сучасної аудиторії?** Використовуйте AVIF для найменшого розміру, WebP — для найкращого балансу між розміром та охопленням.
- **Це має відкриватися буквально будь-де, зокрема в старому ПЗ?** Використовуйте JPEG.
- **Це анімація?** Використовуйте WebP або, що краще, повноцінний відеоформат на кшталт MP4 — а не GIF.
Як безпечно віддавати сучасні формати
Вам не обовʼязково обирати один формат для всіх. HTML-елемент picture дозволяє браузеру самому обрати найкращий формат, який він підтримує: вкажіть спершу AVIF, потім WebP, а потім запасний JPEG або PNG — і кожен відвідувач завантажить лише один файл. Сучасні браузери отримають ефективну версію, а старіші — гарантований запасний варіант, і все це без жодного JavaScript.
Це важливо не лише з точки зору естетики. Зображення зазвичай є найважчою частиною сторінки, тож вибір формату безпосередньо впливає на Largest Contentful Paint — один із показників Core Web Vitals від Google — а отже, і на зручність для користувача, і на ефективність у пошуку. Менші, добре дібрані зображення — одне з найбільш дієвих покращень швидкості, які тільки можна зробити.
Як конвертувати наявні зображення
Вам рідко потрібно експортувати все з нуля. Щоб осучаснити наявну бібліотеку, конвертуйте її на місці: JPG у WebP, PNG у WebP, JPG у AVIF або PNG у JPG для максимальної сумісності. Зберігайте свої оригінальні майстер-копії високої якості й створюйте з них сучасні формати в міру потреби.