Formaty plików graficznych w UI 🏞

Czym w ogóle jest format plików? 🤔

Format plików można określić jako: standard zapisu informacji w pliku komputerowym. Brzmi strasznie, ale podobnie jak język pisany (np. polski, czy angielski), format pliku jest dla programów komputerowych pewnym ustalonym zbiorem zasad określającym, w jaki sposób daną informację odczytać lub zapisać tak, aby była ona, zrozumiała również dla innych.

Programy do edycji kodu (jak np. VSCode) oraz przeglądarki internetowe (jak np. Firefox) są w stanie "zrozumieć" zawartość plików takich, jak chociażby JavaScript (.js). Te pierwsze pozwalają go sprawnie edytować, dzięki odpowiedniemu kolorowaniu składni, w przeciwieństwie do programów typu notatnik. Te drugie pozwalają z kolei na jego uruchomienie. Edytor kodu poradzi sobie także z plikiem TypeScript (.ts), jednak dla przeglądarki będzie on już "niezrozumiały". Analogicznie jest z plikami graficznymi. Format taki jak .jpg jest "zrozumiały" dla Figmy, VSCode’a, czy np. Firefoxa. Oznacza to, że programy te znają ten standard i potrafią odczytać zawartość pliku w nim zapisaną, a niektóre z nich (Figma) potrafią także zapisać informacje w takim formacie (a mówiąc prościej: po prostu tworzyć i edytować pliki JPG).

Formaty plików mogą zawierać dane różnego typu, a także dane tego samego typu, np. .docx, .doc oraz .pages służą do zapisywania biurowych dokumentów tekstowych. Pliki w formacie .jpg, .png czy .webp są przeznaczone dla grafiki rastrowej itp. Zdjęcie zapisane w formacie .jpg pozornie może wyglądać tak samo, jak w formacie .webp, ale ich standard zapisu jest zupełnie inny, co wpływa m.in. na rozmiar pliku.

Grafika rastrowa vs grafika wektorowa 🖋

Współcześnie wszystkie elementy interfejsu, jeśli tylko są obrazkami (i nie są zdjęciami) powinny być wektorowe. Może się to wydawać oczywiste, ale kiedyś ozdobniki, które "wycinało" się z plików Photoshopa w postaci rastrowej były czymś powszechnym na stronach internetowych.

Jednak czym się różni jedno od drugiego? Grafika rastrowa jest typem grafiki, w której każdy pixel, będący najmniejszą składową obrazu jest opisany za pomocą nasycenia barw RGB (red, green, blue). Mozaika złożona z ogromnej ilości pixeli w odpowiedniej odległości staje się ostrym obrazem. Z kolei grafika wektorowa polega na zapisie matematycznym figur geometrycznych w układzie współrzędnych. Pliki z grafiką wektorową w uproszczeniu można traktować jako instrukcje dla komputera, w jaki sposób ma narysować daną grafikę. Np. "narysuj kółko w kolorze czarnym o średnicy 25, którego środek znajduje się w punkcie 50,50" itd.

Niewątpliwą zaletą grafiki wektorowej jest to, że niezależnie od wielkości wyświetlanego obrazu zawsze jest on idealnie ostry i zajmuje tyle samo miejsca na dysku. Formaty te jednak na chwilę obecną nie nadają się do zdjęć, które charakteryzują się ogromną dywersyfikacją kolorów i kształtów, przez co zapis matematyczny figur geometrycznych staje się dużo bardziej skomplikowany niż zapis w postaci siatki pixeli.

SVG, czyli król formatów graficznych w UI 👑

Wśród wielu formatów wektorowych w zasadzie jedynym stosowanym na potrzeby interfejsów użytkowników jest format .svg (Scalable Vector Graphics). Ze względu, że jest to grafika wektorowa, pliki SVG są relatywnie bardzo niewielkich rozmiarów.

Format ten podobnie jak język HTML należy do rodziny XML i może być z nim integrowany, co czyni go bardzo intuicyjnym dla developerów oraz pozwala na edycję obrazu i różnego rodzaju interakcje z poziomu kodu. Obrazy SVG można umieścić w kodzie HTML za pomocą znacznika <img> podając w atrybucie src ścieżkę do pliku, albo bezpośrednio osadzić w elemencie <svg>.

