- styczeń 2021
- marzec 2020
- luty 2020
- styczeń 2020
- wrzesień 2019
- sierpień 2019
- lipiec 2019
- czerwiec 2019
- maj 2019
- kwiecień 2019
- marzec 2019
- luty 2019
- styczeń 2019
- grudzień 2018
- listopad 2018
- październik 2018
- wrzesień 2018
- sierpień 2018
- lipiec 2018
- czerwiec 2018
- maj 2018
- kwiecień 2018
- marzec 2018
- luty 2018
- styczeń 2018
- listopad 2017
- październik 2017
- wrzesień 2017
- sierpień 2017
- lipiec 2017
- czerwiec 2017
- maj 2017
- kwiecień 2017
- marzec 2017
- luty 2017
Jak używać grafiki na Front-Endzie w 2019.
grafika performance
13/2/2019
Bartek Cis
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:
- Najważniejsze formaty graficzne w aplikacjach.
- Klasyczna optymalizacja grafiki.
- Format WebP czyli nadciągająca rewolucja.
- Techniki na redukcję transferu w aplikacji.
- 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 🙂
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?