Jaki format zdjęć wybrać na swoją stronę internetową?

Każdy, kto tworzy własną stronę internetową, bloga czy sklep online w końcu będzie musiał zadać sobie to pytanie: jaki format zdjęć wybrać? Jeśli jesteś właśnie na tym etapie, to dobrze trafiłeś. Opowiem Ci o kilku ogólnych pojęciach oraz o czterech najpopularniejszych rozszerzeniach. Po tej lekturze na pewno dokonasz dobrego, świadomego wyboru!

Różnica między wektorem a rastrem

Zacznijmy od podstawowych pojęć: różnicy między obrazami rastrowymi a wektorowymi. 

Pliki obrazów rastrowych

Obrazy rastrowe stworzone są z pikseli lub pojedynczych bloków. Najpopularniejszymi rozszerzeniami obrazów rastrowych są formaty JPG, GIF oraz PNG. 

Właściwie spotkałeś się z tym formatem już nie raz – wszystkie zdjęcia w internecie lub w druku są właśnie obrazami rastrowymi. Charakterystyczne dla nich jest to, że jeśli za bardzo je rozciągniemy, piksele ulegną zniekształceniu. Zdjęcie będzie rozmyte, niewyraźne, czy „rozpikselowane”. 

Dlatego, aby zachować jakość, musisz zapisywać plik w dokładnych wymiarach potrzebnych dla danej aplikacji.

Pliki obrazów wektorowych

Obrazy wektorowe są uważane za dużo bardziej elastyczne. Ma to związek z ich konstrukcją – używa się w nich wzorów proporcjonalnych, a nie pikseli. Stąd też formaty takie EPS, AI i PDF lepiej nadają się do grafik wymagających częstej zmiany rozmiaru. Sprawdzą się na pewno w Twoim logo i grafice marki. Możesz wtedy spać spokojnie. Będą wyglądać świetnie zarówno w wielkości znaczka pocztowego, jak i na dużym banerze reklamowym. 

A co jeśli nie wiesz, w jakim pliku zostało stworzone Twoje logo? Zadzwoń do firmy, która wydrukowała Twoje wizytówki lub koszulki. Powinna mieć zapisany plik wektorowy i z łatwością Ci go przesłać. 

W tym artykule skupię się jednak na plikach obrazów rastrowych. 

Różnica między wysoką rozdzielczością a niską

Kolejne niezrozumiałe dla zwykłych śmiertelników pojęcia to DPI i PPI. To pierwsze oznacza „kropki na cal”, a PPI „piksele na cal”. Są to jednostki miary potrzebne do określenia, czy gęstość pikseli na obrazie jest odpowiednia dla używanej aplikacji.

To, ile powinny wynosić poszczególne wartości, zależy od sposobu użycia Twojego obrazu. Na przykład strony internetowe wyświetlają obrazy już w 72 dpi (czyli niskiej rozdzielczości). Ale w druku wymagana jest rozdzielczość co najmniej 300 dpi. I nie pomoże tu żaden Photoshop. Obraz z internetu najczęściej nie będzie wyglądał dobrze na koszulce, czy kubku. Musisz poprosić grafika o dopasowanie 

rozdzielczości.  

Jeśli jednak skupiasz się na swojej internetowej działalności, ten problem nie będzie Cię dotyczył. 

Najpopularniejsze formaty

JPG

Pliki JPG (lub JPEG) są chyba najpopularniejszymi w internecie. Jest to format obrazu rastrowego, znany  z kompresji stratnej (jakość obrazu spada wraz ze zmniejszaniem się rozmiaru pliku). 

Plików JPEG używaj na swojej stronie, dokumentach pakietu Microsoft Ofiice lub w projektach do druku, które wymagają wysokiej rozdzielczości. 

Zalety JPG:

• obsługuje miliony kolorów i może tworzyć wysokiej jakości zdjęcia z realistycznymi szczegółami i gradientami;
• jest obsługiwany przez przeglądarki, urządzenia i platformy;
• można go łatwo skompresować i zoptymalizować (by skrócić czas ładowania na stronie).

Wady JPG:

• nie obsługuje przezroczystości ani animacji;
• może powodować artefakty, szumy lub rozmycie (przy zbyt dużej kompresji lub zmianie rozmiaru);
• może stracić jakość za każdym razem, gdy jest edytowany lub zapisywany (degradacja JPEG).

Kiedy używać formatu JPEG? 

• do zdjęć lub złożonych obrazów zawierających wiele kolorów, szczegółów i gradientów;
• unikaj w logo, ikonach, tekście i prostych grafikach wymagających ostrych krawędzi lub przezroczystości;
• nie kompresuj obrazów JPG więcej niż 60-80%. 