1<!-- #1 -->
2<img src="./circle.svg" alt="" />
3
4<!-- #2 -->
5<svg viewBox="0 0 100 100">
6  <circle cx="50" cy="50" r="25" fill="black" />
7</svg>

Dzięki podejściu numer dwa możemy manipulować elementami, dodawać do nich klasy, animować je, dodawać nasłuchiwanie zdarzeń za pomocą JS-a itp.

1<svg viewBox="0 0 100 100">
2  <circle class="my-circle" cx="50" cy="50" r="25" />
3</svg>
4
5<style>
6  .my-circle {
7    fill: black;
8  }
9</style>
10
11<script>
12  const circle = document.querySelector(".my-circle")
13  circle.addEventListener("click", () => {
14    circle.style.fill = "red"
15    console.log("circle clicked")
16  })
17</script>

Format SVG to naprawdę wiele ciekawych możliwości, dlatego chciałbym mu poświęcić w przyszłości cały, osobny wpis.

Oldschoolowy GIF ✨

GIF (Graphics Interchange Format) to format, który wydawałoby się, że powinien czasy swojej świetności mieć już dawno za sobą, jednak wciąż jest nieodłącznym elementem internetu, przewijającym się w milionach konwersacji tekstowych w postaci krótkich, zabawnych animacji klatkowych.

Jeśli jednak chodzi o UI, to jest to już zdecydowanie pieśń przeszłości. Możliwości, jakie kiedyś go wyróżniały, zastąpiły lepsze technologie i narzędzia. Animacje to dzisiaj domena CSS-a, JS-a i SVG, kanał alfa występuje w innych formatach, które nie mają tak dużych ograniczeń w zakresie koloru, jak GIF (maksymalnie 256 na jeden blok).

Klasyka gatunku: JPEG & PNG 🎩

Tych formatów prawdopodobnie nie trzeba nikomu przedstawiać. Dominowały przez lata i pewnie jeszcze szybko nie znikną ze stron oraz aplikacji webowych i mobilnych. Jeden i drugi dotyczy grafiki rastrowej, jednak mają względem siebie kilka istotnych różnic.

JPEG

Joint Photographic Experts Group to tak naprawdę format plików graficznych i algorytm kompresji. Jedną z jego głównych cech, która sprawiła, że stał się on tak powszechnie wykorzystywany, jest możliwość zastosowania kompresji stratnej.

Kompresja bezstratna to taka, która pozwala zapisać informacje w sposób, dzięki któremu zajmują mniej przestrzeni dyskowej, ale z możliwością odtworzenia do postaci pierwotnej. Z kolei kompresja stratna pozwala zmniejszyć objętość pliku bezpowrotnie, usuwając z niego część mniej istotnych dla odbioru danych. I tak w przypadku JPEG możemy kosztem jakości obrazu zmniejszyć jego wagę. Z oczywistych względów kompresja stratna daje dużo lepsze efekty, jeśli chodzi o pomniejszanie plików. W sytuacjach, kiedy mamy do czynienia np. ze zdjęciem w tle, jego niewielkie skompresowanie stratne może przynieść znaczące efekty w zakresie optymalizacji, jednocześnie w bardzo niewielkim stopniu wpływając na odbiór wizualny.

Jedną z największych zalet i innowacji JPEG była możliwość kontroli stopnia kompresji, co pozwalało na ustawienie odpowiedniego kompromisu pomiędzy jakością i wagą dla danego obrazu.

PNG

Portable Network Graphics to następca gifa. Wyposażony jest wyłącznie w mechanizm bezstratnej kompresji, co oznacza, że format PNG nie umożliwia zmniejszenia wagi pliku kosztem jakości tak jak wspomniany wcześniej JPEG.

Format ten przez lata świetnie nadawał się do obrazków rastrowych, których pogorszenie jakości mogło wpływać na czytelność. Np. screenshoty z tekstem, rysunki techniczne itp.

Nowoczesne formaty 🚀

