Optymalizacja grafik – jak zoptymalizować zdjęcia?

Grafiki są elementami obciążającymi stronę w największym stopniu. Optymalizacja grafik jest kluczowym procesem w kontekście przyspieszenia strony internetowej. Sprawdź w jaki sposób podejść kompleksowo do optymalizacji grafik na swojej stronie www.

Nazwa grafiki jaką uploadujesz na stronę ma znaczenie! Przygotowując grafiki dla witryny internetowej lub artykułu, zadbaj o przyjazną nazwę pliku graficznego. Dzięki temu prostemu zabiegowi ułatwisz wyszukiwarce Google, ale i nie tylko zrozumienie tego co jest na zdjęciu.

Przygotowując nazwę dla pliku graficznego nie kombinuj zbyt mocno. Pliki graficzne nazywaj prosto bez zbędnego rozciągania. Nie idź w kierunku keywords stuffingu, a więc upychania słów kluczowych – sukcesu w ten sposób nie osiągniesz.

Zadbaj o naturalność nazewnictwa, w perspektywie czasu opłaci Ci się to! Używaj prostych sformułowań, najlepiej w mianowniku. Pamiętaj, że przygotowując nazwy grafik powinieneś/aś wykluczyć polskie znaki. Spację zastąp myślnikiem. Nie używaj dużych/wielkich liter. Unikaj znaków specjalnych.

Przykładowo:

itd.

W kontekście nazewnictwa plików graficznych zwróć dodatkową uwagę na wielkość liter rozszerzenia. Staraj się zunifikować pliki graficzne, tak aby rozszerzenia grafik nie zawierały DUŻYCH liter. Dla serwera plik:

to dwa zupełnie różne pliki.

Kolejnym ważnym elementem optymalizacyjnym grafik są atrybuty ALT (alternative text / opis alternatywny). Uzupełnienie atrybutu ALT jest kluczowe w kontekście poprawy lub lepszej widoczności strony ale też i samych grafik w Google lub wyszukiwarce grafik Google.

W praktyce atrybut ALT rzadko jest stowosowany, a grafiki najczęściej wyglądają jak poniżej (brak ALT’u):

Kolejnym często spotykanym przykładem jest pusty ALT (atrybut osadzony w elemencie IMG, ale bez opisu alternatywnego):

Co raz częściej można jednak na wielu stronach zaobserwować poprawnie zaimplementowany atrybut ALT z uzupełnionym tekstem alternatywnym:

Rolą atrybutu ALT jest wyświetlenie tekstu alternatywnego w przypadku niemożności załadowania grafiki. Poprawnie uzupełnione atrybuty ALT odczytywane są przez programy dla osób niewidzących lub niedowidzących. Atrybuty ALT odczytuje również Wyszukiwarka (mi. Google) w celu zrozumienia co autor witryny prezentuje na zdjęciu.

Pamiętaj: uzupełnienie atrybutów ALT w znaczący sposób może poprawić widoczność Twoich grafik w  wyszukiwarce! Nie pozostawiaj nic przypadkowi. Pozwól robotom indeksującym zrozumieć swoją stronę www! Nie pozwól, żeby domyślały się co jest na grafikach, które prezentujesz na stronie www…

Grafiki są jednym z najbardziej obciążających elementów na stronach www. Zadbaj o to aby grafiki prezentowane na stronie były lekkie dla użytkowników. W dobie mobile first i powszechnym korzystaniu przez użytkowników z urządzeń mobilnych z jeszcze nie najszybszym Internetem mobilnym, ważne jest optymalizowanie grafik pod kątem ich rozmiaru (szerokość x długość) oraz wagi (kilobajty).

Uploadując grafii na stronę staraj się sprawdzić w jakiej rozdzielczości będą prezentowane w witrynie i dopasuj je do pożądanego rozmiaru przed wgraniem na serwer – unikniesz w ten sposób skalowania zdjęć.

