Który format jest lepszy? JPG, PNG, GIF a może inny? Dobór rozszerzenia do obrazu w Internecie.

 w Grafika komputerowa, Internet, Opis, Poradniki, WWW,

W cyfrowym świecie istnieje wiele formatów graficznych, które przechowują dane bajtowe. Po rozszyfrowaniu przez komputer ukazują nam graficzne zdjęcia – rastrowe, wektorowe, a nawet 3D. Zapewne znasz tak jak większość użytkowników Internetu – takie rozszerzenia jak JPEG, PNG czy GIF. Pytanie brzmi czy wiesz, kiedy je stosować? A kiedy jeden format jest lepszy od innego?

Format ma spore znaczenie i pozwala na wyświetlenie odpowiedniej grafiki w mniejszym rozmiarze (wadze pliku) i lepszej jakości – o ile jest dobrze dobrany do tego, co znajduję się na zdjęciu – kluczem wyboru jest odpowiednie wybranie formatu do zawartości obrazu. Dlatego warto zapoznać się z poniższymi informacjami, popartymi przykładami o tym, jak dobierać odpowiednie rozszerzenia plików graficznych.


Wstęp: Co zawiera Twoja grafika?

Przed wyborem musisz sprawdzić jaką grafikę posiadasz – czy jest to rysunek, zdjęcie fotograficzne, a może szkic czy komiks? Zdjęcia fotograficzne, które zawierają bogatą ilość detali i kolorów powinny zostać zapisane w formacie JPG, gdy nasze zdjęcie jest szkicem, komiksem bądź grafiką zawierająca teksty – sprawdzi się wtedy lepiej format PNG.

Przykład:

Porównanie PNG vs JPG

Po lewej – grafika w formacie png o wielkości 7.09 kB. Po prawej grafika w JPG o wielkości 13.8 kB.


Rozszerzenia graficzne wykorzystywane w internecie

Wydaje się, że wiele osób nie wie, kiedy poprawnie zastosować metody kompresji plików do obrazów. Formaty JPEG (a.k.a. JPG) i PNG są najpopularniejszymi formatami używanymi online, ale nieprawidłowe ich użycie powoduje niepotrzebnie duże pliki, które mogłyby zostać lepiej skompresowane.

  • Obrazy JPEG są zapisywane przy użyciu technik próbkowania w dół. Z tego powodu obraz jest zniekształcony trochę (lub dużo) po kompresji, w zależności od ustawienia jakości.
  • JPEG najlepiej jest wykorzystywać do zdjęć i zrzutów ekranu z gier lub innych elementów zawierających żywe kolory.

    PNG nie jest zalecany do treści fotograficznych, ponieważ prawie zawsze nie ma spójnych bloków do kompresji.

  • Obrazy PNG są zapisywane przy użyciu predykcji. Jest kompresowany przez sprawdzenie pionowych lub poziomych bloków tego samego koloru, aby utworzyć dane predykcyjne. Jest to format bezstratny.

  • Mocne strony PNG to płaskie obrazy. Grafika liniowa, szkice cyfrowe, zrzuty ekranu z pulpitu lub okna itp. Są lepiej zapisywane w tym formacie.

    Format JPEG nie jest zalecany w przypadku obrazów z grafiką płaską lub o ostrych krawędziach (np. Puste pulpity), ponieważ format PNG jest lepiej dostosowany do tego typu obrazów.


Jaki format wybrać zdjęcia?

FormatKompresjaPaleta kolorówZastosowanie
JPGStratnaMiliony kolorów✔️ Zdjęcia fotograficzne,
✔️ Elementy stron internetowych (bez przezroczystości),
✔️ Zdjęcia o dużej ilości odcieni i bogactwa kolorów,
❌ Brak kanału przezroczystości.
PNG 24BezstratnaMiliony kolorów✔️ Grafiki z przezroczystością (kanał alpha),
✔️ Grafiki zawierające tekst,
✔️ Komiksy,
✔️ Ilustracje,
✔️ Loga internetowe, ikony,
✔️ Zrzuty ekranu (screenshots),
✔️ Infografiki.
❌ Nie warto stosować do fotografii.
PNG-8BezstratnaMaksymalnie 256 kolorów✔️ Jak wyżej, ale dotyczące mniejszej, liczby kolorów,
✔️ Świetna dla ikon,
✔️ Manga,
❌ Liczba kolorów,
❌ Nie warto stosować do fotografii.
GIFBezstratnaMaksymalnie 256 kolorów✔️ Proste animacje,
✔️ Grafika z małą ilością kolorów i bez gradientów,
❌ Nie stosować do filmów,
❌ Grafiki o dużej ilości kolorów.
SVGbezstratna (grafika wektorowa)Miliony kolorów✔️ Grafiki wektorowe,
✔️ Loga,
✔️ High-dpi,
❌ Nie można stosować do zdjęć fotograficznych.
WebPbezstratna/stratnaMiliony kolorów✔️ Zdjęcia fotograficzne,
✔️ Grafiki na stronach internetowych,
✔️ Animacje,
✔️ Grafiki z kanałem alpha (przezroczystość),
✔️ Najnowszy format o najlepszym stosunku jakości do wagi pliku,
❌ Nie działa w starszych przeglądarkach.

Dobór grafiki – jak porównywać?

Narzędziem, które warto stosować do porównania jakości grafik, jest aplikacja https://squoosh.app/. Strona ta pozwala na powiększenie oraz porównanie rozmiaru zdjęcia do jakości poprzez wizualne powiększenie.

Squoosh - porównanie kompresji zdjęcia

Drastyczne porównanie jakości zdjęcia i kompresji w aplikacji squoosh.app


Innym narzędziem jest komenda bash rozszerzenia ImageMagick – compose, która analizuje dwa pliki i generuje różnice w postaci 3 pliku – białe piksele, to piksele identyczne na dwóch zdjęciach. Czerwony kolor reprezentuje natomiast te piksele, które nie są identyczne – kompresja bezstratna powinna generować biały plik. Przykład:

Zdjęcie przed kompresją MozJPEG

Plik źródłowy: 2725 kB (.jpg)

Zdjęcie po kompresji 75% MozJPEG

Plik skompresowany 860 kB (kompresja MozJPEG – 75%)

Porównanie za pomocą narzędzia compose. Praktycznie cała bitmapa obrazów nie pasuje do siebie, oprócz czerni.

Compose

Wygenerowany plik za pomocą porównania komendą compose

Porównując kompresje bezstratną komendą compose, otrzymujemy niezmienioną bitmapę pikseli (2725 kB do 2527 kB).

Kompresja bez stratna i porównanie compose

Porównanie pikseli w kompresji bezstratnej.


Jaki program do kompresji bezstratnej i stratnej?

Najlepszym programem do kompresji bezstratnej jest FileOptimizer, należy przeciągnąć odpowiednie zdjęcie do aplikacji, a program sam zoptymalizuje odpowiednio wgrane zdjęcia, ewentualnie cały folder.

Program do kompresji zdjęć FileOptimizer

Program do kompresji zdjęć File Optimizer

Program pozwala również na wybranie kompresji stratnej – wystarczy zaznaczyć odpowiednią opcje w ustawieniach.


Najpopularniejsze formaty zdjęć w internecie

Najpopularniejszymi formatami wykorzystywanymi w sieci są JPG oraz PNG – 72 / 75 na 100 stron posiada grafiki w tym formacie. Dynamicznie rozwija się format wektorowy SVG, z który w 3 lata zanotował wzrost z 1.4% na 16.5%.

Format PNG od 11 maja 2017 roku jest najpopularniejszym rozszerzeniem obrazów używanych w internecie
Dane W3Techs.com, Kwiecień 2019 rok

format / data1.01.
2013
1.01
2014
1.01
2015
1.01
2016
1.01
2017
1.01
2018
1.01
2019
3.04
2019
Brak zdjęć9.5%14.8%15.9%11.8%10.0%10.1%9.6%9.5%
PNG61.8%59.9%63.3%69.8%73.4%74.9%74.7%74.9%
JPEG72.7%69.3%68.8%72.6%74.1%73.7%72.7%72.4%
GIF62.7%50.4%44.1%41.5%38.3%33.9%27.9%27.0%
SVG-0.1%0.5%1.4%3.0%5.5%15.1%16.5%
BMP0.6%0.5%0.4%0.3%0.3%0.3%0.2%0.2%
ICO0.2%0.20%0.1%0.2%0.2%0.2%0.1%0.1%
WebP----< 0.1%< 0.1%< 0.1%0.10%

Interesującym faktem jest to że 9 na 100 stron www nie posiada jakiejkolwiek grafiki.


Nowe rozszerzenia – czy warto ich używać?

W Internecie dostępne są również nowoczesne formaty, rozwijane przez duże firmy z branży internetowej. Format WebP i WebM rozwijany przez Google pozwala na lepszą kompresje niż JPG i jest wykorzystywany przy animacjach.

Przy odpowiednio skonfigurowanym serwerze internetowym możliwym jest przesyłanie użytkownikom w tym formacie – natomiast użytkownicy, którzy nie korzystają z odpowiedniej wersji przeglądarki otrzymają te same zdjęcia w formacie .PNG bądź JPG.


Podsumowanie

Użycie odpowiedniego algorytmu czy kompresji jest zależne od wykorzystania zdjęcia, jeżeli zdjęcie ma być na stronie internetowej to warto użyć kompresji stratnej. Użytkownik dopiero w sporym powiększeniu zobaczy różnice w takim zdjęciu. W kompresji bezstratnej piksele się nie zmieniają – oznacza to że oba zdjęcia mimo różnej wagi nie posiadają różnicy bitmapowej.

2 Komentarze

infomiasto

Listopad 28, 2019

A jeszcze są jpeg-XR jpeg-2000 co oznaczają jeszcze te dodatkowe rodzaje czy kodeki. Spośród nich też coś warto wybierać bardziej?

Odpowiedz

Wojciech

Listopad 29, 2019

Cześć, tak są te formaty, jednak są bardzo słabo wspierane przez przeglądarki internetowe.

JPEG-XR wyświetli się tylko dla 4% użytkowników (IE i Edge).
JPEG2000 wyświetli się dla 15%,
.WebP – 81%.

Według narzędzia https://webspeedtest.cloudinary.com/ najlepiej jest kompresować tym formatem miniaturki

Informacje stąd:
https://caniuse.com/jpegxr,
https://caniuse.com/#search=jpeg2000

Odpowiedz

Zostaw komentarz