Plik PNG - co to jest?
Plik PNG to rastrowy format grafiki z kompresją bezstratną i pełną przezroczystością, ceniony za jakość, ostre krawędzie i wsparcie wszystkich przeglądarek.
Jako konsultant SEO, Paweł Wołoszyn, w audytach technicznych regularnie widzę PNG używany tam, gdzie zupełnie nie powinien się pojawić, czyli do zdjęć produktowych czy tła w nagłówku strony. Kompresja bezstratna, która jest siłą tego formatu, przy fotografii zamienia się w problem: plik waży kilka razy więcej niż potrzeba i realnie obciąża czas wczytywania strony. Najczęstszy błąd, jaki poprawiam, to brak jakiejkolwiek kompresji przed publikacją - grafika trafia na serwer w wersji wyeksportowanej wprost z Photoshopa czy Figmy, bez przepuszczenia jej choćby przez darmowe narzędzie do optymalizacji.
PNG to nie jest uniwersalny "domyślny" format do wszystkiego, tylko narzędzie do konkretnego zadania: przezroczystości i grafiki wymagającej ostrych krawędzi. W audycie zawsze sprawdzam, czy logo i ikony faktycznie potrzebują PNG, czy da się je zastąpić lżejszym SVG, oraz czy istniejące pliki PNG mają nowoczesny odpowiednik WebP albo AVIF podany jako pierwszy wybór w znaczniku picture. To drobna zmiana w kodzie, ale przy serwisie z dużą liczbą grafik potrafi zauważalnie odciążyć transfer danych i poprawić wynik LCP.
Plik PNG (Portable Network Graphics) to rastrowy format grafiki z kompresją bezstratną i pełną obsługą przezroczystości, ceniony w projektowaniu stron za precyzyjne odwzorowanie detali. Obok JPEG to jeden z dwóch formatów rastrowych obsługiwanych przez komplet nowoczesnych przeglądarek, a od czerwca 2025 roku funkcjonuje w nowej wersji specyfikacji (PNG 3.0), która oficjalnie dodaje animacje, obsługę HDR i metadane EXIF.
Jakie są główne zalety formatu PNG?
Największe atuty PNG to kompresja bezstratna, która nie psuje jakości obrazu, pełne wsparcie przezroczystości dzięki kanałowi alfa oraz ostre, czyste krawędzie bez artefaktów kompresji. Dzięki temu format sprawdza się wszędzie tam, gdzie liczy się precyzja, od logo po elementy interfejsu użytkownika.
Kompresja bezstratna a jakość obrazu
Kompresja bezstratna oznacza, że plik PNG można zapisywać i otwierać wielokrotnie bez utraty choćby jednego piksela danych. Algorytm kompresji (DEFLATE, czyli połączenie LZ77 i kodowania Huffmana) najpierw filtruje dane obrazu, a potem je pakuje, ale cały proces jest w pełni odwracalny. To zasadnicza różnica względem JPEG, który stosuje kompresję stratną i przy każdym kolejnym zapisie odrobinę pogarsza jakość.
Obsługa przezroczystości i kanału alfa
PNG obsługuje kanał alfa, dzięki czemu każdy piksel może mieć własny stopień przezroczystości, od pełnej widoczności po całkowitą niewidoczność. Ta właściwość jest niezbędna przy grafikach, które muszą płynnie łączyć się z różnymi tłami, takich jak logo, ikony czy przyciski na stronie internetowej. Dzięki temu element graficzny nie ciągnie za sobą jednolitego prostokąta tła i wygląda naturalnie w każdym otoczeniu.
Warianty PNG: PNG-8, PNG-24 i PNG-32
W praktyce, głównie w narzędziach graficznych typu Photoshop czy Squoosh, funkcjonuje podział na kilka wariantów formatu, które różnią się głębią kolorów i sposobem obsługi przezroczystości.
| Wariant | Głębia kolorów | Przezroczystość | Kiedy się sprawdza |
|---|---|---|---|
| PNG-8 (indeksowany) | do 256 kolorów z palety | 1-bitowa, piksel w pełni przezroczysty albo nieprzezroczysty | proste ikony, płaskie grafiki, logo bez gradientów |
| PNG-24 (truecolor) | ponad 16,7 mln kolorów (24-bit RGB) | brak kanału alfa | zdjęcia produktowe i grafiki z bogatą kolorystyką, bez potrzeby przezroczystości |
| PNG-32 (truecolor + alfa) | ponad 16,7 mln kolorów + 8-bitowy kanał alfa | pełna, 256 poziomów przezroczystości | logo, UI, grafiki na zmiennym tle |
Im mniej kolorów i prostszy kanał alfa, tym lżejszy plik, dlatego przy prostych grafikach nie ma sensu automatycznie eksportować pełnego PNG-32.
Wysoka jakość kolorów i ostre krawędzie
Pliki PNG świetnie radzą sobie z ostrymi krawędziami, więc to naturalny wybór dla grafik z tekstem, liniami, schematami czy ilustracjami. Format dobrze znosi obrazy o ograniczonej, ale wyraźnej palecie barw i nie generuje artefaktów kompresji typowych dla mocno skompresowanego JPEG, gdzie wokół kontrastowych krawędzi pojawiają się widoczne smugi.
Uniwersalne wsparcie w programach i przeglądarkach
PNG jest obsługiwany przez komplet nowoczesnych przeglądarek internetowych - Chrome, Firefox, Safari, Edge i Operę - oraz praktycznie każdy program graficzny. Ta powszechna kompatybilność sprawia, że to bezpieczny, uniwersalny format do publikacji w sieci i wymiany plików między różnymi aplikacjami do edycji obrazu. Według MDN Web Docs PNG jest obecnie jednym z dwóch formatów rastrowych (obok JPEG), które mają pełne wsparcie bez wyjątków we wszystkich głównych przeglądarkach.
Co nowego w specyfikacji PNG 3.0 (2025)?
24 czerwca 2025 roku World Wide Web Consortium (W3C) opublikował trzecią edycję specyfikacji PNG jako oficjalną rekomendację. To pierwsza tak duża aktualizacja formatu od lat, więc warto ją znać, bo częściowo zmienia utarte informacje o możliwościach PNG.
Animowany PNG (APNG) oficjalnie w standardzie
Do 2025 roku animowany PNG (APNG) funkcjonował jako nieoficjalne rozszerzenie stworzone w 2008 roku przez Mozillę - mimo że wszystkie główne przeglądarki obsługiwały go już od lat, formalnie nie należał do specyfikacji PNG. Trzecia edycja to zmienia: APNG jest teraz oficjalną częścią standardu. Technicznie animacja korzysta z dodatkowych fragmentów danych (m.in. acTL i fcTL), a starsze programy, które jej nie obsługują, po prostu wyświetlają pierwszą klatkę jako statyczny obraz, więc kompatybilność wstecz jest zachowana.
Obsługa HDR i metadanych EXIF
Nowa specyfikacja dodaje też obsługę wysokiego zakresu dynamiki (HDR) poprzez dwie funkcje transferowe zdefiniowane w standardzie ITU-R BT.2100 (HLG i PQ), a do zapisu danych z aparatu, takich jak przysłona czy czas naświetlania, służy nowy fragment danych eXIf. To przybliża PNG do możliwości, które od dawna miał JPEG w zakresie metadanych EXIF, przy zachowaniu bezstratnej kompresji.
Kiedy warto używać plików PNG?
Plików PNG warto używać przede wszystkim do grafik wymagających przezroczystego tła, takich jak logo i ikony, a także w projektach, gdzie kluczowe jest zachowanie wysokiej jakości i detali, na przykład w zrzutach ekranu, schematach czy infografikach. Format ten jest też standardem przy elementach interfejsu, które muszą komponować się z różnorodnym tłem strony.
Grafika z przezroczystym tłem (logo, ikony)
Zastosowanie PNG jest niezastąpione w przypadku elementów graficznych, które muszą być umieszczone na zmiennym lub kolorowym tle. Logo firmowe, ikony aplikacji czy przyciski zapisane w PNG z przezroczystością można elastycznie wykorzystywać w różnych projektach bez ręcznego usuwania tła, co zapewnia spójny i profesjonalny wygląd.
Projekty wymagające wysokiej jakości i detali
Wszędzie tam, gdzie liczy się każdy szczegół, PNG jest dobrym wyborem. Dzięki kompresji bezstratnej dobrze się sprawdza przy archiwizacji i prezentacji grafik technicznych, diagramów, zrzutów ekranu z tekstem oraz ilustracji, w których nawet niewielkie rozmycie czy artefakt mogłyby zakłócić czytelność.
Zastosowanie w projektowaniu stron internetowych
W projektowaniu stron internetowych pliki PNG wykorzystuje się do tworzenia kluczowych elementów wizualnych, takich jak logo, ikony, separatory czy grafiki interfejsu użytkownika. Możliwość stosowania przezroczystości i półprzezroczystości pozwala tworzyć nowoczesne, wielowarstwowe layouty, w których grafika harmonijnie współgra z treścią i tłem strony. Przy prostych kształtach geometrycznych, jak ikony czy logo złożone z figur, coraz częściej lepszym wyborem bywa SVG - skaluje się bez utraty jakości na każdym ekranie i zwykle waży mniej niż PNG.
Optymalizacja PNG przed publikacją na stronie
Zanim wgrasz plik PNG na stronę, przepuść go przez narzędzie do optymalizacji, na przykład TinyPNG, Squoosh albo działające lokalnie pngquant i oxipng. Potrafią zmniejszyć wagę pliku nawet o 50-70%, redukując liczbę kolorów i zbędne metadane, bez widocznej utraty jakości. Skompresowany plik warto też serwować z odpowiednimi nagłówkami cache, żeby przeglądarka nie pobierała go ponownie przy każdej wizycie - to prosty krok, który realnie poprawia szybkość ładowania strony.
PNG czy WebP/AVIF - co wybrać w 2026 roku?
PNG nie jest już jedynym formatem bezstratnym w sieci. WebP i nowszy AVIF oferują podobne możliwości, w tym przezroczystość i animację, ale zwykle przy mniejszym rozmiarze pliku, dlatego web.dev, projekt Google poświęcony wydajności stron, zaleca używać ich tam, gdzie to możliwe.
| Format | Kompresja | Przezroczystość | Animacja | Wsparcie przeglądarek |
|---|---|---|---|---|
| PNG | wyłącznie bezstratna | pełna (kanał alfa) | tak, od PNG 3.0 (APNG) | pełne, od lat 90. |
| WebP | bezstratna lub stratna | pełna | tak | pełne we wszystkich aktualnych przeglądarkach |
| AVIF | bezstratna lub stratna, zwykle najmocniejsza kompresja | pełna | tak | pełne we wszystkich aktualnych przeglądarkach |
Według danych Google bezstratny WebP daje pliki średnio o 26% mniejsze niż PNG przy porównywalnej jakości, a AVIF potrafi zejść jeszcze niżej. Różnica realnie przekłada się na szybkość wczytywania strony, bo obrazy w górnej części strony często decydują o wyniku Largest Contentful Paint (LCP), jednego z kluczowych wskaźników Core Web Vitals.
W praktyce nie trzeba wybierać jednego formatu raz na zawsze. Znacznik <picture> pozwala podać kilka źródeł naraz, a przeglądarka sama wybiera to, które obsługuje:
<picture>
<source srcset="grafika.avif" type="image/avif">
<source srcset="grafika.webp" type="image/webp">
<img src="grafika.png" alt="opis grafiki">
</picture>
PNG pełni tu rolę bezpiecznego fallbacku dla starszych przeglądarek i narzędzi, które nowszych formatów jeszcze nie obsługują. To też format w pełni bezpieczny pod kątem widoczności w wyszukiwarce: Google Search oficjalnie wspiera PNG obok BMP, GIF, JPEG, WebP, SVG i AVIF jako formaty obsługiwane w atrybucie src znacznika img, więc sam wybór formatu z tej listy nie wpływa bezpośrednio na indeksowanie w Google Grafika.
Jakie ograniczenia ma format PNG?
Głównymi ograniczeniami formatu PNG są większy rozmiar pliku w porównaniu do JPEG, co może spowalniać ładowanie stron internetowych, oraz mniejsza efektywność przy przechowywaniu fotografii cyfrowej. Algorytm kompresji nie jest zoptymalizowany pod kątem obrazów o złożonych gradientach i milionach kolorów, gdzie JPEG oferuje lepszy stosunek jakości do wielkości pliku.
Większy rozmiar pliku w porównaniu do JPEG
Kompresja bezstratna, będąca zaletą jakościową, jest jednocześnie wadą pod względem rozmiaru pliku. Pliki PNG są zazwyczaj większe niż ich odpowiedniki w formacie JPEG, zwłaszcza przy obrazach o dużej złożoności kolorystycznej. Na stronach internetowych, gdzie każdy kilobajt ma znaczenie dla wydajności, bywa to realnym problemem.
Mniejsza efektywność dla fotografii cyfrowej
Format PNG nie jest najlepszym wyborem do przechowywania zdjęć z aparatu cyfrowego. Fotografie mają płynne przejścia tonalne i ogromną liczbę kolorów, więc kompresja stratna JPEG (albo nowszych formatów) jest w tym przypadku znacznie efektywniejsza. Zapisanie typowego zdjęcia w PNG skutkuje dużym plikiem bez widocznej poprawy jakości względem dobrze skompresowanego JPEG.
Brak natywnego wsparcia CMYK - ograniczenia w druku
PNG obsługuje wyłącznie tryby kolorów przeznaczone dla ekranów: skalę szarości, truecolor RGB i paletę indeksowaną (każdy opcjonalnie z kanałem alfa). Nie ma w nim trybu CMYK, używanego w druku offsetowym. Plik PNG da się wydrukować, ale drukarnia i tak przelicza kolory z RGB na CMYK, co często zmienia odcienie względem tego, co widać na ekranie. Do materiałów przeznaczonych do druku lepiej sprawdzają się formaty takie jak TIFF, PDF czy pliki wektorowe z rozszerzeniem AI (Adobe Illustrator).
Źródła
- Portable Network Graphics - Wikipedia – https://pl.wikipedia.org/wiki/Portable_Network_Graphics
- PNG Specification (Third Edition) - W3C Recommendation – https://www.w3.org/TR/png-3/
- Image file type and format guide - MDN Web Docs – https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types
- Choose the right image format - web.dev (Google) – https://web.dev/articles/choose-the-right-image-format
- Google Images best practices - Google Search Central – https://developers.google.com/search/docs/appearance/google-images
- RFC 2083: PNG (Portable Network Graphics) Specification Version 1.0 - IETF – https://www.rfc-editor.org/rfc/rfc2083
Najczęściej zadawane pytania (FAQ)
Jaka jest różnica między PNG-8 a PNG-24?
Główna różnica polega na głębi kolorów. PNG-8 obsługuje do 256 kolorów i 1-bitową przezroczystość (piksel jest w pełni przezroczysty albo nieprzezroczysty), co czyni go lżejszym. PNG-24 obsługuje ponad 16 milionów kolorów, a przy pełnym kanale alfa (wtedy mówi się też o PNG-32) pozwala na płynne półprzezroczystości, kosztem większego rozmiaru pliku.
Czy pliki PNG nadają się do profesjonalnego druku?
Nie, format PNG nie jest zalecany do profesjonalnego druku, ponieważ operuje wyłącznie w przestrzeni kolorów RGB (dla ekranów), a nie CMYK (dla druku). Można go wydrukować, ale kolory po przeliczeniu na CMYK mogą różnić się od tych widocznych na monitorze. Do druku lepiej używać formatów takich jak TIFF, PDF lub plików wektorowych AI (Adobe Illustrator).
Jak zoptymalizować plik PNG, aby był mniejszy?
Aby zmniejszyć rozmiar pliku PNG bez utraty jakości, można użyć narzędzi online, na przykład TinyPNG czy Squoosh, albo programów graficznych, które redukują paletę kolorów i usuwają niepotrzebne metadane. Warto też wybrać prostszy wariant formatu, PNG-8 zamiast PNG-24, jeśli grafika na to pozwala, bo to często daje największą oszczędność.
Czy format WebP lub AVIF jest lepszy niż PNG?
WebP i nowszy AVIF zwykle oferują lepszą kompresję niż PNG przy zachowaniu przezroczystości, co skutkuje mniejszymi plikami - Google podaje, że bezstratny WebP bywa nawet o 26% lżejszy od PNG. Ich wsparcie w przeglądarkach jest dziś bardzo szerokie, ale PNG wciąż pozostaje najbardziej uniwersalnym i przewidywalnym formatem, dlatego często pełni rolę fallbacku w znaczniku <picture>.
Czy PNG obsługuje animacje?
Tak, choć historycznie było to rozszerzenie, a nie oficjalna część formatu. Animowany PNG, czyli APNG, powstał w 2008 roku jako nieformalna inicjatywa Mozilli i był wspierany przez przeglądarki na długo przed formalizacją. Dopiero w czerwcu 2025 roku, wraz z publikacją trzeciej edycji specyfikacji PNG (PNG 3.0), APNG stał się oficjalną częścią standardu.
Co to są metadane w pliku PNG i czy można je usunąć?
Metadane w pliku PNG to dodatkowe informacje, takie jak autor, data utworzenia, prawa autorskie czy opis obrazu, a od wersji PNG 3.0 także dane EXIF z aparatu (np. przysłona, czas naświetlania). Metadane można bezpiecznie usunąć za pomocą większości programów graficznych lub narzędzi do optymalizacji, co dodatkowo zmniejsza rozmiar pliku bez wpływu na jego wygląd.