Що таке PNG? Стиснення без втрат і прозорість

PNG (Portable Network Graphics) - формат зображень, що зберігає картинки без жодної втрати деталей і підтримує повну прозорість. Він став стандартом для знімків екрана, логотипів, іконок і графіки інтерфейсів. У цій статті розповідаємо, навіщо створили PNG, як працює його стиснення, чому він інколи дає дуже великі файли, і ділимося практичними порадами щодо конвертації зображень PNG.

Як народився PNG: GIF і патент на LZW

На початку 1990-х більшість графіки у вебі становили GIF, а GIF використовував алгоритм стиснення LZW, запатентований компанією Unisys. За історією формату, яку написав Грег Рулофс, ліцензійну угоду між CompuServe та Unisys тихо оголосили 28 грудня 1994 року, що створило загрозу ліцензійних відрахувань для програм, які записують файли GIF. Після реакції в Usenet Томас Бутелл 4 січня 1995 року опублікував першу чернетку вільного від патентів формату, що тоді називався "PBF". Назву "PNG" запропонували 6 січня й ухвалили в чернетці 5 від 23 січня 1995 року. Специфікацію заморозили з чернеткою 9 від 7 березня 1995 року.

W3C опублікував PNG як Рекомендацію 1 жовтня 1996 року, а за даними Бібліотеки Конгресу США той самий текст IETF опублікувала як RFC 2083 у січні 1997 року. Друге видання з виправленнями вийшло 10 листопада 2003 року й стало міжнародним стандартом ISO/IEC 15948. Третє видання PNG від W3C, опубліковане 24 червня 2025 року, внесло до офіційної специфікації анімований PNG (APNG), блок cICP для сигналізації HDR і блок eXIf для даних EXIF.

Як працює стиснення PNG

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

1. Фільтри рядків

Перед стисненням кожен рядок пікселів проходить через фільтр. Замість значення самого пікселя фільтр зберігає різницю з сусідами, а на однорідних чи плавних ділянках ці різниці близькі до нуля, тож стискаються значно краще. Специфікація визначає п'ять типів фільтрів: None, Sub (піксель ліворуч), Up (піксель вище), Average (середнє лівого й верхнього) і Paeth (передбачення за лівим, верхнім і верхнім лівим пікселями). Кодувальник може обирати свій фільтр для кожного рядка.

2. DEFLATE

Відфільтровані дані стискаються алгоритмом DEFLATE, тим самим, що використовується у файлах ZIP, і зберігаються у форматі zlib усередині блоків IDAT. Це єдиний метод стиснення, визначений специфікацією, і він використовує ковзне вікно розміром щонайбільше 32 КБ. Різні програми створюють із того самого зображення PNG різного розміру, бо докладають більше чи менше зусиль до вибору фільтрів і налаштувань DEFLATE; саме зображення ідентичне.

Структура блоків

Файл PNG починається з 8-байтової сигнатури, за якою йдуть блоки (chunks): IHDR для заголовка, IDAT для даних зображення та IEND, що закриває файл. Необов'язкові блоки можуть містити колірний профіль (iCCP), гаму (gAMA), текст (tEXt, iTXt) і просту прозорість (tRNS).

Типи кольору, бітова глибина та прозорість

PNG підтримує зображення у відтінках сірого, з палітрою (індексовані) і повнокольорові. За даними Бібліотеки Конгресу США, глибина відліку буває від 1 до 16 бітів; типові зображення RGB використовують 8 бітів на канал (24 біти), а за потреби 16 бітів на канал (48 бітів). Необов'язковий альфа-канал зберігає окреме значення прозорості для кожного пікселя. Це значно гнучкіше за просту прозорість GIF за принципом "увімкнено/вимкнено": тіні, м'які краї та напівпрозорі шари виглядають правильно.

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

PNG з палітрою та зменшення кількості кольорів

У PNG з палітрою (індексованому) кожен піксель зберігає не сам колір, а індекс у палітрі до 256 записів. Логотипи, іконки та пласкі ілюстрації з невеликою кількістю кольорів так вміщаються в дуже малі файли. PNG з палітрою також можуть задавати окремим записам палітри власні значення прозорості через блок tRNS, тож, на відміну від GIF, можливі напівпрозорі кольори палітри.

Проте якщо звести фото чи градієнт до PNG з палітрою, з'являються смуги між кольорами та візерунки дизерингу. Тому зменшення кількості кольорів - це крок попередньої обробки, який слід обирати залежно від типу зображення; сам формат PNG залишається безвтратним.

Наскільки поширений PNG?

