Optymalizacja grafik w nowoczesnej aplikacji internetowej to podstawa. Dzisiaj opiszę kilka dobrych praktyk i jak warto do tego podejść w 2019.

Czego się dzisiaj dowiesz?

Będzie dużo o grafikach. Jakie są ich główne rodzaje, czego używać a czego nie warto w kontekście aplikacji internetowych. Dużo wartościowego materiału. Podzieliłem to na podrozdziały:

1. Najważniejsze formaty graficzne w aplikacjach.
2. Klasyczna optymalizacja grafiki.
3. Format WebP czyli nadciągająca rewolucja.
4. Techniki na redukcję transferu w aplikacji.
5. Automatyzacja pracy z grafiką czyli przydatne serwisy online.

Dlaczego to piszę?

Jeśli czytasz tego bloga regularnie to zauważyłeś/aś, że początek tego roku stoi pod znakiem Web Performance.

Sam bardzo lubię grafikę i często bawię z wektorami dlatego uporządkowanie tego tematu w jednym wpisie sprawia mi sporą przyjemność 🙂 Jest to bardzo przydatne bo każdy Web Developer styka się z grafikami regularnie.

Najważniejsze formaty graficzne w aplikacjach

Zacznijmy od wymienienia tego z czym masz najczęściej do czynienia.

JPG/JPEG

Najczęściej spotykana forma grafiki rastrowej. Musi mieć określoną rozdzielczość czyli bawimy się z pixelami. Najlepiej nadaje się do obrazów “rzeczywistości” czyli zdjęć. Jeśli chodzi o software to królem JPGów jest Photoshop.

PNG

Następna forma grafiki rastrowej. W tym formacie warto zapisywać obrazy nie ukazujące rzeczywistości stworzone na komputerze gdzie gama kolorów jest zazwyczaj uboższa. Tu też jest królestwo Photoshopa.

Nie zawsze jest takie proste stwierdzić czy lepiej użyć PNG czy JPG. Chodzi o zachowanie jakości przekazu i oszczędność transferu. Trzeba to przetestować.

SVG

Jest to kolejna forma grafiki. Tym razem inna bo wektorowa tzn. nie ma określonej rozdzielczości. Poświęciłem jej oddzielny oddzielny wpis w którym wchodzę w szczegóły.

Dla mniej wprawnego oka może wyglądać tak samo jak PNG. SVG jest jednym z filarów “Flat Design” i pozwala na tworzenie ciekawych interakcji i animacji.

Jeśli masz do czynienia ze skomplikowaną grafiką SVG to zastanów się czy nie warto przekonwertować jej do PNG. Zaoszczędzisz na rozmiarze pliku.

GIF

Jest to grafika składająca się z wielu “klatek” które mają nadać dynamikę i imitować formę video. Google Speed Test ma nawet dedykowany akapit w który wyświetla jeśli znajdzie na stronie GIFa. Bardzo ich nie lubi bo dużo ważą.

Jeśli jednak masz gifa którego koniecznie chcesz użyć to przekonwertuj go do MP4. TUTAJ masz link do bardzo fajnego narzędzia online.

Encoded Graphics

Każdą z grafik można przekonwertować na ciąg znaków używając np. URL Encoding lub Base64 Encoding. Wtedy ten kod można umieścić wewnątrz drzewa DOM lub CSSOM.

Nasz oryginalny kod znacząco traci wtedy na czytelności. Poza naprawdę specyficznymi sytuacjami pytanie jest czy warto się w to bawić? Ta technika zdaje się powoli ginąć w odmętach dziejów i jest obecnie wręcz określana jako anty-wzór.

Klasyczna optymalizacja grafiki

To skoro już się orientujesz w podstawowych formatach graficznych to zastanówmy się jak można je optymalizować.

Zrozum pojęcie rozdzielczości

Jeśli jesteś Front-End Developerem to nie trzeba Ci tego tłumaczyć. Dobre orientowanie się w rozdzielczościach ekranów i tego jakie grafiki “wystarczą” aby osiągnąć dany cel pozwoli Ci na tworzenie wydajniejszych aplikacji.

Przeczytaj sobie TEN artykuł o rozdzielczościach. Polecam.

Jaki masz cel?

Poza rozdzielczością do gry wchodzi też jakość grafiki. Jeżeli np. coś i tak ma być pokryte “półprzezroczystym” czarnym, białym, kolorowym tłem to czy na pewno grafika musi być w najwyższej jakości?

Ludzkie oko i tak najczęściej nie zauważy różnicy a Ty oszczędzisz sporo KB.

Retina

Kiedy Apple wprowadził ten rodzaj wyświetlaczy kilka lat temu nagle pojawiły się techniki jak optymalizować grafiki pod tym kątem. Jeśli chcesz to TUTAJ możesz przeczytać bardzo fajny artykuł o tym.

Pytanie brzmi na ile optymalizacja pod Retine ma dzisiaj sens?

Narzędzia do optymalizacji Grafik

Jeśli używasz Webpacka, Gulpa lub jakiegoś CLI to możesz mieć narzędzie które automatycznie będzie optymalizowało wszystkie grafiki w projekcie. Pytanie jednak czy ta optymalizacja jest rzeczywiście optymalna?

Jakiś czas temu gdy używałem Gulpa zauważyłem, że ichniejszy moduł image-min kompresuje obrazy znacznie gorzej niż narzędzia online. Wiadomo, że algorytmy są ciągle ulepszane ale czasem warto po prostu sprawdzić co się lepiej opłaca.

Optymalizacja online – PNG i JPG

