Optymalizacja grafik na strony internetowe.

W tym wpisie powiemy kilka słów o tym jakie formaty grafik do czego służą i jak to jest z tą rozdzielczością. Nie będzie to wpis dla grafików (oni mają to w małym palcu), ale dla osób zarządzających stronami, czy sklepami internetowymi.

Na wstępie podkreślić należy, że optymalizacja grafik jest BARDZO WAŻNA, ma ona ogromny wpływ na szybkość wczytywania się stron. Badania przeprowadzone przez Google (2016) wskazują, że strona ładująca się dłużej niż 5 sekund traci prawie 40% konwersji! Zakładając, że prowadzimy mały sklep internetowy o obrocie miesięcznym 10 000zł, mając wolną stronę tracimy miesięcznie 4000zł!. Rocznie jest już to 48 000zł, czyli Skoda Fabia i to w wersji kombi 😉 Dalej już chyba nie musimy tłumaczyć jak bardzo szybkość wczytywania się strony jest istotna.

 

Rozdzielczość grafik jest ważna!

Załóżmy, że 99,9% użytkowników w dalszym ciągu w swoich komputerach posiada ekrany nie większe niż słynne już FullHD czyli 1920 pikseli w poziomie i 1080 pikseli w pionie, co daje nam w sumie 2,07Mpix. W takim razie wstawianie na stronę większych grafik nie ma żadnego sensu, one i tak większe się nie wyświetlą! Skoro ekran na szerokość ma 1920 pikseli to dodając zdjęcie które ma 5000 pikseli to i tak zostanie ono skompresowane do tych 1920. Wydaje się to oczywiste, ale mieliśmy ostatnio klienta który usilnie na baner wstawiał zdjęcia w maksymalnej rozdzielczości ze swojego aparatu cyfrowego bo uważał że jakość zdjęcia musi być idealna, nie róbcie tego błędu. Dodawajcie zdjęcia zawsze w takim rozmiarze w jakim wyświetlą się na stronie.

Jeśli dodajecie baner, który ma 1200px na 400px to taką grafikę przygotujcie!

Jeśli dodajecie produkt do sklepu, to również dodajcie go w rozdzielczości nie większej niż 1920x1080px. (Jedyny wyjątek jest wtedy, kiedy zależy nam na tym, żeby użytkownik miał możliwość zbliżenia, bo w produkcie ważne są detale i jest taka opcja na stronie). 

 

Formaty grafik wykorzystywane na stronach internetowych.

Teraz pochylmy się nad rozszerzeniami z jakimi zapisywać grafiki, tak żeby poprawnie wyświetlały się na stronach. Inny format zastosujemy do logo i inny do zdjęcia w tle strony.

 

.JPG – zdjęcia / banery

We wszelkiego rodzaju galeriach, prezentacjach produktów, bądź z grubsza tam gdzie mamy do czynienia ze zdjęciami wybierz jpg. Zapisujcie zdjęcia z jakością nie większą niż 6/10, chyba że jesteście fotografami i macie hopla na punkcie każdego najmniego piksela. W innym przypadku szybkość wczytywania się strony jest ważniejsza!

Jak widać na powyższym przykładzie, zdjęcie zapisane z jakością 60% ma niezauważalnie gorszą jakość, a zajmuje blisko 4 razy mniej pamięci, dzięki czemu wczytuje się 4 razy szybciej!

We wcześniejszym tekście pisaliśmy o tym skąd wziąć zdjęcia na stronę internetową.

 

.SVG – logo

SVG to nic innego jak skalowalna grafika wektorowa, która jest zbawieniem w przypadku osadzania na stronach logotypów i innych symboli graficznych. Dzięki owej skalowalności, mamy pewność że nasze logo na wszystkich urządzeniach będzie ostre jak żyleta 🙂

 

PNG – elementy z przeźroczystością.

PNG jest formatem bezstratnym. Obrazy zapisane w PNG nie tracą na jakości i obsługują przeźroczystość, dzięki czemu z powodzeniem wypierają popularny jeszcze do niedawna format GIF. PNG przydaje się głównie twórcą stron, właśnie dzięki temu, że obsługuje przeźroczystość. Można dzięki niemu robić różne, ciekawe zabiegi graficzne i wizualne w szablonach stron.

 

GIF not dead!

Kiedy wydawało się, że już nic nie uratuje GIF przed nagłą śmiercią, przyszedł facebook wraz z messangerem i dali mu drugie życie. Od teraz GIF nie kojarzy się już ze statycznymi grafikami na stronach, logami, przeźroczystościami a jedynie z tym..

…czyli krótkimi animowanymi filmikami.

Czcionki zamiast grafik.

Opisaliśmy sobie chyba wszystkie typy grafik stosowanych na stronach www. Ciekawostką jest to, że od niedawna wszelkiego rodzaju ikony (zapisywane dotychczas w PNG lub SVG) zastępuje się fontami. Zalety takiego rozwiązania są ogromne, czcionki niewiele zajmują, rozciągają się nie tracąc na jakości, możemy im zmieniać kolory i stylować.

Zestawy czcionek można dowolnie konfigurować, na przykład tutaj:

• https://glyphter.com/
• http://fontello.com/

 

Najważniejsze co powinniście zapamiętać z tego tekstu to to żeby zapisywać zdjęcia dokładnie w takiej rozdzielczości w jakiej będą wyświetlane i w jakości max 60%!

 

Skoro nauczyliśmy się już optymalizować grafiki do publikacji w sieci, to warto wspomnieć jeszcze o tym jak nazywać pliki graficzne, żeby przyjęły je nasze serwery.