Wybór formatu obrazu był kiedyś prosty: JPEG do zdjęć, PNG do grafiki, gotowe. Dziś obraz sytuacji jest bardziej złożony — i bardziej satysfakcjonujący. Nowoczesne formaty, takie jak WebP i AVIF, potrafią zmniejszyć wagę obrazu o połowę lub więcej, bez widocznego spadku jakości, co bezpośrednio poprawia szybkość strony, wyniki w wyszukiwarce i komfort wszystkich osób korzystających z wolnego połączenia.
Ten przewodnik wyjaśnia, jak naprawdę działa każdy z głównych formatów obrazów dla sieci, w czym każdy się sprawdza i jak wybierać z pewnością. Jest przeznaczony dla każdego, kto publikuje obrazy w sieci — deweloperów, projektantów, marketerów i właścicieli sklepów — i koncentruje się na praktycznych decyzjach, a nie na teorii.
Zacznij od dwóch pytań
Niemal każda decyzja o formacie sprowadza się do dwóch właściwości obrazu.
**Czy to fotografia, czy grafika?** Fotografie (płynne przejścia tonalne, gradienty, miękkie krawędzie) dobrze się kompresują w formatach *stratnych*, które odrzucają detale ledwo dostrzegalne dla oka. Grafiki z ostrymi krawędziami, jednolitym kolorem i tekstem — logo, ikony, zrzuty ekranu, wykresy — wymagają kompresji *bezstratnej* lub formatu wektorowego, aby pozostać wyraźne.
**Czy potrzebujesz przezroczystości lub animacji?** Logo umieszczane na różnych tłach potrzebuje kanału alpha. Krótki zapętlony klip potrzebuje obsługi animacji. Te wymagania kwalifikują lub dyskwalifikują formaty, zanim w grę w ogóle wejdzie rozmiar pliku.
Miej te dwie odpowiedzi w głowie, gdy będziemy omawiać poszczególne formaty.
Formaty obrazów dla sieci w skrócie
| Format | Kompresja | Przezroczystość | Animacja | Obsługa przeglądarek | Najlepszy do |
|---|---|---|---|---|---|
| JPEG (JPG) | Stratna | Nie | Nie | Powszechna | Fotografii, gdy liczy się zgodność |
| PNG | Bezstratna | Tak (alpha) | Nie | Powszechna | Logo, ikon, zrzutów ekranu, grafiki jednolitej |
| WebP | Stratna + bezstratna | Tak (alpha) | Tak | Wszystkie nowoczesne przeglądarki | Nowoczesny domyślny wybór do zdjęć i grafiki |
| AVIF | Stratna + bezstratna | Tak (alpha) | Tak | Większość nowoczesnych przeglądarek | Maksymalnej wydajności dla zdjęć i obrazów hero |
| SVG | Wektorowa (bezstratna) | Tak | Tak | Powszechna | Logo, ikon, ilustracji, które muszą się skalować |
| GIF | Bezstratna, 256 kolorów | 1-bitowa | Tak | Powszechna | Prostych animacji starego typu |
JPEG (JPG): uniwersalny format zdjęć
JPEG jest domyślnym formatem fotograficznym od trzech dekad, a jego największą zaletą jest powszechna zgodność. Każda przeglądarka, system operacyjny, aparat i narzędzie do edycji odczytuje go bez problemu.
JPEG wykorzystuje kompresję stratną: odrzuca detale o wysokiej częstotliwości, na które ludzki wzrok jest najmniej wrażliwy, a resztę przechowuje w zwartej postaci. Przy wysokich ustawieniach jakości strata jest niewidoczna; przy zbyt mocnej kompresji pojawiają się blokowe artefakty i otoczki wokół krawędzi.
Jego ograniczenia są równie istotne jak jego zasięg. JPEG nie obsługuje przezroczystości, więc każdy przezroczysty obszar staje się jednolitym tłem, a format ten słabo radzi sobie z ostrymi krawędziami i tekstem. Używaj JPEG, gdy fotografia musi otworzyć się wszędzie bez ryzyka problemów ze zgodnością. Jeśli masz grafikę lub potrzebujesz przezroczystości, zamiast tego skonwertuj JPG na PNG.
PNG: gdy potrzebujesz przezroczystości lub perfekcyjnych detali
PNG jest bezstratny: odtwarza każdy piksel dokładnie tak, jak został zapisany, bez artefaktów kompresji. To czyni go właściwym narzędziem do logo, ikon, zrzutów ekranu, diagramów i każdej grafiki z wyraźnymi krawędziami lub dużymi obszarami jednolitego koloru. Obsługuje też pełną przezroczystość alpha, dzięki czemu obrazy czysto układają się na dowolnym tle.
Kompromisem jest rozmiar pliku. W przypadku fotografii PNG może być kilkukrotnie większy niż odpowiadający mu JPEG wysokiej jakości. Zasada jest prosta: PNG do grafiki i przezroczystości, nie do zdjęć. Gdy zdjęcie w formacie PNG spowalnia stronę, skonwertuj PNG na JPG lub, co lepsze dla sieci, skonwertuj PNG na WebP. Aby zgłębić temat, zobacz JPG kontra PNG.
WebP: praktyczny nowoczesny standard
WebP, opracowany przez Google, to format, po który większość witryn powinna dziś sięgać w pierwszej kolejności. Obsługuje zarówno kompresję stratną, jak i bezstratną, pełną przezroczystość alpha oraz animację — pokrywając niemal każdy przypadek użycia w jednym formacie. Według danych Google stratne obrazy WebP są zwykle o 25 do 34 procent mniejsze od porównywalnych plików JPEG, a bezstratny WebP jest zazwyczaj o około 26 procent mniejszy od PNG.
Obsługa nie stanowi już bariery: WebP działa w każdej aktualnej, popularnej przeglądarce, w tym w Safari od wersji 14. Dla zdecydowanej większości odbiorców możesz serwować WebP bezpośrednio, dlatego jest on rozsądnym domyślnym wyborem zarówno do zdjęć, jak i grafiki. Aby go wdrożyć, skonwertuj JPG na WebP lub skonwertuj PNG na WebP. Pełniejsze wyjaśnienie znajdziesz w artykule Czym jest WebP.
AVIF: najbardziej wydajny, z kilkoma kompromisami
AVIF to najnowszy format z głównego nurtu, zbudowany na kodeku wideo AV1 od Alliance for Open Media. To mistrz wydajności: przy porównywalnej jakości wizualnej pliki AVIF są często mniej więcej o połowę mniejsze od JPEG i zauważalnie mniejsze od WebP. Obsługuje też szeroki zakres dynamiczny (HDR), szerokie gamuty kolorów, przezroczystość i animację.
Istnieją dwa praktyczne kompromisy. Kodowanie jest wolniejsze i bardziej wymagające niż w przypadku JPEG czy WebP, co ma znaczenie przy dużych partiach plików. Choć obsługa jest już szeroka — Chrome, Firefox, Edge oraz Safari 16.4 i nowsze — wciąż nieco ustępuje WebP, dlatego rozsądnie jest mieć wariant zapasowy. AVIF błyszczy w przypadku dużych obrazów hero i stron pełnych zdjęć, gdzie liczy się każdy kilobajt. Wypróbuj go, konwertując JPG na AVIF lub PNG na AVIF, a po szczegóły zajrzyj do artykułu Czym jest AVIF.
SVG: do wszystkiego, co musi się skalować
SVG jest zasadniczo inny: to format wektorowy, opisujący kształty za pomocą matematyki, a nie siatki pikseli. Plik SVG pozostaje idealnie ostry w dowolnym rozmiarze, od favikony po billboard, a jednocześnie zachowuje niewielki rozmiar przy prostych grafikach. To właściwy wybór do logo, ikon i ilustracji zbudowanych z jednolitych kształtów i linii.
SVG nie nadaje się do fotografii, które nie mają czytelnej geometrii do opisania. Ale w przypadku ikon interfejsu i materiałów brandowych nic nie dorówna jego skalowalności i wyrazistości. Dowiedz się więcej w artykule Czym jest plik SVG.
Prosty schemat decyzyjny
Gdy masz wątpliwości, przejdź przez te punkty po kolei:
- **Czy to logo, ikona lub jednolita ilustracja?** Użyj SVG.
- **Czy to grafika lub zrzut ekranu, albo czy wymaga przezroczystości lub perfekcyjnych krawędzi?** Użyj PNG lub bezstratnego WebP dla mniejszych plików.
- **Czy to fotografia dla nowoczesnych odbiorców?** Użyj AVIF dla najmniejszego rozmiaru, a WebP dla najlepszej równowagi między rozmiarem a zasięgiem.
- **Czy musi otwierać się dosłownie wszędzie, łącznie ze starym oprogramowaniem?** Użyj JPEG.
- **Czy jest animowany?** Użyj WebP lub, lepiej, prawdziwego formatu wideo, takiego jak MP4 — nie GIF.
Bezpieczne serwowanie nowoczesnych formatów
Nie musisz wybierać jednego formatu dla wszystkich. Element picture w HTML pozwala przeglądarce wybrać najlepszy obsługiwany format: na początku wymień AVIF, potem WebP, a następnie wariant zapasowy JPEG lub PNG, a każdy odwiedzający pobierze tylko jeden plik. Nowoczesne przeglądarki otrzymują wydajną wersję, a starsze gwarantowany wariant zapasowy, bez potrzeby stosowania JavaScriptu.
Ma to znaczenie wykraczające poza estetykę. Obrazy są zwykle największą częścią strony, więc wybór formatu ma bezpośredni wpływ na Largest Contentful Paint, jeden ze wskaźników Core Web Vitals firmy Google, a tym samym na komfort użytkownika i wyniki w wyszukiwarce. Mniejsze, dobrze dobrane obrazy to jedno z najbardziej opłacalnych usprawnień szybkości, jakie są dostępne.
Jak skonwertować istniejące obrazy
Rzadko trzeba eksportować wszystko od nowa. Aby zmodernizować istniejącą bibliotekę, konwertuj w miejscu: JPG na WebP, PNG na WebP, JPG na AVIF lub PNG na JPG dla maksymalnej zgodności. Zachowaj oryginalne pliki wzorcowe wysokiej jakości i generuj z nich nowoczesne formaty w miarę potrzeb.