Formaty plików graficznych i optymalizacja do internetu

środa, 2018-06-205069Internet, Grafika

Od początku istnienia komputerów powstało bardzo wiele formatów zapisu grafiki (wystarczy zobaczyć, ile rozpoznają popularne przeglądarki graficzne np. ACDSee czy IrfanView). Większość z nich nie przetrwało próby czasu, nieliczne zadomowiły się na dobre.

Obecnie liczy się w zasadzie kilkanaście formatów rastrowych i wektorowych, na tyle uniwersalnych, że większość oprogramowania bez problemu je obsługuje. Chociaż każdy program ma swój własny wewnętrzny format, to w zasadzie standardem są tylko te od firmy Adobe czyli AI, PSD, EPS, PDF.

Chyba wszyscy wiedzą, czym się różni grafika rastrowa od wektorowej, ale dla zaczynających przygodę z grafiką, kilka słów wyjaśnienia:

Grafika rastrowa, inaczej bitmapa, jest zbiorem punktów ułożonych obok siebie (pikseli), dokładnie tak samo jak piksele w telewizorze czy matrycy aparatu fotograficznego. Bitmapami są zdjęcia i inne skomplikowane rysunki malowane cyfrowo.
Grafika wektorowa, jak sama nazwa wskazuje, składa się z matematycznie opisanych figur. Oczywiście nie są to proste odcinki (wektory znane ze szkoły), mogą to być także tzw. krzywe Beziera o dosyć skomplikowanych kształtach. Mogą mieć wypełnienie, także gradientowe, generalnie wszystko to, co da się opisać jakimś algorytmem. Wektorowe są fonty, wiele ikon i loga (tylko nie czepiajcie się, że „logo” się nie odmienia).

Formaty wektorowe

Do niedawna w internecie rzadko używane, obecnie już każda przeglądarka radzi sobie z SVG. Za to do druku jest to podstawa - loga, ikony, tekst, ogólnie elementy graficzne które można bezstratnie pomniejszać i powiększać. Wektorowo maluje się raczej trudno, ale są zapaleńcy, którzy robią naprawdę genialne rzeczy. Tylko po co?

AI - natywny format Adobe Illustratora. Chociaż daje się go otworzyć w programach innych producentów (dotyczy to raczej starszych wersji), to najlepiej współpracuje z softem od Adobe (np. Photoshop czy InDesign). Inaczej należy się liczyć z utratą pewnych informacji.
CDR - plik programu Corel Draw. Jest to w zasadzie odpowiednik AI w programach Corela, dlatego otworzenie go w Illustratorze także jest ryzykowne, chociaż starsze wersje daje się otworzyć.
EPS (Encapsulated PostScript) - nieco bardziej uniwersalny format oparty na języku PostScript, chociaż również opracowany przez firmę Adobe. Służy raczej do przenoszenia grafiki między różnymi programami (np. między Corelem i Illustratorem). Podczas projektowania jednak lepiej trzymać się wewnętrznego formatu danego programu, a do druku oddawać PDF-y.
PDF (Portable Document Format) - uniwersalny, przenośny format dokumentów. Gwarantuje, że na każdym komputerze i w każdym czytniku będzie wyświetlony tak samo. Nie mówiąc już o drukarniach, gdzie PDF jest często jedynym formatem, jaki akceptują. Wyjątkiem tutaj jest Corel Draw (przynajmniej starsze wersje, najnowszych nie znam), który potrafi rozsypać plik PDF i narobić tym niezłego zamieszania. Ale jak ktoś wie, na co uważać, to da sobie radę.
WMF (Windows Metafile Format) - format graficzny stosowany w systemach Windows, najczęściej w programach pakietu Office. Jest to dosyć stary format z wieloma brakami (np. nie ma krzywych i wszelkie łuki zamieniane są na szereg odcinków, do często powoduje zniekształcenie obrazu, zwłaszcza małego).
SWF to w zasadzie animacja Flash, ale często była wykorzystywana (czasem wręcz nadużywana) do wyświetlania statycznych grafik np. wykresów oraz animacji, bo była dużo lżejsza od analogicznego GIF-a. SWF daje duże możliwości animacyjne, można go też oprogramować przy pomocy języka ActionScript. W internecie już dawno nie ma miejsca na Flasha, głównie ze względu na brak jego obsługi na urządzeniach mobilnych i problemów z responsywnością. Desktopowe przeglądarki też robią mu coraz więcej problemów. W świecie poza internetem na wciąż sporo zastosowań np. interaktywne prezentacje czy filmy animowane.
SVG (Scalable Vector Graphics) - został stworzony już ponad 10 lat temu z myślą o zastosowaniu na stronach www, jednak do niedawna jeszcze nie wszystkie przeglądarki go interpretowały, więc elementy wektorowe (np. schematy czy wykresy) albo zamieniało się na rastrowe (GIF) lub flash (SWF). Obecnie nie ma już z nim problemu i można go używać bez obaw. Poprawnie radzi sobie z nim większość programów. Tak naprawdę to nie jest stricte grafika tylko specyficzną odmianą formatu XML, a co za tym idzie istnieje niebezpieczeństwo ataków hackerskich specjalnie spreparowanym plikiem.
Font Awesome - nie jest to format graficzny a zwykły font, w którym autor zebrał setki najpopularniejszych ikonek i symboli. Jest chętnie wykorzystywany w aplikacjach i serwisach internetowych (jest też częścią mojego CMS-a). Dzięki niemu nie trzeba tworzyć własnych plików z najczęściej używanymi ikonami, a jego obsługa jest banalnie prosta, nawet przy wykorzystaniu samego arkusza styli CSS.

Formaty rastrowe

W zasadzie każdy z popularnych formatów ma inne możliwości i lepiej nadaje się do przechowywania innego typu danych. Ma to zwłaszcza znaczenie w przypadku internetu, gdzie istotna jest waga pliku i jej stosunek do jakości wyświetlanej grafiki. Serwisy internetowe coraz częściej przeglądane są na urządzeniach mobilnych, gdzie płaci się za czas połączenia lub ilość pobranych danych.

PSD (Photoshop Document) - to natywny format Photoshopa (jego nowsza odmiana PSB może przechować powyżej 2GB danych). Można w nich zapisać wszystko co da się zrobić w Photoshopie np. warstwy dopasowania czy obiekty i filtry inteligentne. Niestety w innych programach (czy nawet wcześniejszych wersja Photoshopa, których ich nie obsługuje) te informacje zostaną utracone.
TIF, TIFF (Tagged Image File Format) - jest to format kompresowany bezstratnie, często więc używany jako plik produkcyjny do druku, zwłaszcza wielkoformatowego. Obsługuje RGB, CMYK, przechowuje ścieżki i kanały alfa. Można w nim zapisywać warstwy, jednak nie każdy program sobie z tym poradzi, dlatego roboczo lepiej trzymać się PSD.
JPG, JPEG (Joint Photographic Experts Group) - jeden z najpopularniejszych formatów wykorzystywanych w internecie i nie tylko. Idealny do zdjęć. Za to jego kompresja, chociaż bardzo dobra, jest zawsze stratna. Oznacza to, że po otworzeniu pliku NIGDY nie otrzymamy tego, co było zapisaliśmy. W zależności od stopnia kompresji wokół ostrych krawędzi pojawią się mniejsze lub większe artefakty. Także gładkie jednokolorowe tło nigdy nie będzie naprawdę jednolite. Używany jako plik wejściowy ze względu na bardzo wysoką kompresję (z aparatu lub pobierany ze Stocków) i wyłącznie jako wyjściowy (do druku lub internetu). Nie nadaje się jako plik roboczy, bo przy każdym zapisie straty informacji będą coraz większe. Ponadto nie da się w nim zapisać warstw, ale ścieżki wektorowe czy przestrzeń CMYK jak najbardziej.
GIF (Graphics Interchange Format) - używany głównie do prostych grafik np. ikonek o ograniczonej ilości kolorów (do 256) oraz prostych i krótkich animacji (przy większej ilości klatek ciężar pliku drastycznie rośnie). Ze względu na ograniczenie kolorów widoczny jest tzw. dithering czyli sztuczne zaszumienie. Jeden kolor z palety można przeznaczyć na przezroczystość, niestety nie jest to prawdziwy kanał alfa, więc przy bardziej skomplikowanych kształtach może się pojawić efekt aureoli, zwłaszcza gdy oryginalne tło było np. jasne a tło, na którym wyświetlana jest grafika - ciemne. Obecnie poza prostymi animacjami wyparty przez PNG i SVG.
PNG (Portable Network Graphics) - jako format nieobarczony patentami już dawno miał się stać następcą GIF-a, jednak nigdy jeszcze nie spotkałem się z przypadkiem, żeby ktoś zamknął stronę internetową za używanie GIF-ów. Format ten ma kompresję bezstratną, więc zawsze odczytamy to, co zapisaliśmy, niestety kosztem wielkości pliku, dlatego niezbyt nadaje się do zdjęć. Posiada prawdziwy kanał alfa z 256 poziomami przezroczystości. Do niedawna PNG nie był zbyt popularny (zwłaszcza w przypadku grafik z przezroczystością) ze względu na to, że Internet Explorer nie najlepiej sobie z tym radził. Obecnie nie ma już tego problemu, często jest więc stosowany do elementów layoutu lub ikonek.
BMP - używany w zasadzie tylko w systemach Windowsa i nie nadaje się raczej do niczego. Wielki i niezgrabny :)

Kilka przykładów użycia popularnych formatów graficznych

Pliki JPG w maksymalnej (90% - 227kB) i minimalnej (10% - 35kB) jakości - porównaj artefakty spowodowane kompresją:

Pliki GIF w 256 kolorów (361kB) i 16 kolorów (128kB) - porównaj widoczność ditheringu:

Pliki GIF i PNG na przezroczystym tle. Najedź kursorem myszy i sprawdź efekt aureoli na innym tle:

przezroczystość GIF - 5kB

przezroczystość PNG - 6kB

Jak wykorzystać znajomość formatów?

Wydawałoby się, że w dzisiejszych czasach optymalizacja grafiki nie ma znaczenia. W końcu większość użytkowników ma szybki (lub bardzo szybki) internet. Nic bardziej mylnego. Coraz więcej osób przegląda internet na komórkach, a tu jeszcze często płaci się za czas połączenia lub za ilość pobranych kilobajtów. Co więcej, Google ogromną uwagę zwraca na szybkość ładowania strony i jej ciężar - ma do duży wpływ na pozycję w wynikach wyszukiwania.

Podczas eksportu z Photoshopa (lub innych programów) porównuj wyjściowy ciężar plików (takie informacje są zazwyczaj wyświetlane) i wybierz najlepszy format i wielkość kompresji. Eksperymentuj. W przypadku małych ikonek GIF może sprawdzić się lepiej niż PNG, którego główną zaletą jest pełen kanał alfa i brak ograniczenia do 256 kolorów.
JPG zazwyczaj najlepiej sprawdza się do zdjęć. Optymalny stosunek jakości do ciężaru pliku jest dla Quality około 70%.
Podczas eksportu do GIF-a zmniejszaj ilość kolorów tak długo, dopóki grafika wciąż jest czytelna. W niektórych przypadkach (grafiki o małym kontraście) można bez problemu zmniejszyć ich ilość z 256 do 64 bez widocznej utraty jakości za to z dużym zyskiem na wielkości plików. Brakujące kolory zostaną zastąpione przy pomocy tzw. ditheringu. Osobiście stosuję zasadę ograniczyć nieco ilość kolorów niż grafika ma w rzeczywistości np. dla 150 kolorów ograniczam do 128 i jest OK.
Jeśli nie pasuje Ci Font Awesome, to ikonki zapisuj w formacie PNG albo jeszcze lepiej SVG.
Jeśli tworzysz buttony, nie projektuj całego przycisku, tylko samą ikonkę jako PNG lub SVG, a tło zrób przy pomocy CSS. Dzięki temu łatwo zmienić kolorystykę serwisu bez ponownego generowanie grafik.
Do druku Banera możesz oddać TIFF lub JPG z minimalną kompresją. Różnice w druku niezauważalne za to w wielkości plików znaczne.
Do druku zwykłych materiałów poligraficznych ZAWSZE przygotowuj PDF. Co prawda drukarz Cię nie zabije za JPG (kasa jest kasa - klient płaci, klient wymaga), ale też nie ręczy za efekt finalny. Możesz się bardzo zdziwić tym, co otrzymasz.
W przypadku tekstury tła (zdarzają się jeszcze strony, których autorzy na przekór czytelności, wrzucają w tło grafikę) warto spreparować powtarzający się kawałek - kafelek - i wypełnić nim stronę. Oczywiście powinna to być grafika bezszwowa (ang. seamless), której brzegi powinny do siebie pasować. Wrzucanie gigantycznej tapety z Windowsa mija się z celem i to bardzo.

Na koniec kilka ciekawostek dla śmiechu i nie tylko

Dawno temu jeden z moich byłych klientów zapragnął mieć w nagłówku nieco animacji i z powodu oszczędności postanowił zrobić to samemu. Flash był jeszcze na porządku dziennym, ale on wybrał GIF-a (pewnie ze względu na brak oprogramowania). Dzięki temu sam prosty nagłówek ważył prawie 10MB. Nie zazdroszczę jego klientom, zwłaszcza tym, którzy płacili krocie za połączenie modemowe.
Sytuacja z pewnością doświadczona przez wielu z nas. Prosimy klienta o logo i dostajemy marnego JPG-a ściągniętego ze strony. Prosimy więc o format wektorowy i... otrzymujemy plik CDR z osadzonym powyższym JPG-iem. Kiedyś zdarzało mi się to średnio raz w miesiącu mimo iż dokładnie opisywałem, o co mi chodzi i dlaczego bitmapa osadzona w Illustratorze nie staje się automatycznie wektorowa. Obecnie klienci są chyba bardziej wyedukowani.
Innym razem dla odmiany dostałem logo w całości zaprojektowane w Wordzie. I nie był to jakiś osadzony WMF czy bitmapa, tylko precyzyjnie wycyzelowana robótka z użyciem WordArtów, fontów, które posiadał tylko klient i oczojebnych kolorów, których nawet Word nie wydrukuje. Coś takiego potrafi się posypać na innym komputerze z inną wersją Worda, nie mówiąc już o LibreOffice.
Za to kiedy potrzebuję zwykłego zdjęcia, to bardzo często plik JPG dostaję w dokumentach Office-a. Nie dość, że Klient traci czas na wciągnięcie tego do dokumentu, to ja potem muszę to wyciągać. Na szczęście współczesne formaty DOCX pozwalają to zrobić w miarę szybko :)