JPG czy PNG który format zdjęć będzie lepszy?

PNG i JPG to dwa formaty graficzne, które tworzyły Internet. Oko w oko stawały pomiędzy sobą, aby zmierzyć się w bitwie o tytuł ulubieńca Internetu. Skąd się one wzięły i dlaczego powstały? 

Lata temu kiedy przesył danych to nie zyliard bitów na sekundę, ale ciężko wypracowane kilobajty, cierpiących w zamkniętych ledwo wentylowanych obudowach komputerów, piszczących niczym uderzony szczur modemów. Wtedy zdjęcia ładowały się w budujący coraz to większe napięcie sposób. Cierpliwie wyczekiwana kolejna linijka obrazka i satysfakcja, gdy załadowało się do końca bez konieczności ponownego wysłuchiwania charakterystycznych pisków była niesamowita.

Przesyłanie zdjęć trwało-oj trwało, cóż młodzi dziś nie zrozumieją trudów, jakie trzeba było przejść i rachunków, jakie rodzice musieli ponieść za transfery. Na szczęście te mroczne czasy przesadzonych rachunków telefonicznych oraz zbyt wolnych transferów są już za nami. 

Teraz gdy dziennie przesyłanych jest milion GB tańczących ludzi na tik toku, a Internet jest ważniejszy niż posiłek. Warto przypomnieć sobie o dwóch formatach graficznych które tworzyły historię i to w jaki sposób i jakiej jakości można było przesyłać grafikę. Mówię tutaj o dwóch gigantach internetu w narożniku formatów graficznych - JPG oraz PNG.

Jakie są różnice pomiędzy PNG a JPG? Jaki format wybrać i kiedy używać? Czym różni się kompresja jpg od kompresji PNG?

Skąd potrzeba na wiele formatów takich jak PNG i JPG?

Od początku naszego istnienia porozumiewamy się przez obrazki. Stąd kiedy powstały komputery, powstała też chęć komunikacji nie tylko za pomocą konsoli i wygenerowanych tam przypominających hieroglify wykonanie za pomocą kamieni grafik ASCII, ale też lepszej jakości obrazów przypominające zdjęcia.

Pierwsze metody to tworzenie za pomocą dostępnych znaków klawiaturowych czegoś co można nazwać prehistorycznymi malowidłami skalnymi w postaci komputerowej a mianowicie ASCII art. 

Każdy znak reprezentował odcień, kształt lub detal. W ten sposób można było „rysować” portrety, zwierzęta, krajobrazy - wszystko, co dało się zbudować z 95 dostępnych symboli.

Od terminala do koloru - na arenę wkracza GIF.

GIF w 1987 roku pojawił się (dzięki firmie CompuServe) w komputerach i był przeskokiem w wyświetlaniu obrazów. Co prawda miał ograniczoną paletę barw, bo w jednym obrazku mogło być tylko 256 kolorów, ale na tamte czasy był jak objawienie 10 przykazań.

Graphics Interchange Format teraz jest zdegradowany głównie do pokazywania animacji kotów i prostych memów, jednak w tamtym czasie był on rewolucją. Rewolucja jednak nie trwała długo, ponieważ… 

Niestety, każdy cud ma swoją cenę. GIF kompresował dane przy pomocy algorytmu LZW, który był… objęty patentem.  W praktyce oznaczało to, że każda przeglądarka, edytor czy program używający GIF-ów musiał płacić za licencję.

Jak pewnie się domyślasz nie było to zbyt entuzjastycznie przyjęte. A potrzeba na nowy Image narastała.

Image – co to znaczy?

Ww Image to nie wizerunek. ale najzwyklej angielskie określenie obrazka. a w sensie komputerowym to plik graficzny. Ale nie każdy obraz jest taki sam. Tak jak nie każda kawa to espresso.

Format pliku graficznego to zaś rozszerzenie np: .jpg, .png itp., określa, jak zapisano dane w pliku. 

JPG jako format dla zdjęć: mała waga, szybkie ładowanie.

JPG (JPEG) to już w pryzmacie historii komputerów bardzo stary, ale zarazem bardzo sprytny format. JPG – dzieło Joint Photographic Experts Group, które w 1992 roku zdefiniowało nowy standard zapisu obrazów fotograficznych. 

Używa tzw. kompresji stratnej, co oznacza, że przy zapisie część danych graficznych po prostu znika. Nie jest to problematyczne, o ile nie będziesz powiększać bezlitośnie zdjęcia licząc na to, że znajdziesz tam dowody w sprawie CSI czy coś.

Dla stron internetowych JPG był przez wiele lat najlepszym wyborem dla zdjęć i grafik z dużą ilością kolorów - np. krajobrazów, produktów, ludzi.

Zalety JPG:

• niska waga pliku,
• szybkie ładowanie strony,
• dobra jakość przy niewielkim rozmiarze.

Wady JPG:

• brak przezroczystości,
• każda kolejna kompresja jpg pogarsza jakość (tzw. artefakty).

