JPG проти PNG, WebP та AVIF: який формат зображення обрати?

Кожен формат зображення — це інший компроміс між розміром файлу, якістю, сумісністю та можливостями на кшталт прозорості. Оберете вдало — файли будуть малі й відкриватимуться всюди; невдало — отримаєте скани по 30 МБ або логотипи із зазубреними білими краями. Ось для чого насправді призначений кожен формат.

Конфіденційність понад усе: кожне зображення обробляється локально у вашому браузері. Нічого не завантажується, не зберігається й не передається на жоден сервер.

JPG — універсальний формат для фото

JPG (1992) стискає фотографії, відкидаючи деталі, яких око майже не помічає, — з регулюванням через параметр якості. За якості 75–85 файли малі й чудово виглядають; їх відкриває кожен пристрій і програма на світі. Обмеження: немає прозорості, і кожне повторне збереження втрачає трохи більше деталей. Використовуйте для фото, які мусять працювати абсолютно всюди.

PNG — без втрат, із прозорістю

PNG зберігає пікселі точно й підтримує повну альфа-прозорість, що робить його стандартом для логотипів, знімків екрана, графіки інтерфейсів і будь-якого зображення, яке редагуватимуть неодноразово. Ціна — розмір: фотографії у PNG роздуваються в рази проти JPG, бо фотографічний шум не стискається без втрат. Використовуйте PNG для графіки та робочих копій, а не для передачі фото.

WebP — сучасний стандарт вебу

WebP робить обидві роботи: стискання з втратами на 25–35% менше за JPG еквівалентної якості та режим без втрат із прозорістю, значно менший за PNG. Усі браузери підтримують його з 2020 року. Єдина слабкість — поза вебом: старе десктопне програмне забезпечення, принтери й деякі форми завантаження досі його відхиляють. Використовуйте WebP для всього, що показується на сайті.

AVIF — найменші файли, найновіший формат

AVIF, побудований на відеокодеку AV1, дає найменші файли серед поширених форматів — часто вдвічі менші за JPG тієї ж якості — і підтримує прозорість та HDR. Підтримка браузерами вже універсальна, але інструменти й невеб-програми відстають. Використовуйте там, де байти важать найбільше і ви контролюєте доставлення, з запасним варіантом для старих середовищ.

GIF, SVG і HEIC — вузькі спеціалісти

GIF живе лише заради простих анімацій; для статичних зображень він застарів (256 кольорів, величезні файли). SVG — це не пікселі, а векторна геометрія: ідеально для іконок і логотипів, які мають масштабуватися, безглуздо для фото. HEIC — ефективний формат камери Apple: чудовий на пристрої, незручний скрізь інде, і зазвичай конвертується в JPG, щойно файл покидає екосистему Apple.

Рішення, стисло

Фото для загального поширення → JPG. Будь-що на сайті → WebP (або AVIF, якщо впораєтеся із запасними варіантами). Логотип, знімок екрана чи прозорість → PNG (WebP, якщо лише для вебу). Має масштабуватися до будь-якого розміру → SVG. Прийшло з iPhone і прямує деінде → конвертуйте HEIC у JPG. У разі сумнівів JPG для фото та PNG для графіки — ніколи не катастрофа.