Po dostosowaniu rozmiaru (szerokości i długości) skup się na dooptymalizowaniu wagi grafiki. W optymalizacji grafik może Ci pomóc kilka narzędzi zewnętrznych, takich jak :

1. https://tinypng.com/
2. https://kraken.io/web-interface
3. https://imagecompressor.com/

Osobiście polecam numer 2, a więc Kraken.io. Szybko i sprawnie zoptymalizuje grafiki, które nie przekraczają 1MB.

Nie mniej ważny jest w całej układance nowoczesny format zdjęć wykorzystujący zaawansowane metody kompresji elementów graficznych.

Optymalizując grafiki zadbaj o to aby tym użytkownikom, którzy korzystają z przeglądarek wspierających obsługę plików WebP, JPEG 2000 oraz JPEG XR wyświetlać grafiki w jednym ze wspomnianych formatów.

Najprostszy w implementacji zwłaszcza jeżeli chodzi o CMSy wydaje się format WebP. Format ten pozwala skompresować zdjęcia nawet o 50% nie umniejszając ich jakości.

Tu serdecznie pragnę podziękować koledze Mariuszowi Radeckiemu z którym kiedyś pracowałem, za wskazanie obszaru, którego nie poruszyłem w tym skromnym artykule 🙂 O Lazy load zwyczajnie zapomniałem, a to istotna kwestia.

Lazy load to rozwiązanie, za pomocą którego można odłożyć ładowanie obrazów po za ekran, a więc w uproszczeniu opóźnić ładowanie tych zdjęć, które nie są widoczne.

Zdjęcia wówczas doczytywane są w momencie kiedy zajdzie potrzeba ich wyświetlenia, a więc np. w sytuacji, kiedy scrolujemy stronę.

Lazy load można wdrożyć w przypadku popularnych CMSów za pomocą wtyczek lub ręcznie dodając stawne biblioteki JS.

CDN (Content Delivery Network) to rozproszona sieć serwerów, której zadaniem jest zminimalizowanie opóźnień w ładowaniu zawartości strony internetowej. CDN zmniejsza fizyczną odległość między serwerem a użytkownikiem, przez co skraca się czas jaki musi upłynąć do wywołania zawartości z serwera.

Aktywacja CDNa zwykle jest dodatkowo płatną opcją, którą należy zakupić u dostawcy hostingu. Można natomiast skorzystać z rozwiązań darmowych, wystarczy takich poszukać w Google wpisując zapytanie „Free CDN” lub „Darmowy CDN”.

Kompresja obrazów np. za pomocą biblioteki Zlib (gZIP) może być skutecznym narzędziem optymalizacyjnym, cały proces zwykle jest „bezbolesny” w kontekście wdrożenia.

Aktywowanie kompresji sprawdza się do drobnych modyfikacji w ustawieniach serwera (każdy serwer posiada defaultowo zainstalowany jakiś kompresor) lub do modyfikacji pliku hataccess.

Zbliżając się do końca, warto również przemyśleć politykę w zakresie iamge cache. Ustawienie odpowiednich wartości dotyczących przechowywania zdjęć w pamięci podręcznej np. przeglądarki może w skuteczny sposób zmniejszyć obciążenie serwera i znacznie przyśpieszyć stronę.

Na koniec, oczywiście jeżeli posiadasz prawa autorskie do zdjęć, które wykorzystujesz możesz spróbować pozbyć się metadanych z grafik – często usunięcie metadanych pozwala na pomniejszenie rozmiaru zdjęcia o kilka Kb. W dobie Internetu mobilnego każdy kilobajt się liczy!

Dane EXIF (Exchangeable Image File Format) możesz usunąć bezpośrednio z poziomu exploratora Windows, klikając w właściwości zdjęcia, następnie w zakładce „Szczegóły” wybierając ” Usuń właściwości oraz informacje osobiste” lub za pomocą dowolnego programu graficznego obsługującego edycje danych EXIF.