Jeśli chcesz użyć narzędzi online to spróbuj np. TEGO lub TEGO. Na Świecie też poleca się Squoosh’a. Hehe muszę wybrać jakieś najlepsze i się go trzymać…

Na JPG można zaoszczędzić do 10% rozmiaru natomiast przy PNG nawet ponad 50%.

Optymalizacja online – SVG

Tu też możemy sporo ugrać i zredukować rozmiar pliku. Ja lubię TO narzędzie.

Format WebP czyli nadciągająca rewolucja

Niezależnie ile się natrudzisz z optymalizacją to i tak przegrasz z tym co przygotowało dla Nas Google tzn. nowy format kompresji grafiki dla sieci. Mowa o WebP.

Ta technologia jest obecna od jakiegoś czasu ale Google postanowiło ją popularyzować poprzez swoje Speed Testy. Jeśli Twoje grafiki nie są w WebP to dostaniesz niski wynik w audycie. Różnica jest naprawdę duża bo JPG o wadze 300KB może się zamienić w WebP ważący 100KB. Wręcz rewolucja.

W użyciu na Froncie w obsłudze są takie w same jak JPG czy PNG. Są jednak dwie kwestie które trzeba mieć na uwadze…

WebP nie edytuje się w programach graficznych

Pewnie główne programy do grafiki powoli będą wspierać WebP ale na początku 2019 to jeszcze nie jest standardem. Chyba, że masz jakieś specjalne wtyczki.

Należy więc przygotować te grafiki w standardowy sposób a następnie przekonwertować do WebP. Można to zrobić np. TYM lub TYM narzędziem online.

Cross-browser Compability

Niestety poza Chrome żadna z głównych przeglądarek nie wspiera jeszcze WebP. Podobno Firefox i Safari zapowiadają wsparcie w 2019. Oby to przyszło jak najszybciej 🙂

Techniki na redukcję transferu w aplikacji.

Nawet jeśli użyjesz najlepszej kompresji jest jeszcze kilka sztuczek które możesz wykonać żeby przyspieszyć aplikację i zredukować ilość transferu.

Kompresja GZIP i BROTLI

Jeśli Twój serwer nie ma włączonej kompresji danych to to zrób. Są dwa podstawowe rodzaje kompresji danych GZIP i BROTLI. W tym artykule jest porównanie dwóch.

Z powyższego artykułu wynika, że BROTLI w ogóle nie działa na grafiki więc mamy z głowy. Wiele osób też kwestionuje czy GZIP ma pozytywny wpływ na grafiki jako takie. Szczerze mówiąc nie przyglądałem się temu z bliska…

Lazy Loading

Ta technika zapobiega blokowaniu renderowania strony zanim wszystkie grafiki w drzewach DOM i CSSOM nie zostaną pobrane. Po prostu ładuje się to co jest w danej chwili potrzebne a później w razie potrzeby przeglądarka pobiera resztę grafik. Napisałem o tym oddzielny, dość obszerny artykuł.

Responsive Images

W końcu będzie trochę prostego kodu 🙂 W tej metodzie ładowane są inne grafiki w zależności od rozdzielczości ekranu. Logicznym jest, że komórki nie potrzebują wielkich grafik HD tak jak duże monitory. Im grafika większa tym ma większą wagę (no chyba, że SVG). Rozpatrzę dwa przypadki.

Grafiki z DOM

Czyli ładowane za pomocą HTML i tagu img. W tej technice użyjesz też semantycznego tagu picture. Wygląda to tak:

<picture>
    <source srcset="/media/image-desktop.png" media="(min-width: 1440px)">
    <source srcset="/media/image-laptop.png" media="(min-width: 600px)">
    <img src="/media/image-mobile.png" />
</picture>

Jak widać jest to bardzo proste. Przygotowujesz 3 wersje tej samej grafiki o różnych rozdzielczościach. HTML robi resztę roboty za Ciebie 🙂 Przeglądarka ładuje to co chcesz i kiedy chcesz.

Grafiki z CSSOM

Jeśli obrazy definiowane są z poziomu CSS wystarczy użyć standardowe @media-query:

.image {
    background-image: url('/media/image-mobile.png');
    @media (min-width: 600px) {
        background-image: url('/media/image-laptop.png');
    }
    @media (min-width: 1440px) {
        background-image: url('/media/image-desktop.png');
    }
}

Prawda, że banalnie proste?

Jeśli chcesz ułatwić sobie tworzenie responsywnych grafik to spróbuj TEGO narzędzia. Miodzo 🙂

Automatyzacja pracy z grafiką czyli przydatne serwisy online

Są też serwisy które nam pomagają zautomatyzować pracy z grafiką. Dokonują one większości z opisanych wyżej optymalizacji i hostują nasze grafiki. Warto się nimi zainteresować:

Cloudinary

Jeśli zarejestrujesz się przez ten link wesprzesz moją działalność 🙂 Dostanę trochę transferu i będę mógł tworzyć dla Ciebie jeszcze lepsze materiały.

ImageKit

Ten ma bardzo fajne opcje jeśli chcesz używać placeholderów LQIP przy lazy-loading.

Podsumownie

To by było na tyle jeśli chodzi o dzisiejszy wpis. Mam nadzieję, że był przydatny i rozjaśnił Ci trochę temat pracy w grafikami w aplikacjach.

Jeśli uważasz, że popełniłem gdzieś jakąś gafę lub znasz jakieś inne fajne sposoby na poprawę wydajności związane bezpośrednio z grafiką to napisz w komentarzu. Do następnego 🙂

Bartek Cis

Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?