Kompletny przewodnik po formatach obrazów: PNG, JPG, WebP, AVIF i SVG

JPG / JPEG  Joint Photographic Experts Group

JPG powstał w 1992 roku w Joint Photographic Experts Group i od początku miał służyć wydajnej kompresji fotografii. Jego algorytm dzieli obraz na bloki 8×8 pikseli i stosuje dyskretną transformatę kosinusową (DCT), by przedstawić każdy blok jako zestaw częstotliwości, odrzucając te o dużej zmienności, które oko rejestruje najsłabiej. Efektem jest kompresja stratna: część danych oryginału znika bezpowrotnie.

Dlaczego tak dobrze radzi sobie ze zdjęciami: fotografia ma łagodne, stopniowe przejścia barw, czyli dokładnie taki materiał, który JPG kompresuje najsprawniej. Zdjęcie krajobrazu zapisane w jakości 80% potrafi być dziesięciokrotnie lżejsze od pliku nieskompresowanego, a na ekranie różnicy nie widać.

Gdzie zawodzi: algorytm blokowy 8×8 zostawia widoczne artefakty na ostrych krawędziach, tekstach i jednolitych plamach koloru. Czarne logo na białym tle zapisane w JPG pokaże szare smugi wokół liter — słynne artefakty JPEG. Format nie obsługuje też kanału alfa, czyli przezroczystości.

Kiedy używać: fotografia na strony, do druku i do poczty. Zdjęcia produktowe, banery, grafiki na blogu. Każdy obraz o bogatej gamie kolorów, który nie potrzebuje przezroczystości.

Kiedy odpuścić: logo, ikony, zrzuty ekranu z tekstem, grafiki z przezroczystym tłem, ilustracje o ostrych krawędziach oraz pliki, które będą wielokrotnie edytowane i zapisywane.

PNG  Portable Network Graphics

PNG powstał w 1996 roku jako alternatywa dla obciążonego patentami GIF-a i korzysta z kompresji bezstratnej — nic nie jest odrzucane. Algorytm DEFLATE (połączenie LZ77 i kodowania Huffmana) przestawia dane pikseli w wydajniejszy sposób, niczego nie usuwając. Dzięki temu rozpakowany obraz jest identyczny z oryginałem co do piksela, niezależnie od tego, ile razy plik był zapisywany.

Kanał alfa: PNG dokłada do RGB czwarty kanał — alfa, który steruje kryciem w skali od 0 (pełna przezroczystość) do 255 (pełne krycie). Pozwala to na przezroczystość, półprzezroczystość i miękko wygładzone krawędzie na dowolnym tle.

PNG-8, PNG-24 i PNG-32: PNG-8 korzysta z palety do 256 barw (jak GIF) i sprawdza się przy prostych ikonach oraz grafikach o niewielu kolorach. PNG-24 daje pełną paletę (16 milionów barw) bez przezroczystości. PNG-32 łączy pełną paletę z kanałem alfa — i to o nim mowa, gdy mówi się o „przezroczystym PNG”.

Gdzie zawodzi: przy fotografii PNG jest nieopłacalny — zdjęcia w tym formacie potrafią ważyć od trzech do dziesięciu razy więcej niż odpowiedniki w JPG. Kompresja bezstratna nie radzi sobie z fotograficzną zmiennością barw.

Kiedy używać: logo i ikony z przezroczystym tłem, zrzuty ekranu z tekstem, infografiki, grafiki z jednolitymi plamami koloru, cyfrowa grafika o ostrych krawędziach oraz pliki wymagające wielokrotnej edycji bez narastających strat.

Kiedy odpuścić: fotografia na strony (użyj JPG lub WebP), grafiki, które muszą być lekkie, oraz e-mail marketing, gdzie JPG ma lepszą zgodność.

WebP  Web Picture format

WebP powstał w Google na bazie kodeka wideo VP8 i trafił na rynek w 2010 roku jako uniwersalny następca JPG i PNG w internecie. Obsługuje oba tryby: stratny (oparty na VP8, do zdjęć) i bezstratny (na autorskim algorytmie, do grafik). W trybie stratnym korzysta z predykcji bloków i transformacji adaptacyjnych — technik bardziej zaawansowanych niż DCT z JPG — dzięki czemu daje pliki o 25–35% lżejsze przy tej samej jakości wizualnej.

To, co najlepsze z obu światów: WebP zastępuje nie tylko JPG przy zdjęciach (tryb stratny), ale też PNG przy logo i grafikach (tryb bezstratny z kanałem alfa), zwykle dając pliki o 20–30% lżejsze. To jedyny format, który łączy zastosowania JPG i PNG, wypadając wydajniej w obu.

Zgodność w 2026 roku: obsługują go Chrome, Firefox, Safari (od wersji 14), Edge i Opera, co pokrywa ponad 97% użytkowników sieci. Główne wyjątki to starsze programy pocztowe (zwłaszcza Outlook) oraz firmowe systemy z przestarzałym IE11.

Kiedy używać: praktycznie każda grafika na stronę — zdjęcia, logo, ikony, banery. To domyślny zalecany format przy wgrywaniu plików na nowoczesne witryny. Google PageSpeed Insights wprost rekomenduje WebP, gdy wykryje JPG lub PNG tam, gdzie WebP by wystarczył.

Kiedy odpuścić: e-mail marketing (nierówna zgodność), druk w drukarni, miniatury na YouTube (serwis nie przyjmuje WebP) oraz pliki do pobrania, które odbiorcy otworzą lokalnie na starszych systemach.

AVIF  AV1 Image File Format

AVIF wywodzi się z kodeka wideo AV1, stworzonego przez Alliance for Open Media (należą do niego m.in. Google, Mozilla, Netflix i Amazon). To najnowszy i technicznie najbardziej zaawansowany format graficzny w sieci — w wielu przypadkach daje pliki o 20–50% lżejsze od WebP przy tej samej jakości wizualnej, zwłaszcza przy niższych ustawieniach, gdzie WebP zaczyna widocznie kruszyć obraz.

Skąd ta wydajność: AV1 korzysta ze znacznie bardziej zaawansowanych technik niż VP8 z WebP — m.in. trybów predykcji wewnątrzramkowej, transformat o zmiennej wielkości i filtrów pętlowych. Efekt robi największe wrażenie przy zdjęciach o dużej złożoności i subtelnych gradientach.

Problem z kodowaniem: konwersja do AVIF trwa nieporównanie dłużej niż do WebP — koder AVIF potrafi potrzebować od dziesięciu do stu razy więcej czasu na ten sam plik. Przy stronach z dużą liczbą grafik albo procesach budowania generujących warianty w locie ten koszt obliczeniowy naprawdę się liczy.

Zgodność w 2026 roku: Chrome 85+, Firefox 93+, Safari 16+. Formatu nie obsługuje IE11 ani większość programów pocztowych. Wsparcie jest wciąż węższe niż dla WebP, dlatego zaleca się serwować AVIF z zapasowym WebP i JPG przy użyciu znacznika <picture>.

Kiedy używać: strony o dużym ruchu, gdzie każdy zaoszczędzony kilobajt realnie obniża koszt transferu; grafiki wysokiej jakości, przy których różnica wobec WebP jest zauważalna; nowe projekty, w których proces budowania już obsługuje AVIF.

Kiedy odpuścić: gdy czas kodowania jest czynnikiem krytycznym; w konwerterze ImageTools (przeglądarkowy koder AVIF oparty na Canvas API nie jest zoptymalizowany i potrafi dać plik cięższy od oryginału — do dobrego AVIF użyj narzędzi serwerowych, na przykład sharp).

SVG  Scalable Vector Graphics

SVG różni się od wszystkich pozostałych formatów w tym zestawieniu. Zamiast pikseli przechowuje instrukcje matematyczne zapisane w XML — „narysuj prostokąt o szerokości 200 w punkcie X,Y kolorem #3ecf8e”. Przeglądarka albo program wylicza piksele na bieżąco, w potrzebnej rozdzielczości. Plik SVG ważący 5 KB wyświetli się bez zarzutu i w faviconie 16 px, i na dwudziestometrowym billboardzie.