PNG

Pliki w formacie PNG są formatem obrazu rastrowego, idealnym na stronę internetową, ale nie nadają się do druku. Mają niską rozdzielczość i są bezstratne (można je edytować bez utraty jakości). Ich największą zaletą jest możliwość zapisania obrazu w większej liczbie kolorów na przezroczystym tle. 

Zalety PNG:

• zachowuje jakość i szczegóły oryginalnego obrazu nawet po wielokrotnych edycjach i zapisach;
• oferuje lepszą kompresję niż GIF (dla obrazów zawierających ponad 256 kolorów lub przezroczystości);
• może wyświetlać obrazy z płynnymi gradientami.

Wady PNG:

• ma większy rozmiar pliku niż JPG lub GIF, co może wpłynąć na czas ładowania i przepustowość strony;
• ma ograniczoną głębię kolorów, co może powodować powstawanie pasów na obrazach o płynnych gradientach.

Kiedy używać formatu PNG?

• dla obrazów wymagających przezroczystości lub kanału alfa (logo, ikony, nakładki, wycięcia itp.);
• dla obrazów zawierających tekst, logo, ikony, ilustracje lub proste grafiki z ostrymi krawędziami i jednolitymi kolorami (wykresy, diagramy, zrzuty ekranów);
• unikaj do zdjęć lub złożonych obrazów (z wieloma kolorami, szczegółami lub gradientami). 

GIF

GIF to kolejny format obrazu rastrowego, znany głównie z obsługi animacji. Może wyświetlić sekwencję klatek, tworząc efekt ruchu. Poza tym obsługuje przeplot (może wyświetlić wersję obrazu w niskiej rozdzielczości podczas ładowania wersji w pełnej rozdzielczości) i przezroczystość. 

Zalety używania GIF-ów:

• może tworzyć proste animacje lub efekty (banery, przyciski, moduły ładujące) bez konieczności stosowania wtyczek lub skryptów;
• może wyświetlać obrazy w jednolitych kolorach i prostych wzorach bez utraty jakości czy wprowadzania artefaktów;
• łatwo go utworzyć i edytować przy pomocy narzędzi lub usług online. 

Wady używania GIF-ów:

• format jest ograniczony do 256 kolorów (może skutkować słabą jakością lub rozmyciem);
• ma większy rozmiar pliku niż JPG lub PNG (negatywny wpływ na czas ładowania i przepustowość strony);
• nie obsługuje dźwięku i interaktywności.

Kiedy używać formatu GIF?

• do tworzenia krótkich, prostych animacji z kilkoma kolorami lub ramkami;
• do obrazów o jednolitych kolorach i prostych wzorach (np. logo, tekst lub kreskówka);
• unikaj w przypadku zdjęć lub złożonych obrazów (wiele kolorów, szczegółów, czy gradientów). 

WebP

Premiera formatu WebP miała miejsce w 2010 roku i od razu wyznaczyła nowy standard obrazów internetowych. WebP jest formatem obrazu rastrowego, który wykorzystuje kompresję stratną i bezstratną, animację i przezroczystość. Dzięki temu tworzy wysokiej jakości obrazy o mniejszych rozmiarach niż JPG, PNG czy GIF. Stosuje różne metody kompresji zależne od rodzaju i zawartości obrazu. Jeśli więc chcesz połączyć jakość z szybkością ładowania strony, postaw na WebP!

Zalety używania WebP:

• oferuje znacznie lepszą kompresję niż inne formaty;
• nadaje się do każdego rodzaju obrazu,
• może tworzyć wysokiej jakości obrazy z większą liczbą szczegółów, kolorów i gradientów, bez wprowadzania artefaktów, czy szumów.

Wady używania WebP:

• nie wszystkie przeglądarki, urządzenia i platformy obsługują tę funkcję w pełni (np. Safari);
• wymaga dodatkowych narzędzi lub wtyczek do tworzenia, edytowania i konwertowania obrazów WebP

Kiedy używać formatu WebP?

• do dowolnych typów obrazu internetowego;
• gdy zależy Ci na jakości i wydajności.

Podsumowanie

Znasz już największe wady oraz zalety poszczególnych rozszerzeń, ale nadal nie wiesz co wybrać? Skorzystaj z moich podpowiedzi:

• Do zdjęć i złożonych obrazów, które mogą być „ciężkie”, spokojnie wystarczy JPG
• PNG nada się do zdjęć i obrazów, które chcesz edytować bez utraty jakości
• GIF to oczywisty wybór dla prostych animacji.
• WebP będzie idealny do wysokiej jakości zdjęć, które nie będą obciążać Twojej strony internetowej.