Który format jest lepszy: PNG czy JPG?

0
646

Ktory_format_jest_lepszy_PNG_czy_JPGFormaty obrazów najpopularniejsze na stronach WWW to JPG, PNG i GIF. Jakie są różnice między tymi formatami, które z nich zapisują obraz bezstratnie, które obsługują przezroczystość, a które animacje? Dziś pochylimy się nad nimi, przeanalizujemy i postaramy odpowiedzieć na pytanie – który z nich warto wybrać jako najlepszy dla grafik na stronę WWW.

Co to jest format PNG?

Format obrazu PNG (z ang. Portable Network Graphic) przy zapisie wykonuje bezstratną kompresję, co oznacza, że będzie cięższym plikiem w porównaniu do identycznego JPG, ale będzie też wyglądał lepiej od niego. Ma 48-bitową głębię kolorów oraz kanał alfa – czyli, mówiąc ludzkim głosem – obsługuje przezroczystość.

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 tak plik PNG będzie estetycznie wkomponowywał się w projekt, dzięki przezroczystości.PNG bez kompresji

Plik PNG, bez kompresji, waży 368 KB

JPG – co to za format?

Format obrazu JPEG znany też 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, no i jotpegi nie obsługują przezroczystości.

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 szybko się wczytywać, a jednocześnie wciąż wygląda dobrze.JPG_kompresja_10

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

JPG_kompresja_80

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ż bezstratnym sposobem kompresji obrazu, ale został skutecznie wyparty przez format 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 niż statycznych obrazów.

PROTIP: Jeśli posiadamy 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 ten plik z kompresją redukującą do 256 kolorów – będzie on wystarczająco mało ważył, by umieścić go na stronie WWW.

GIF_z_10_warstw

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

GIF_z_5_warstw

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, zostaje więc pytanie – co wybrać? Odpowiedź nie wskazuje na jeden słuszny kierunek i format, 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 jakości obrazu – powinniśmy kierować się raczej w stronę PNG.
  • Jeśli chcemy wstawić grafikę bez tła, czy na przezroczystości – również wtedy wybierzmy PNG.
  • Jeśli chcemy stworzyć grafikę animowaną – wtedy stawiamy na GIF.

Czy format pliku obrazu ma znaczenie dla SEO?

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 (optymalnej) jakości i być dobrze osadzone jako html/css – czyli prawidłowo 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 wyborem pomiędzy jakością, a lekkością pliku. Chociaż Google w kwestii formatu obrazu podpowiada jeszcze inny format, ale jaka będzie jego przyszłość – czas pokaże.mem_jpg_vs_png

Który format jest lepszy: PNG czy JPG?
5 (100%) 4 votes

ZOSTAW ODPOWIEDŹ

Please enter your comment!
Please enter your name here