Дані W3Techs за жовтень 2026 року показують PNG на 74,9% вебсайтів, які вони відстежують, тож це найпоширеніший формат зображень на сайтах. Згідно з Web Almanac 2024 від HTTP Archive, 28,4% зображень на мобільних сторінках - це PNG; попереду лише JPEG (32,4%). Той самий звіт оцінює медіанний PNG у 3,8 біта на піксель, проти 2,0 у JPEG і 1,3 у WebP. Поширеність PNG на сайтах здебільшого забезпечують логотипи та іконки, яким потрібна прозорість; великі фото у форматі PNG роблять сторінки невиправдано важкими.

Коли використовувати PNG, а коли обрати інше

Сторінка Google про WebP стверджує, що зображення WebP без втрат на 26% менші за PNG. Тож WebP - добра альтернатива для графіки, яку показують у браузері, хоча PNG досі має ширшу сумісність і його може відкрити практично будь-яка програма.

Типові проблеми

Чому мій PNG такий великий?

Найчастіша причина - фотографія, збережена як PNG. Шум і дрібні деталі на фото погано стискаються без втрат, тож те саме зображення в JPG або WebP може бути в кілька разів меншим. Для знімків екрана розмір файлу зростає безпосередньо з роздільністю.

Конвертація JPG у PNG не покращила якість

PNG зберігає пікселі такими, якими вони є на момент збереження. Втрати та блокові артефакти від стиснення JPG уже є частиною зображення до конвертації, і PNG так само точно їх зберігає.

Після конвертації в JPG зникла прозорість

JPG не має альфа-каналу. Під час конвертації прозорі пікселі заповнюються суцільним кольором; якщо ви його не оберете, використовується стандартний колір програми (зазвичай білий або чорний).

Кольори виглядають інакше

PNG може містити колірний профіль і відомості про гаму. Програми, які тлумачать їх по-різному, можуть показувати трохи різні кольори. Для зображень, призначених для вебу, найнадійніше використовувати sRGB.

Поради щодо конвертації PNG

• Зменшуйте схожі на фото PNG. Під час конвертації PNG у JPG стандартна якість становить 90; прозорі ділянки за замовчуванням заповнюються білим, але ви можете обрати інший колір тла.
• Щоб зберегти прозорість, конвертуйте PNG у WebP або PNG в AVIF; обидва формати зберігають альфа-канал. Якщо у WebP кожен піксель має залишитися точно таким самим, увімкніть "WebP без втрат"; файл може збільшитися.
• Зменшити PNG, залишивши його PNG, можна лише обмежено: поки зображення не змінюється, виграш дає тільки пошук кращих фільтрів і стиснення. Наше стиснення зображень за замовчуванням конвертує статичні PNG у WebP; якщо хочете залишити PNG, додатковий параметр оптимізації PNG намагається зменшити файл, не змінюючи жодного пікселя.
• Потрібна іконка? Конвертер PNG в ICO пакує квадратну іконку розміром 16, 32 і 48 пікселів (і більших розмірів, якщо зображення достатньо велике) в один файл.
• Ці конвертації виконуються у вашому браузері, тож ваші файли не залишають вашого пристрою. Дані EXIF і місцезнаходження не записуються в результат.

Часті запитання

PNG - із втратами чи без?

PNG - формат без втрат. Скільки б разів ви не відкривали й не зберігали файл, пікселі не змінюються. Те, що деякі інструменти називають "PNG із втратами", - це зменшення кількості кольорів перед збереженням, щоб отримати PNG з палітрою; втрати відбуваються на цьому кроці попередньої обробки, а не у форматі.

Чи підтримує PNG анімацію?

Базовий PNG - ні. Анімацію додає розширення APNG, і воно стало частиною специфікації з третім виданням PNG від W3C. За даними MDN, усі актуальні браузери показують APNG, але багато графічних редакторів відкривають лише його перший кадр.

Що означають PNG-8 і PNG-24?

Цих назв немає в специфікації; це скорочення, якими користуються програми. PNG-8 зазвичай означає PNG з палітрою до 256 кольорів, PNG-24 - повнокольоровий PNG з 24 бітами на піксель, а PNG-32 - PNG у форматі RGBA з альфа-каналом.

Що обрати: PNG чи WebP?

Якщо зображення показуватиметься на вебсторінці, WebP зазвичай дає менший файл і теж зберігає прозорість. Якщо ви редагуватимете зображення в інших програмах, надсилатимете його комусь або архівуватимете, PNG забезпечує ширшу сумісність.

Чи підходить PNG для друку?

За якістю так, бо він без втрат, але PNG не підтримує колірну модель CMYK. У професійному друці зазвичай віддають перевагу TIFF або PDF.

Джерела

• W3C: Portable Network Graphics (PNG) Specification (Third Edition)
• W3C: огляд та історія PNG
• Greg Roelofs: History of the Portable Network Graphics (PNG) Format
• Бібліотека Конгресу США: опис формату PNG
• Google for Developers: An image format for the Web (WebP)
• MDN: посібник із типів і форматів файлів зображень
• W3Techs: статистика використання форматів зображень на вебсайтах
• HTTP Archive Web Almanac 2024: Media