Optymalizacja grafiki na stronie internetowej. Poradnik.

retromedia-pl-agencja-kreatywna-torun-optymalizacja-grafiki-zdjec-jpeg-webp

Na wstępie informuję, że nie będzie to poradnik o optymalizowaniu grafiki pod SEO, czyli nie będzie o alt, title, mapach grafiki czy optymalnych nazwach plików. Tak samo nie będziemy się zajmować przekazem, jaki niesie za sobą zdjęcie oraz legalnością pozyskania tego obrazu i to zostawiam na waszej głowie. Trafność zdjęcia do treści posta i uczciwość wobec ewentualnego autora grafiki to rzeczy oczywiste, dlatego nie będziemy się nimi zajmować. Za to skupimy się na „lekkości” grafiki, która jest kluczowym czynnikiem odpowiadającym za szybkość wczytywania się zdjęcia, tudzież strony (i oczywiście też ma wpływ na pozycjonowanie).

Znajdź własny balans

Wyszukiwarka wyszukiwarką, ale przede wszystkim powinieneś wziąć po uwagę czynnik ludzki, czyli jak zdjęcia na Twojej stronie będą odbierać internauci. Jak pisałem wyżej pomijamy „przekaz” zdjęcia, bo wiadomo, że do postu o jabłkach nie będziemy dorzucać zdjęć motocyklowego silnika. Chodzi o to, żeby grafika była dobrej jakości i czytelna, a jednocześnie wczytywała się szybko na każdym możliwym sprzęcie.
Żeby zobrazować co mam na myśli, przybliżę jakie nasza agencja ma kryteria dla grafik na naszej stronie. Po pierwsze staramy się nie przekraczać Ready HD, czyli rozdzielczości 1280 x 720 pikseli. Drugim kryterium jest wielkość pliku i nie powinna ona być większa niż 100kb. Do tego dochodzi dpi (więcej o tym poniżej) nie większe niż 72, a docelowe formaty pliku to JPG i WEBP. Pierwszy dla starszych przeglądarek i urządzeń, a drugi dla najnowszych rozwiązań.
Krótko mówiąc musisz znaleźć parametry obrazka, które będą Ciebie zadowalać, a w efekcie Twoich potencjalnych odbiorców.

Rozdzielczość i DPI

Jest to nic innego jak liczby wyrażone w pikselach określające wysokość i szerokość grafiki. Jest to chyba najważniejszy parametr, jeśli chodzi o zdjęcia na stronie. Nie ma złotego środka jeśli chodzi o najbardziej optymalną rozdzielczość dla naszej grafiki i musimy sami znaleźć swoją wartość. Jednak należy pamiętać, że bez sensu jest ładowanie na stronę grafik w bardzo dużych rozdzielczościach, bo większość urządzeń będzie ją wyświetlać w rozdzielczościach najbardziej optymalnych dla swoich maksymalnych możliwości. Oczywiście dzisiaj standardem jest Full HD, czyli 1920 na 1080 px, ale pamiętajmy, że ludzie jeszcze używają starszych komputerów, gdzie rozdzielczości są o wiele niższe.
Żeby wybrać najbardziej adekwatną rozdzielczość pod siebie mogę zasugerować dwa rozwiązania, które pomogą Ci dokonać dobrego wyboru.
Po pierwsze zobacz jak robią to inni. Dobrym przykładem jest Facebook, który musi się dopasować do urządzeń i preferencji milionów (jeśli nie miliardów) ludzi z całego świata. Sprawdź w internecie lub pomocy Facebooka jakie są optymalne rozmiary grafik do poszczególnych rozwiązań, bo inna będzie rozdzielczość dla tła na fanpage’u, a inna dla postu na grupie. Oczywiście nie musisz się sugerować samym FB, a możesz inspirować się innymi globalnymi graczami, jak np. Twitter.
Po drugie sprawdź z jakich urządzeń i rozdzielczości korzystają Twoi czytelnicy czy klienci wchodzący na Twoją stronę. Jeśli większość ludzi wchodzi z ekranami, które są w stanie obsłużyć Full HD, to przetestuj różne rozdzielczości właśnie na takim ekranie.

Kolejna rzecz to dpi. W wielkim uproszczeniu jest to czynnik, który informuje drukarkę o szczegółowości obrazu wyrażonej w kropkach na cal, czyli dosłownie dots per inch. Dla ekranu powinno się używać wartości pixel per inch, ale jakoś tak się utarło, że dpi używa się na równi z ppi. Czym większa wartość dpi, tym obraz bardziej szczegółowy, a przedstawia to dokładnie poniższa grafika pożyczona z Wikipedii.

fot. wikipedia.pl

