JPG, PNG, WebP czy AVIF? Który format zdjęć wybrać

Formaty graficzne różnią się sposobem kompresji, obsługą przezroczystości i tym, jak dobrze radzą sobie z różnymi rodzajami obrazów. Wybór wpływa na wagę pliku, a więc na szybkość ładowania strony.

Kompresja stratna i bezstratna

Kompresja stratna (JPG, WebP, AVIF) usuwa szczegóły, których oko prawie nie zauważa. Daje bardzo małe pliki, ale przy mocnym ściśnięciu pojawiają się artefakty — rozmyte krawędzie i „kwadraty”. Kompresja bezstratna (PNG, WebP bezstratny) zachowuje każdy piksel, więc pliki są większe.

Porównanie formatów

Format	Kompresja	Przezroczystość	Najlepszy do
JPG	stratna	nie	zdjęć, gdy liczy się zgodność ze wszystkim
PNG	bezstratna	tak	zrzutów ekranu, grafik z tekstem, logo
WebP	obie	tak	zdjęć i grafik na stronach WWW
AVIF	obie	tak	zdjęć, gdy liczy się najmniejszy rozmiar
SVG	wektor	tak	logo, ikon, schematów
GIF	bezstratna, 256 kolorów	1-bitowa	prostych animacji (lepiej: WebP lub wideo)

JPG — uniwersalny standard

JPG otworzy każdy program, telefon i drukarnia. Przy jakości 75–85% zdjęcie wygląda praktycznie tak samo jak oryginał, a waży kilka razy mniej. Słabo radzi sobie z ostrymi krawędziami i tekstem — wokół liter pojawiają się szumy.

PNG — gdy liczy się każdy piksel

PNG jest idealny do zrzutów ekranu, wykresów, schematów i grafik z przezroczystym tłem. Zdjęcie zapisane jako PNG będzie jednak kilka razy większe niż JPG — to częsty powód wolnych stron.

WebP — dobry wybór na strony

WebP (Google, 2010) obsługuje kompresję stratną i bezstratną oraz przezroczystość. Przy podobnej jakości pliki są zwykle o 25–35% mniejsze niż JPG. Obsługują go wszystkie współczesne przeglądarki, więc to rozsądny domyślny format zdjęć na strony internetowe.

AVIF — najmniejsze pliki

AVIF oparty na kodeku AV1 kompresuje jeszcze mocniej niż WebP, zwłaszcza przy niskich jakościach. Kodowanie jest wolniejsze, a niektóre starsze programy graficzne go nie otwierają. Na stronach można podawać AVIF z zapasowym WebP lub JPG za pomocą elementu <picture>.

Praktyczne zalecenia

• Zdjęcia produktów i wpisów na blogu: WebP, jakość 75–85%, szerokość dopasowana do miejsca na stronie (zwykle 1200–1600 px).
• Logo i ikony: SVG, a gdy nie jest dostępny — PNG.
• Zrzuty ekranu: PNG lub WebP bezstratny.
• Wysyłka do drukarni lub klienta: JPG w najwyższej jakości albo format wskazany przez odbiorcę.
• Archiwum zdjęć: oryginały z aparatu — każde ponowne zapisanie w formacie stratnym pogarsza jakość.

Pliki między formatami JPG, PNG, WebP i AVIF przekonwertujesz w konwerterze obrazów. Wszystko dzieje się w przeglądarce — zdjęcia nie są wysyłane na serwer. Jak dodatkowo zmniejszyć wagę zdjęć, opisujemy w poradniku Jak zmniejszyć rozmiar zdjęcia.