JPEG, PNG oraz GIF przez lata dominowały w internecie i w aplikacjach mobilnych. Jednak w ostatnim czasie przeglądarka Safari (od wersji 14) zaczęła wspierać format WebP, dzięki czemu format ten wspierany jest już przez wszystkie współczesne przeglądarki internetowe. A już za technologicznym rogiem czyha kolejny, jeszcze skuteczniejszy format, czyli AVIF.

WebP

Rozwijany przez Google nowoczesny format grafiki rastrowej, który wyposażony jest w bardzo wydajne algorytmy kompresji stratnej oraz bezstratnej i posiadający kanał alfa to w zasadzie swoiste połączenie zalet JPEG, oraz PNG i do tego na sterydach.

Dzięki zastosowanym algorytmom kompresji można uzyskać obrazy o tej samej jakości w rozmiarze około 20 - 35% mniejszym niż JPEG/PNG.

Obrazy w formacie .webp, mogą już być również wykorzystywane w natywnych aplikacjach mobilnych na systemy Android oraz iOS.

Jednym z utrudnień jest, na razie ograniczone wsparcia wśród programów graficznych. Na chwilę obecną z trójki: Sketch, Figma oraz Adobe XD, to jedynie Sketch w pełni natywnie wspiera import oraz eksport plików w formacie .webp.

AVIF

Czyli AV1 Image File Format to całkiem świeży format, który charakteryzuje się świetną kompresją. Został on stworzony przez Alliance for Open Media, konsorcjum, w skład którego wchodzą firmy takie jak Amazon, Apple, Adobe, Cisco, Facebook, Google, IBM, Intel, Microsoft, Mozilla czy Netflix. Pełna lista tutaj.

Format ten nie ma sobie równych, jeśli chodzi o poziom kompresji. Jako przykład posłużyło zdjęcie wykonane iPhonem SE, przekonwertowane z domyślnego formatu .heic na JPEG (jakość 80%), a potem przekonwertowane na .webp oraz .avif.

Porównanie tego samego obrazka w różnych formatach:

Różnice te mogą być zgoła inne dla różnych obrazków i poziomu kompresji. Podczas moich testów czasami różnice między WebP a AVIF były znikome, a czasami nawet przy kompresji bezstratnej wynik był lepszy dla WebP. Jednak w przedziałach najczęściej wykorzystywanych, oferujących dobry kompromis pomiędzy jakością a wagą (około 80%) AVIF wyraźnie wyprzedza konkurencje. Czasami nawet przy bardziej złożonych plikach wektorowych ich waga może być większa w SVG!

Pomimo że na chwilę obecną wspierają go wyłącznie przeglądarki takie jak Chrome, Opera i Firefox (ten ostatni po ręcznym aktywowaniu w konfiguracji), to perspektywy są dość optymistyczne i całkiem prawdopodobne, że format ten w przyszłości zastąpi wymienione wcześniej formaty rastrowe.

Formaty graficzne w 2021 roku 🌌

Obecnie (jeśli możemy zignorować wsparcie dla IE11) dwa wystarczające formaty to WebP dla zdjęć oraz SVG do grafiki wektorowej. Wszystkie współczesne przeglądarki oraz systemy operacyjne radzą sobie wyśmienicie z tymi formatami i spełniają one praktycznie wszystkie zadanie na potrzeby interfejsów użytkowników stron, oraz aplikacji webowych i mobilnych.

Zawsze jednak możemy posłużyć się znacznikiem <picture>, za pomocą którego możemy ustawić kilka źródeł obrazka.

1<picture>
2  <source srcset="./photo.avif" type="image/avif" />
3  <source srcset="./photo.webp" type="image/webp" />
4  <img src="./photo.jpg" alt="" />
5</picture>

Przeglądarka wykorzysta plik .avif jeśli wspiera ten format, w przeciwnym wypadku spróbuje z .webp, a jeśli jego również nie potrafi wykorzystać to zostanie załadowany fallback w postaci pliku .jpg. Istnieją sposoby, aby ten proces częściowo zautomatyzować i niektóre technologie oferują narzędzia, które przygotowują dodatkowe formaty na podstawie jednego pliku źródłowego.

• Gatsby
• Next.js
• Nuxt
• Timber