Dlaczego powinienem się tym przejmować?
Warto sobie zadać pytanie: "Dlaczego warto zadbać o rozmiar naszych grafik?". Odpowiedź jest dość prosta. Zaowocuje to przede wszystkim w szybszym ładowaniu strony oraz mniejszym zużyciem transferu na naszym serwerze. Należy również wspomnieć, że prędkość wczytywania strony jest jednym z istotniejszych czynników branych pod uwagę przez Google podczas generowania wyników wyszukiwania.
Po pierwsze: rozdzielczość!
Częstym błędem popełnianym przez początkujących jest wstawianie grafik w oryginalnej rozdzielczości. Jest to zupełnie pozbawione sensu, ponieważ grafika jest wtedy przez przeglądarkę automatycznie skalowana, a nie wynika z tego żadna wyższa jakość obrazu. Jaki w takim razie powinien być rozmiar grafiki? Najbardziej optymalnie jest kierować się wymiarami w jakim grafika jest wyświetlana w przeglądarce. Innymi słowy starać się, by przeglądarka nie musiała skalować grafiki i mogła wyrenderować ją w rozmiarze natywnym.
W przypadku stron responsywnych pewną trudnością może być zorientowanie się jaki rozmiar zastosować. Wynika to z faktu, że na każdym urządzeniu grafiki mogą mieć różne wielkości. Wtedy należy ocenić w jakiej maksymalnej rozdzielczości dany obrazek będzie wyświetlany i do takiego rozmiaru ją zeskalować w ulubionym programie graficznym np. w Photoshopie lub darmowym GIMP-ie.
Według statystyk serwisu ranking.pl najwyższą, mająca znaczenie na rynku rozdzielczością monitora jest rozdzielczość FullHD, tj. 1920x1080 pikseli. Można więc ustalić ogólną zasadę, że nie należy umieszczać na stronie grafik mających większe wymiary, bo jest to po prostu nieopłacalne.
Po drugie: format!
Drugą najistotniejszą kwestią podczas optymalizacji obrazów jest ich format. Najbardziej popularne jest oczywiście rozszerzenie .jpg, które mają pliki z grafiką rastrową. Jest to format ze stratną kompresją, co w przypadku stron internetowych jest sporym plusem, bo możemy sami kontrolować rozmiar pliku kosztem utraty jakości. Równie szeroko stosowany jest format png, który posiada bezstratną kompresję i co istotne, obsługuje przezroczystość.
W przypadku grafik wektorowych popularny jest format svg. Równie powszechne jest bezpośrednie wstawienie wektorów w znacznik <svg> wprowadzonym wraz z HTML5. Więcej o nim tutaj. Dość młodą, ale znaną i polecaną metodą jest również przerabianie wektorów na fonty, którymi potem łatwiej się manipuluje w CSSie .Taką możliwość daje nam narzędzie icomoon, które z całego serca polecam.
Problem się pojawia w momencie kiedy chcemy, by nasze grafiki miały taki format, by zajmowały możliwie najmniej miejsca. Jeśli wstawiamy grafikę rastrową, to powinniśmy trzymać się tak długo jak to możliwe formatu JPG. Tak naprawdę format PNG najlepiej używać tylko wtedy jeśli zależy nam na przezroczystości. Warto tutaj dodać, że w wielu przypadkach efekt przezroczystości jesteśmy w stanie uzyskać z użyciem CSSa poprzez własność opacity lub korzystając z przestrzeni barw RGBA.
Inną dobrą praktyką jest możliwe zmaksymalizowanie ilości grafik wektorowych jeśli nasze obrazki są bardzo proste tzn. składają się z prostych figur geometrycznych. Grafiki wektorowe ważą bardzo mało, a jej samej się nie optymalizuje. Można co najwyżej w przypadku korzystania z gotowych icon fontów takich jak Font Awesome lub Entypo wyeksportować z użyciem icomoona tylko te ikony, z których korzystamy, by przeglądarka nie musiała wczytywać wszystkich innych, które dla nas będą zbędne.
Po trzecie: Kompresja!
Podczas zapisu obrazu w programach graficznych możemy ustalić poziom kompresji, by w ten sposób zmniejszyć rozmiar obrazu. Niestety w takim wypadku często dzieje się to kosztem wyraźnie gorszej jakości. Na szczęście mamy jeszcze do dyspozycji kompresory online, które dzięki odpowiednim algorytmom są w stanie diametralnie zmniejszyć rozmiar, a zarazem zachować jakość na zadowalającym poziomie. Najlepszym tego typu narzędziem, z którym miałem do czynienia jest TinyPNG. Niech nazwa nie wprowadza w błąd! TinyPNG radzi sobie równie dobrze z plikami JPG. Warto również zaznaczyć, że odpowiednio skompresowane grafiki wpływają na szybkość strony, a to jest jednym z czynników, dzięki którym można skutecznie prowadzić pozycjonowanie strony.
Często jesteśmy w stanie zbić rozmiar plików o ponad połowę, co osobiście uważam za fenomenalny wynik. Warto przy tym narzędziu poeksperymentować z różnymi wariantami grafik, bo właśnie tutaj jesteśmy w stanie “ugrać” największe oszczędności.
Grafika grafice nierówna
Wiele też zależy od przeznaczenia grafiki. W inny sposób potraktujemy zdjęcia w galerii, a inaczej tło strony. Przyjrzyjmy się temu nieco bliżej.
Zdjęcie w galerii
Podstawową sprawą, o której musimy pamiętać to kwestia miniatur. Podstrona z galerią powinna wczytywać tylko i wyłącznie miniatury, a nie zdjęcia oryginalne. W innym przypadku strona ładowałaby się niemiłosiernie długo i byłoby to dość irytujące dla odbiorców ze słabszym łączem internetowym, czy też dla użytkowników smartfonów.
Z tego względu developer powinien przygotować dwie wersje obrazka: miniaturę i zdjęcie właściwe wyświetlane w formie podglądu w lightboxie. Warto tutaj podkreślić, że należy się w tym przypadku stosować do sformułowanej wcześniej w tym artykule zasady, t.j. nie dawać do podglądu grafiki w oryginalnym rozmiarze, bo czas ładowania może być zbyt długi, a grafika i tak zostanie zeskalowana w dół. Jeśli chcemy wstawić zdjęcie w oryginalnym rozmiarze (bo przykładowo zależy nam, by użytkownik był w stanie zobaczyć szczegóły zdjęcia) najlepszym wyjściem będzie utworzenie zewnętrznego hiperłącza, które w razie potrzeby będzie można kliknąć.
Tło
Dobieranie grafiki mającej posłużyć nam za tło jest o tyle problematyczne, zazwyczaj musi ono mieć szerokość całego okna. Zmusza nas to przystosowania obrazka pod rozdzielczość FullHD. W takiej sytuacji możemy postąpić w różnoraki sposób:
- Jeśli tło ma być jednolite, to wystarczy stworzyć zwykły pattern, który będzie się powtarzał.
- Jeśli tło ma być bardziej różnorodne, to możemy stworzyć kilka przezroczystych grafik, które będą przylegać do kontenera z treścią i służyć jako “nakładka” na tło patternowe.
- W przypadku gdy musimy mieć tło na pełną szerokość okna możemy zamiast 1920px zastosować nieco mniejszy rozmiar np. 1500-1600px. Tło jest elementem drugoplanowym, na którym odbiorca nie skupia większej uwagi, stąd powstała przez to mniejsza ostrość na monitorach FullHD nie powinna robić większej różnicy, a zyskamy dzięki temu cenne kilobajty.
Logo
W przypadku logo priorytetem jest skalowalność. Logo musi być ostre i prezentować się dobrze w każdej rozdzielczości. Ze względu na to najlepszym rozwiązaniem jest skorzystanie z grafiki wektorowej.
Ikony
Mimo że ikony zazwyczaj stosunkowo mało ważą, to warto się upewnić, że mamy je zapisane również jako wektory, bo uzyskamy w ten sposób jeszcze mniejszy całkowity rozmiar. Poza tym ikony w ten sposób będą ostre i niepodatne na skalowanie.
Jak sprawdzić czy moja strona jest zoptymalizowana pod względem grafik?
Gdy już dostosujemy wszystkie grafiki i zastosujemy się do sugestii z artykułu możemy sprawdzić całkowity rozmiar wszystkich plików graficznych na stronie. Do tego celu nada się pingdom tools. Samo narzędzie sprawdza wiele czynników na stronie, ale w tej chwili skupimy się na grafikach.
Oczywiście im mniej, tym lepiej ;) Aczkolwiek aby uznać rozmiar naszych grafik za optymalny wystarczy nie przekraczać granicy 1MB.
