Każdy format graficzny to zestaw kompromisów między rozmiarem pliku, jakością i funkcjami takimi jak przezroczystość czy animacja. Wybierz zły, a dostaniesz opasłe pliki, rozmyty tekst albo grafiki, które się nie wyświetlą. Oto każdy z popularnych formatów w prostych słowach, a za nimi tabela, którą warto mieć pod ręką.
Dwie wielkie rodziny
Zanim przejdziemy do pojedynczych formatów, jedno rozróżnienie tłumaczy większość z nich:
- Obrazy rastrowe to siatki pikseli. Zdjęcia są rastrowe. Powiększ dostatecznie mocno, a zobaczysz kwadraty. PNG, JPG, WebP, AVIF i GIF są rastrowe.
- Obrazy wektorowe to matematyka — linie, krzywe i kształty zdefiniowane współrzędnymi. Skalują się do dowolnego rozmiaru bez rozmycia. SVG to format wektorowy w sieci.
Druga kluczowa idea to stratny kontra bezstratny. Formaty stratne (JPG, zwykle AVIF/WebP) odrzucają część detalu, żeby skurczyć plik. Formaty bezstratne (PNG, GIF, bezstratny WebP) zachowują każdy piksel dokładnie.
Formaty, jeden po drugim
JPG (JPEG) — koń roboczy dla zdjęć. Stratny, mały i czytelny dosłownie wszędzie. Bez przezroczystości, bez animacji. Wielokrotne ponowne zapisywanie powoli go degraduje. Używaj do zdjęć i wszędzie, gdzie potrzebna jest maksymalna zgodność.
PNG — bezstratny, obsługuje przezroczystość. Właściwy wybór do zrzutów ekranu, logotypów, ikon i diagramów — wszystkiego z tekstem albo ostrymi krawędziami. Zdjęcia w PNG są duże, więc do nich go nie używaj.
WebP — nowoczesny format, który robi obie robóty: tryb stratny bije JPG na rozmiarze (~25–35% mniejszy), tryb bezstratny obsługuje przezroczystość i zostaje kompaktowy. Radzi sobie też z animacją. Powszechnie wspierany w przeglądarkach. Idealny do sieci; mniej do maila czy starszego oprogramowania.
AVIF — najnowszy i najlepszy kompresor tutaj, mniej więcej połowa rozmiaru JPEG przy podobnej jakości, z przezroczystością i HDR. Przeglądarki potrafią go dobrze wyświetlać, ale nie potrafią niezawodnie kodować z płótna — więc narzędzia w przeglądarce wracają do WebP, gdy poprosisz o AVIF. Prawdziwe kodowanie AVIF potrzebuje serwera albo natywnej aplikacji.
GIF — stary, ograniczony do 256 kolorów, ale klasyk prostej animacji. Do czegokolwiek poza krótką pętlą WebP (albo wideo) jest mniejszy i ostrzejszy. W porządku do maleńkich animowanych ikon; słaby do zdjęć.
SVG — wektorowy, więc skaluje się nieskończenie bez rozmycia i zostaje maleńki przy prostych grafikach. Idealny do logotypów, ikon i ilustracji. To kod, nie piksele, więc nie potrafi przedstawić zdjęcia.
Tabela porównawcza
| Format | Typ | Kompresja | Przezroczystość | Animacja | Najlepszy do |
|---|---|---|---|---|---|
| JPG | Rastrowy | Stratna | Nie | Nie | Zdjęcia, maks. zgodność |
| PNG | Rastrowy | Bezstratna | Tak | Nie | Zrzuty ekranu, logo, tekst |
| WebP | Rastrowy | Obie | Tak | Tak | Obrazy w sieci, mały + alfa |
| AVIF | Rastrowy | Stratna/bezstratna | Tak | Tak | Maks. kompresja (po stronie serwera) |
| GIF | Rastrowy | Bezstratna | Tylko 1-bitowa | Tak | Proste animacje |
| SVG | Wektorowy | Nie dotyczy | Tak | Tak (z CSS/JS) | Logo, ikony, ilustracje |
Jak wybierać, szybko
- Zdjęcie? JPG dla zgodności, WebP do sieci.
- Zrzut ekranu, logo albo tekst? PNG (rastrowy) albo SVG (jeśli to prawdziwa grafika wektorowa).
- Potrzebujesz przezroczystości? PNG, WebP, AVIF albo SVG — nigdy JPG.
- Animacja? WebP dla jakości i rozmiaru, GIF tylko dla klasycznej prostoty.
- Publikujesz na stronie? WebP to zwykle rozsądny domyślny wybór.
Konwersja między nimi
Gdy masz zły format, nie musisz nic przesyłać, żeby to naprawić. Narzędzie do konwersji obrazów przełącza między PNG, JPG i WebP prosto w Twojej przeglądarce dzięki Canvas — bez konta, nic nie jest przesyłane, i działa offline po pierwszej wizycie. Radzi sobie z partiami, a jeśli poprosisz o AVIF, wraca do WebP (mniejszego niż JPG/PNG i wspieranego wszędzie), skoro przeglądarki nie potrafią niezawodnie kodować AVIF.
Miej powyższą tabelę na uwadze, a wybór formatu przestanie być zgadywanką: dopasuj format do treści (zdjęcie kontra grafika), potem do miejsca docelowego (sieć, mail, druk), a wybierzesz poprawnie niemal za każdym razem.