Strony internetowe, poza treścią w postaci tekstu jak opisy, informacje czy aktualności składają się z obrazów. Jaki format sprawdzi się najlepiej dla poszczególnych zastosowań? Zacznijmy może od opisu poszczególnych formatów.
Spis treści
JPG
JPG – jest formatem, który charakteryzuje się wysokim stopniem kompresji, co sprawia, że pliki zajmują mniej i co za tym idzie ładują się szybciej na stronach internetowych. Jest stosowany i przystosowany do zdjęć, porównując podczas kompresowania sąsiednie piksele tak, aby wzrok nie zauważył znacznej różnicy, ale danych było mniej. Należy mieć na uwadze, że jest to kompresja stratna, tak więc warto jest dokonując kompresji do pliku JPG zachować oryginalne zdjęcie, ponieważ po wykonaniu kompresji i zapisaniu pliku, pewne dane zostaną bezpowrotnie utracone.
Format ten stosujemy wyłącznie do zdjęć statycznych. Nie można dokonać kompresji animacji GIF do formatu JPG z zachowaniem animowanych elementów, oraz nie ma możliwości zapisania warstwy przeźroczystej.
WEBP
WEBP – jest formatem rozwijanym przez Google i ma na celu zastąpienie przede wszystkim serwowania obrazów w formacie JPG. Charakteryzuje się kompresją w trybie stratnym oraz bezstratnym. Przy zastosowaniu kompresji stratnej obrazu, podobnie jak w wypadku JPG, następuje porównanie sąsiednich pikseli i usunięcie ich. Odbywa się to jednak za sprawą innego algorytmu, wypracowanego przez Google przez co jakość obrazu sprawia wrażenie lepszej, a stopień kompresji jest jednocześnie wyższy i tak możemy osiągnąć pliki mniejsze nawet o 25 czy w skrajnych wypadkach 35%.
Mimo iż format ten istnieje i jest powszechnie dostępny od ponad 10 lat, nie stał się standardem i nie wyparł jak planowano formatu JPG. Często stosuje się więc przy użyciu wtyczek dla popularnych systemów zarządzania treścią (CMS) rozwiązania gdzie na serwerze zapisane są zarówno pliki w formacie JPG oraz WEBP i serwowane te, które obsługuje przeglądarka WWW odwiedzającej stronę osoby.
Zaletą WEBP poza wyższym stopniem kompresji i lepszą jakością obrazów jest fakt iż format ten obsługuje warstwę przeźroczystości, tak więc nadaje się nie tylko do obsługi zdjęć, ale również grafik, które takie warstwy często zawierają.
PNG
PNG – to format, który z założenia powstał na potrzeby internetowe, stąd też jego nazwa, która rozwija się na Portable Network Graphics. Historycznie format ten powstał również jako następca formatu GIF w chwili gdy pojawiły się roszczenia związane z kwestią prawną użycia kompresji stosowanej w tym formacie (GIF). PNG sprawdza się najlepiej gdy mamy do czynienia nie ze zdjęciami, a z grafikami różnego rodzaju, w tym zawierającymi warstwę przeźroczystości. Stopień kompresji nie jest tutaj zbyt wysoki, tak więc zdjęcia w tym formacie mogą zajmować sporo więcej niż np. w formacie JPG, jednak przy grafice zawierającej wiele jednolitych kolorów oraz gdzie zachodzi potrzeba posiadania przeźroczystości, sprawia się bardzo dobrze.
Warto wspomnieć, że z uwagi iż format ten miał zastąpić GIF, który pozwala na animowane elementy, jest możliwość zapisania animacji złożonej z klatek obrazów for formatu APNG czyli Animated Portable Network Graphics. Tego typu rozwiązanie jednak nie przyjęło się i jest tutaj wspomniane wyłącznie jako ciekawostka.
SVG
SVG – jest formatem grafiki wektorowej w przeciwieństwie do wyżej przedstawionych formatów, które należą do rastrowych. Czym to się różni? Na pewno zwróciłeś uwagę, że przy powiększaniu zdjęć w pewnym momencie pojawiają się piksele. Krawędzie nie są już ostre, a rozmyte. Ma to związek z tym, że format rastrowy ma zadaną rozdzielczość i obraz nie jest skalowany, a powiększany. W przypadku grafiki wektorowej, obraz i tu warto wspomnieć, że tym obrazem jest wyłącznie grafika dwuwymiarowa jest zapisany w postaci instrukcji / funkcji matematycznych, a nie pikseli umiejscowionych na siatce składającej się na obraz. To sprawia, że z technicznego punktu widzenia taki obraz może być skalowany w nieskończoność bez strat i krawędzie danych elementów graficznych zawsze będą gładkie / ostre.
Format ten stosowany ze względu na swoją konstrukcję charakteryzuje się bardzo małymi rozmiarami plików, ponieważ to przeglądarka odczytuje instrukcje, które zawiera plik SVG i rysuje obraz. Najczęściej jako pliki SVG możemy spotkać różnego rodzaju ikony i im podobne elementy graficzne na stronach. Niekiedy logotypy serwisów internetowych również są zapisane i serwowane w tym formacie. Dodatkowym atutem jest fakt iż obraz taki nie musi być serwowany z odrębnie zapisanego pliku, a zamieszczony wprost w kodzie strony WWW, co sprawia, że odwołań do plików zewnętrznych jest mniej i co za tym idzie, strona ładuje się nieco szybciej.
Jaki format do czego?
Podsumowując więc jeśli chcesz zamieścić zdjęcie, to dobrą praktyką będzie zastosowanie wtyczki potrafiącej wygenerować i zaserwować odwiedzającemu pliki WEBP ze względu na ich dobrą jakość i wysoki stopień kompresji, pamiętając jednak o tym aby domyślnie strona zawierała również zdjęcia w formacie JPG. W ten sposób niezależnie od tego jakiej przeglądarki WWW użyje odwiedzający Twoją stronę, zdjęcia na pewno zostaną załadowane i przedstawione poprawnie.
W sytuacji gdy planujesz zamieszczenie grafik gdzie wymogiem będzie przeźroczystość, a same obrazy będą miały pewien stopień skomplikowania jak przejścia tonalne itp. przy jednocześnie niewielkich rozmiarach, dobrym wyborem będzie zapisanie ich do formatu PNG.
Gdy Twoja strona natomiast ma zwierać elementy takie jak ikony czy stosunkowo proste grafiki dwuwymiarowe, najbardziej optymalnym będzie użycie plików w formacie SVG.
Pamiętaj, że zastosowanie formatu o wysokiej kompresji nie sprawi, że Twoja strona będzie ładowała się szybciej jeśli nie dostosujesz rozdzielczości obrazów do potrzeb strony WWW. Pamiętaj więc, aby w polu o przykładowych rozmiarach 500×500 pikseli nie wybierać obrazu o rozdzielczości 1000×1000 pikseli. Stosowanie odpowiedniej rozdzielczości obrazów na pewno przyspieszy działanie Twojej strony WWW.
Przydatne narzędzia online
Konwertery online
JPG do WEBP – https://convertio.co/pl/jpg-webp/
JPG do PNG – https://convertio.co/pl/jpg-png/