Czym charakteryzuje się kompresja JPG?

Kompresja jpeg to przykład połączenia inżynieryjnego geniuszu w połączeniu ze znajomością działania oka ludzkiego. Dało to format, który niewiele waży, a zachowuje jakość na tyle dobrą, że widać na zdjęciu detale. Ilość detali jest jednak zależna od stopnia kompresji, nad którą mamy kontrolę.

Kompresja JPG oparta jest na idei: usuń to, czego oko i tak nie zauważy. 

I choć działało to znakomicie, to każda kolejna edycja i zapis pogarszały jakość obrazu.

Pojawiały się rozmycia, kwadratowe artefakty i to nieprzyjemne uczucie, że „coś tu nie gra”.

Proces kompresji jpeg to 5 skomplikowanych kroków w których znajdują się takie etapy jak: podział kolorów na częstotliwości (przekształcenie z modelu RGB na YCbCr),bloki 8×8, DCT, Kwantyzacja, Kodowanie Huffmana.

Efekt:

• JPG usuwa dane, których nie zauważysz (lub prawie nie zauważysz).
• Dzięki temu zdjęcie z 5 MB może ważyć 500 KB i nadal wyglądać świetnie.
• Ale jeśli przesadzisz z kompresją - zobaczysz artefakty i rozmyte detale, także nie idealnie.

I wszystko pięknie, dopóki nie chcesz zaprezentować np.… logo firmowe, a wspomniane wyżej kwadraty zaczynają być widoczne, co w przypadku grafik jest co najmniej mało profesjonalne.

PNG odpowiedź na GIF ratunek dla grafik.

PNG (Portable Network Graphic) powstał w odpowiedzi na patentowe zamieszanie związane z GIF. Format PNG oferuje kompresję bezstratną. Oznacza to tyle, że  zachowuje wszystkie dane obrazu, nawet po ponownym zapisie. Dzięki temu plik wygląda tak samo jak oryginał - ale też często waży dużo więcej.

PNG najlepiej sprawdza się tam, gdzie potrzebujesz grafik z przezroczystym tłem, np. logo, ikony, elementy interfejsu.

Zalety PNG:

• idealna jakość,
• obsługa przezroczystości (alpha channel),
• brak utraty danych przy ponownym zapisie.

Wady PNG:

• duży rozmiar pliku,
• wolniejsze ładowanie strony,
• nadmierne użycie PNG może spowolnić witrynę bardziej niż skrypt z 2005 roku.

Czym od kompresji JPG różni się kompresja PNG?

Te dwa formaty mają różne podejście do zapisania informacji zawartych w oryginale, co daje inne rezultaty, ale także inne możliwości np. w PNG możemy zapisać informacje, gdzie plik ma być przeźroczysty (co w JPG jest niemożliwe). 

PNG zamiast zapisywać każdy piksel z osobna, analizuje różnice między sąsiadującymi pikselami i zapisuje tylko to, co naprawdę się zmienia. W praktyce dzieje się to w trzech etapach:

1. Filtry predykcyjne 
   każdy wiersz obrazu jest przeliczany jednym z pięciu sposobów (np. różnice między pikselami w poziomie, średnia z sąsiadów, czy algorytm Paetha — brzmi jak imię elfa, ale to po prostu wzór matematyczny).
2. Kompresja DEFLATE
   dane po filtracji są ściskane algorytmem ZIP-owym, który usuwa powtórzenia, ale nie usuwa żadnej informacji.
3. Bloki danych (chunks) 
   cały obraz składa się z uporządkowanych sekcji (IHDR, IDAT, IEND), które opisują, co i gdzie się znajduje.

Efekt?
PNG nie gubi jakości, ale nie zawsze jest lekki. To format idealny dla logotypów, ikon i wszystkiego, co ma być ostre jak nowa żyleta, ale zdjęcia będą ważyć jakby były po weselnej imprezie.

PNG vs JPG.

Kiedy decydujesz się pomiędzy tymi dwoma formatami zobacz na tabelę i zastanów się dlaczego warto doczytać ten artykuł do końca. 

Który format wybrać? 

Świat idzie do przodu i dotyczy to też formatów graficznych. Przez ostatnie lata doszło ich parę przez, co teraz możesz być uznany za jaskiniowca, jeśli nie skorzystasz z nowoczesnych formatów graficznych.

WEBP, AVIF często oferują lepszą kompresję przy mniejszej stracie jakości i są rozsądnym zastępstwem dla JPG… A jeśli chodzi o PNG - przy grafikach dalej może on się okazać lepszym rozwiązaniem pomimo upływu tylu lat.

O autorze.

Od lat związany z szeroko rozumianą informatyką. Pierwszą stronę stworzyłem w liceum, za co otrzymałem wyróżnienie.

Ciągle uczę się, aby dorównać tempu rozwoju nowoczesnych technologii łącząc je z wiedzą o psychologii aby zwiększać skuteczność stron i aplikacji internetowych.