Dlaczego to format idealny do logo i ikon: logo i ikony składają się z kształtów geometrycznych — prostokątów, kół, krzywych Beziera i tekstu. SVG opisuje właśnie te kształty, nie tracąc po drodze żadnej informacji. Logo w PNG o szerokości 200 px przy powiększeniu do 2000 px się rozsypie; to samo logo w SVG pozostanie idealne w każdym rozmiarze.

Edytowalny przez CSS i JavaScript: elementy SVG wklejone wprost do HTML-a można obsługiwać jak każdy inny element DOM — zmieniać kolor przez CSS, animować przejściami CSS albo skryptem, dodawać interakcje na zdarzeniach myszy. To trochę HTML dla grafiki.

Gdzie zawodzi: fotografia oraz grafiki o bogatej palecie i złożonych gradientach dają pliki SVG ogromne i niepraktyczne, a przy tym gorszej jakości niż JPG, bo format nie powstał do zapisywania danych fotograficznych.

Kiedy używać: logo, ikony, ilustracje geometryczne, wykresy, mapy, każda grafika skalowana do wielu rozmiarów oraz interaktywne ikony w interfejsach webowych.

Kiedy odpuścić: fotografia, grafiki o bogatej kolorystyce i fakturze, media społecznościowe (większość nie przyjmuje plików SVG) oraz e-mail marketing.

GIF  Graphics Interchange Format

GIF powstał w 1987 roku w CompuServe i korzysta z bezstratnego algorytmu LZW (Lempel-Ziv-Welch), ma jednak zasadnicze ograniczenie: obsługuje tylko 256 barw na klatkę. Każdy piksel jest indeksem w palecie liczącej maksymalnie 256 pozycji, przez co format jest nieopłacalny przy zdjęciach (mających miliony kolorów), ale odpowiedni dla prostych grafik o skromnej palecie.

Dlaczego GIF przetrwał do dziś: to jedyny powszechnie obsługiwany format rastrowy z natywną animacją wieloklatkową — i właśnie to trzyma go przy życiu dekady po pojawieniu się technicznie lepszych następców. Animowany WebP i AVIF są wydajniejsze, ale zgodność i kulturowa obecność animowanego GIF-a wciąż zapewniają mu miejsce.

Częściowa przezroczystość: GIF dopuszcza tylko jeden „przezroczysty” kolor na klatkę, bez półprzezroczystości i wygładzania. Efektem są poszarpane krawędzie wokół zaokrąglonych kształtów, szczególnie na kolorowych tłach.

Kiedy używać: proste animacje na platformach bez obsługi animowanego WebP i MP4; animowane ikony o skromnej palecie; memy i treści w social mediach, gdzie GIF jest po prostu oczekiwany.

Kiedy odpuścić: zdjęcia statyczne (użyj JPG lub WebP), statyczne logo (użyj PNG lub SVG), złożone animacje na strony (użyj MP4 albo animowanego WebP — są znacznie wydajniejsze).

BMP  Bitmap

BMP to bitmapowy format Windowsa stworzony przez Microsoft. W większości ustawień w ogóle nie stosuje kompresji — każdy piksel zapisywany jest wprost razem ze swoją wartością koloru. Stąd bardzo ciężkie pliki: obraz 1920×1080 w 24-bitowym BMP zajmuje dokładnie 5,93 MB, zawsze, niezależnie od zawartości.

Dlaczego wciąż istnieje: BMP ma gwarantowaną zgodność w całym ekosystemie Microsoftu — w Windowsie, Offisie, drukarkach i starszych programach graficznych. W wewnętrznych procesach przetwarzania obrazu, gdzie brak kompresji jest zaletą (żadnych artefaktów na kolejnych etapach), format wciąż się broni.

Kiedy używać: gdy konkretny, zwykle starszy system wprost wymaga BMP; jako format pośredni w przetwarzaniu, gdzie kompresja wprowadzałaby niepożądane artefakty; w druku przemysłowym na niektórych systemach.

Kiedy odpuścić: wszelkie zastosowania w sieci, poczcie, mediach społecznościowych i wszędzie tam, gdzie waga pliku ma znaczenie.