Jak widać na powyższym obrazku 72 dpi jest wystarczające, żeby przekazać wszystkie detale zdjęcia i jest to najbardziej rozpowszechniona wartość, jeśli chodzi o zdjęcia używane w internecie.

JPG, WEBP i kompresja.

Waga grafiki, czyli ilość pamięci jakiej potrzebuje plik, żeby być zapisanym na powierzchni dysku twardego, zależy oczywiście od rozdzielczości, ale przede wszystkim od formatu pliku jaki użyjemy, a co za tym idzie rodzaju kompresji. Jak pisałem wyżej staramy się nie przekraczać ok. 100 kb na zdjęcie, ale tyczy się to przede wszystkim jpeg-ów, bo może być tak, że to samo zdjęcie zajmie 99kb jako JPG i 70kb jako WEBP. Bardzo rzadko się zdarza, że jest odwrotnie. Ta wielkość pliku nie zależy tylko od samej metody kompresji, ale też od jej stopnia. Przy czym należy pamiętać, że grafika rastrowa zawsze ma kompresję stratną. Czyli czym bardziej kompresujemy – w wielkim uproszczeniu mniej bitów przenosi informację o pojedynczym pikselu – tym gorsza jakość obrazka.
Jeśli chcecie zobaczyć porównanie różnych stopni kompresji na przykładzie pliku JPG to odsyłam tutaj.
Czasem jest tak, że nie jest możliwe zachowanie naszego kryterium 100kb, bo musimy zachować jakość obrazka i wtedy zapisujemy tyle, ile nas satysfakcjonuje, jednak z reguły udaje nam się zapisać poniżej 100kb. Dlatego, żeby zachować jak najmniejszą ilość danych, ale najlepszą jakość, od jakiegoś czasu skierowaliśmy się w stronę formatu WEBP, który daje o wiele lepsze wyniki niż JPG.
Z WEBP był taki problem, że mimo zalet przez długi czas nie był wspierany przez Apple, a z jego urządzeń korzysta jakaś 1/5 populacji internautów. Jednak to się zmieniło i od 2020 roku sprzęty z iOSem na pokładzie poprawnie odczytują ten format. Trzeba pamiętać jednak o tym, żeby nie skupiać się tylko na tym jednym rozwiązaniu i dla starszych urządzeń mieć możliwość pobrania grafiki w JPG.
Dla stron opartych o WordPressa świetnym rozwiązaniem w tej materii jest wtyczka Webp Express, a poniżej wrzucam prosty przykład, ile możecie zyskać na nowoczesnych formatach.

fot. medium.com

Usuń metadane i włącz Lazy Loading

Metadane to nic innego jak dodatkowe informacje zapisane w pliku graficznym znane też jako EXIF. Jeśli robimy grafikę od podstaw, to może w metadanych być zapisany program jakiego użyliśmy do tworzenia grafiki, a jeśli robimy zdjęcia, to mogą być tam dodane szczegóły aparatu albo lokalizacja miejsca, w którym zrobiono fotografię. Każda szanująca się przeglądarka do zdjęć pozwala usunąć metadane z pliku graficznego, ale też możemy to zostawić wtyczce, która optymalizuje nam grafikę na stronie. Niemniej możemy w taki sposób często zaoszczędzić kilkadziesiąt kb miejsca.

Innym dobrym sposobem optymalizacji grafiki na stronie, a w zasadzie metody jej wczytywania jest tzw. lazy loading, czyli wyświetlanie grafiki tylko wtedy, gdy jest w zasięgu wyświetlanego obszaru. To pozwala zaoszczędzić na czasie, kiedy strona nam się ładuje, bo obrazki, których na razie nie widzimy są zostawiane na później. Natywnie taka metoda jest włączona w najnowszej wersji WordPressa, więc w zasadzie nie musisz nic robić.

PNG i GIF

Pliki w PNG cechują się świetną jakością, ale większą wielkością pliku, a GIF odwrotnie – to słaba jakość (wynikająca z małej ilości kolorów w porównaniu z innymi formatami) i super oszczędność miejsca. Stosunek jakości do wielkości pliku nie jest satysfakcjonujący, ale z drugiej strony nie można o nich całkowicie zapominać. Tym bardziej, że format GIF przeżywa swoje 5 minut jako nośnik animowanych memów.
Przy małych grafikach jak ikony czy buttony, może się okazać, że powyższe formaty maja nam o wiele więcej do zaoferowania niż nowoczesny WEBP, tym bardziej, że oba rodzaje plików obsługują przezroczyste tła, dlatego warto o nich pamiętać i czasem je testować.

Optymalizuj ikony

