Który format jest lepszy: PNG czy JPG?

Najpopularniejsze formaty obrazów na stronach WWW to JPG, PNG, GIF i coraz częściej WebP. Jakie są różnice między tymi formatami? Które z nich stosują kompresję stratną, a które bezstratną? Czy wszystkie obsługują przezroczystość i animacje? Dziś pochylimy się nad nimi, przeanalizujemy i postaramy odpowiedzieć na pytanie – który z nich warto wybrać jako najlepszy dla grafik na własną stronę.

Co to jest format PNG?

Format obrazu PNG (z ang. Portable Network Graphic) przy zapisie wykonuje bezstratną kompresję, co oznacza, że będzie ciężkim plikiem, ale zapewnia wyższą jakość grafiki. Ma 48-bitową głębię kolorów oraz kanał alfa – czyli, mówiąc ludzkim głosem – obsługuje przezroczystość.

Jakie są zalety i wady formatu PNG? Na plus można zapisać bezstratną kompresję i wysoką jakość obrazu. Na minus będzie przede wszystkim większy rozmiar plików w porównaniu do np. JPG. Ten format graficzny wykorzystuje się do logotypów, wykresów, infografik czy ilustracji.

PROTIP: Jeśli chcemy zapisać logotyp peengie bez tła – korzystamy właśnie z tego formatu i zapisujemy go bezstratnie w dużym/oryginalnym rozmiarze. Na gotowy projekt – niezależnie czy pracujemy w Photoshopie, Corelu, Canvie czy Gimpie – wstawiamy ten plik z logo i dopiero wtedy dostosowujemy jego rozmiar do projektu. Wstawiony w ten sposób plik PNG będzie estetycznie wkomponowywał się w projekt.

Plik PNG, bez kompresji, waży 368 KB

JPG – co to za format?

Format obrazu JPEG znany jako JPG (z ang. Joint Photographic Experts Group) to też nazwa algorytmu kompresującego plik przy zapisie – dzięki czemu obraz jest lekki i szybko się wczytuje. Oszczędność na wadze pliku odbija się jednak niekorzystnie na jakości (występuje tu kompresja stratna), no i jotpegi nie obsługują przezroczystości.

Zastosowanie plików JPG? To idealne rozwiązanie do zdjęć, które mają się ładować szybko na stronach WWW, w formie grafik do mediów społecznościowych czy na banerach i dużych tłach.

Jeśli natomiast chodzi o zalety i wady formatu JPG, to do pierwszej grupy możemy zaliczyć niski rozmiar plików i wysoką kompresję. Na niekorzyść tego rodzaju pliku działa brak obsługi przezroczystości oraz utrata jakości przy wielokrotnym zapisie.

PROTIP: Kiedy chcemy na stronę WWW wstawić duże zdjęcie w tle – sprawdzamy na szablonie strony pożądane wymiary w pikselach i skalujemy lub przycinamy do nich zdjęcie. Następnie stosujemy zapis z kompresją JPG – dla optymalnego efektu możemy porównać kompresję 80% i 70% – szukając wówczas takiej wartości kompresji, przy której takie duże zdjęcie waży na tyle mało, by wydajność ładowania była wysoka, a jednocześnie wciąż wygląda dobrze.

Plik JPG, kompresja 10%, plik waży 39 KB, obraz wygląda dobrze

Plik JPG, kompresja 80%, plik waży 20 KB, widać, że obraz zdecydowanie stracił na jakości

GIF – co to znaczy?

Format grafik GIF (z ang. Graphic Interchange Format) stosowany jest powszechnie na stronach WWW dla prostych, zapętlonych animacji. Jest też sposobem na bezstratną kompresję obrazu, ale został skutecznie wyparty przez plik PNG, kiedy jeszcze na algorytmie LZW (stosowanym w gifach właśnie) ciążyły obostrzenia patentowe. Teraz format jest wolny od patentów, ale powszechnie stosowany jest głównie do animacji, a nie do statycznych obrazów.

PROTIP: Jeśli mamy zdjęcia produktu wykonane pod różnym kątem, możemy zrobić z nich GIF, który zapętlony będzie prezentował na przykład co pół sekundy kolejne ujęcie. Jeśli zapiszemy go z kompresją redukującą do 256 kolorów – będzie on wystarczająco mało ważył, by umieścić go na stronie internetowej.

Plik GIF, kompresja do 256 kolorów, 10 warstw, waga pliku 345 KB

Plik GIF, kompresja do 256 kolorów, 5 warstw, waga pliku 173 KB

Kiedy PNG, a kiedy JPG?

Znamy więc już trzy najpopularniejsze formaty graficzne, zostaje więc pytanie – co wybrać? Odpowiedź nie wskazuje na jeden słuszny kierunek. Raczej dla konkretnych zastosowań, wiedząc o specyfice każdego z tych formatów, powinniśmy dobrać go adekwatnie do priorytetów projektu.

• Jeśli zależy nam na tym, żeby duży plik (np. zdjęcie) był lekki i szybko się wczytywał – powinniśmy kierować się raczej w stronę JPG.

• Jeśli zależy nam na dobrej jakości obrazu – powinniśmy wybrać plik PNG.

• Jeśli chcemy wstawić grafikę bez tła czy na przezroczystości – również wtedy postawny na PNG.

• Jeśli chcemy stworzyć grafikę animowaną – wtedy stawiamy na GIF.

  
  

Czy format pliku obrazu ma znaczenie dla SEO?

Optymalizacja obrazów a wybór formatu

Zdania ekspertów są podzielone, ale zdecydowana większość tłumaczy, że sam format obrazu… nie ma znaczenia dla SEO. Najważniejsza jest poprawna optymalizacja: zdjęcie powinno się prawidłowo wyświetlać, być w dobrej jakości i prawidłowo osadzone jako html/css – czyli odpowiednio się wyświetlać w każdej rozdzielczości na PC i na urządzeniach mobilnych.

Dużo większą uwagę niż do samego formatu, powinniśmy skupić na: prawidłowym nazwaniu pliku (tym, co przedstawia i frazą kluczową), uzupełnieniu danych ALT, a także świadomym wyborze pomiędzy jakością a lekkością pliku. Weź też pod uwagę, że Google w kwestii formatu obrazu podpowiada jeszcze inny format. Opisujemy go poniżej.

Zalety i wady formatu WEBP

Format WebP, opracowany przez Google, łączy zalety JPG i PNG – obsługuje zarówno kompresję stratną, jak i bezstratną, a dodatkowo wspiera przezroczystość obrazu. Dzięki nowoczesnym algorytmom pozwala na zmniejszenie rozmiaru plików graficznych przy zachowaniu wysokiej jakości. To sprawia, że jest obecnie jednym z najlepszych wyborów dla optymalizacji obrazów w Internecie, a więc również na strony WWW.

Do wad tego formatu graficznego należy to, że może on nie być wspierany przez niektóre starsze przeglądarki. Jednak WebP jest coraz chętniej wykorzystywany w formie obrazów na stronie, elementów interfejsów aplikacji czy do optymalizacji obrazów dla wydajności ładowania witryn.

Jak widzisz, nie ma jednego idealnego formatu dla każdego przypadku. Wybór odpowiedniego zależy od jego zastosowania. WebP jest nowoczesnym formatem, który coraz częściej zastępuje starsze opcje, ale PNG i JPG nadal mają swoje miejsce w projektach graficznych i webowych.