Obrazy na stronie to nie tylko grafiki i zdjęcia. To także małe ikony (lub emotikony), które w dużych ilościach mogą mieć realny wpływ na szybkość ładowania się strony, dlatego warto zwrócić na nie uwagę. Jeśli używasz emoji, to pamiętaj, że ich proces powstawania jest trochę inny niż standardowych grafik, bo są to kody w postaci np. U+1F469 WOMAN , które są konwertowane przez algorytm zapisany w JS na plik graficzny (lub czasem pobierane z zewnętrznego serwera). Każda emotikonka to osobne zapytanie HTTP, więc z punktu optymalizacji, gdzie zachęca się jednak minimalizować ilość tych zapytań, jest to nie najlepsze rozwiązanie.
Po drugie emotikony wyświetlają się inaczej w różnych systemach operacyjnych, co nie do końca da efekt, jaki zamierzaliśmy przedstawić. Już pomijam to, że w pewnych warunkach plik SVG pozwala przeprowadzić atak na stronę.

Zgodnie z powyższym warto się zastanowić nad rozwiązaniami typu Font Awesome, czyli ikon, które będą się wczytywać na stronie jako czcionka. Może faktycznie nie są tak żywe jak emoji, ale są o wiele lżejsze. Po drugie będą się zawsze wyświetlać tak samo niezależnie od systemu operacyjnego. A jeśli włączymy na naszym serwerze rozwiązanie gzip czy deflate dla czcionek, to ich przeniesienie z serwera na komputer odbiorcy będzie jeszcze szybsze, bo w jednym spakowanym pliku. Już pomijam, że rozwiązania jak Font Awesome są bardzo proste w użyciu, a w sieci znajdziecie bardzo dużo alternatyw działających podobnie.

Jeśli jednak uprzesz się, że chcesz mieć ikonki własne w formacie graficznym to zastanów się nad kilkoma rzeczami. Po pierwsze sprawdź, ile jest tych ikon. Jak mało to zastosuj pliki GIF. Jednak jeśli masz ich bardzo dużo, to warto pomyśleć o rozwiązaniu zwanym CSS Image Sprites. Krótko mówiąc wszystkie ikony warto zgrać w jeden graficzny plik, a potem CSS-em określić, która część grafiki ma się wyświetlać. Dla końcowego odbiorcy będzie to wyglądać jak pojedyncza ikona. Takie rozwiązanie zmniejsza znacznie ilość zapytań, ale jeśli nie korzystamy ze wszystkich ikon, to niepotrzebnie ładujemy dodatkowe dane. Przykład zastosowania znajdziecie tutaj.

Jest jeszcze taka metoda, gdzie konwertuje się obrazek na tzw. string base64 i potem wkleja się go do pliku HTML albo CSS. Powoduje to mniejszą ilość zapytań, ale zwiększa przepływ danych, bo base64 zajmuje więcej miejsca niż standardowa grafika. Dlatego najlepiej stosować to do bardzo małych ikon, np. favicon. Przykładowy konwerter znajdziesz tu, a przykład użycia tu.

Używaj CDN-ów i najnowszego standardu HTTP

Nie będę się rozpisywał czym są CDN-y, bo o tym będzie całkowicie osoby wpis, ale podpowiem, że bardzo pomaga przy ładowaniu strony, dlatego warto się nad tym zastanowić. Najlepszym CDNem ogólnego zastosowania jest Cloudflare i o tym będzie też osobny post, jednak w sieci znajdziecie wiele wartościowych poradników jak korzystać z CF.
Drugim rodzajem CDNów wartych uwagi są takie dedykowane stricte pod grafikę. Więcej będzie o nich w artykule poświęconym CDN-om, ale jeśli nie chcesz przepłacać, sprawdź te trzy marki: Statticaly, Cloudimage i Cloudinary. Najlepszy jest ten pierwszy, ale dwa ostatnie też mają co nieco do zaoferowania. Jedyna wada Cloudimage to stosowanie dziwnych miar, jak transformacje, a Cloudidnary żąda od nas tylu danych, że nie zdziw się, gdy zapyta o numer buta.

A jeśli już mowa o HTTP to pamiętaj, żeby wdrożyć u Siebie HTTP/3, które coraz bardziej zagląda pod strzechy, lub co najmniej HTTP/2, bo wbrew pozorom są jeszcze ludzie, którzy tego nie używają u siebie na stronach. Nasz serwer już oficjalnie używaj HTTP/3 z QUIC, co wymiernie odczuwamy. Też nie będę wchodził w techniczne szczegóły, ale zapytaj swoją firmę hostingową o pomoc we drożeniu najnowszego rozwiązania.

Find this content useful? Share it with your friends!

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *