Posługiwanie się grafikami na stronie to dobre rozwiązanie. W ten sposób użytkownik dużo łatwiej i szybciej, niż zapoznając się z długimi kolumnami tekstu, dowie się wszystkiego, co jest mu potrzebne. Jednocześnie nie można nie zauważyć, że to właśnie obrazy i grafiki, obciążają witryny, powodując niepożądany spadek ich wydajności. Co więcej, jak powszechnie wiadomo, im wyższa jakość obrazu, tym większy jest to problem. Z kolei im niższa jakość obrazu, tym mniejsze zadowolenie klienta.
Czy da się wydostać z tego błędnego koła? Specjaliści branżowi opracowali już kilka sposobów na rozwiązanie tego problemu. Nie trzeba poświęcać ilości czy jakości obrazów, na rzecz zachowania dużej prędkości ładowania się strony.
Pierwszym krokiem w optymalizacji grafik na stronie powinien być odpowiedni dobór formatu graficznego – czyli sposobu, w jaki strona nie tylko przechowuje, ale i demonstruje pliki graficzne. Można wybierać spomiędzy wielu rodzajów różnych formatów graficznych, z których najpopularniejsze to:
Osiągnięcie optymalizacji będzie możliwe po wybraniu odpowiedniego formatu do grafik, którymi dysponujemy.
Drugim z najważniejszych kroków w celu zadbania o wysoką wydajność strony jest dopasowanie rozmiaru grafik i animacji. Na pierwszy rzut oka zdawałoby się, że im większe i bardziej kolorowe grafiki, tym lepiej. Nie byłoby to jednak dobre ani z punktu widzenia użytkowania, ani dla szybkości działania strony. Każdy element graficzny, który znajduje się na stronie, powinien mieć optymalnie dobrany rozmiar.
Zasady są tutaj proste: najważniejszy baner musi wylądować na stronie głównej, w jej centralnej części i powinien przyciągać uwagę. Ale informacyjne ikonki mogą już być zdecydowanie mniejsze. W kontekście wielkości pliku warto też zastanowić się nad tym, jaka jest oczekiwana jakość danego elementu. Zdarza się, że pomiędzy najwyższymi wartościami rozdzielczości nie ma różnicy widzialnej gołym okiem dla zwykłego użytkownika. W takiej sytuacji powinno się decydować na tę mniej obciążającą grafikę.
Kompresja to wspominany już wcześniej krok w procesie optymalizacji graficznych elementów na stronie. Jej głównym celem jest sprawienie, by pliki zajmowały, jak najmniej miejsca na serwerze, bez rezygnowania z wysokiego poziomu ich jakości.
Kompresję można przeprowadzić z wykorzystaniem jednej z szeroko dostępnych aplikacji. Mechanizmy tych narzędzi usuwają niepotrzebne elementy z grafik, zmniejszając sukcesywnie ich wielkość. Intuicyjnej kompresji trzeba się nauczyć. Głównie dlatego, że jest kilka poziomów efektów, jakie można osiągnąć. Warto dopasować to do posiadanych grafik metodą prób i błędów.
Wykorzystanie na stronie skutecznie skompresowanych plików będzie miało bezpośrednie przełożenie na jej szybkość ładowania się, co z kolei sprawi, że strona będzie wyżej prezentowana w wynikach wyszukiwania przeglądarki.
Tak zwane Lazy Loading to metoda wykorzystywana na stronach internetowych. Jej zastosowanie pozwala na strategiczne opóźnienie ładowania obrazów w wybranej witrynie. W praktyce wygląda to tak, że po wejściu na stronę użytkownik nie czeka na załadowanie się całej zawartości, która znajduje się pod wczytywanym linkiem. Niżej położona część witryny ładuje się, dopiero gdy wystąpi taka potrzeba, czyli gdy użytkownik zacznie przewijanie. Dzięki temu odwiedzający nie odnotowuje żadnych problemów związanych z powolnym ładowaniem się odwiedzanej strony.
Inną korzyścią dla użytkownika strony, na której stosuje się Lazy Loading jest oszczędność danych i nieobciążanie sieci internetowej. Wynika to z tego, ze treści niewidoczne nie są automatycznie pobierane. Czy leniwe ładowanie da się zaimplementować samodzielnie? Tak, jest to całkiem proste. Coraz więcej systemów CMS pozwala na wybranie odpowiedniej opcji i zastosowanie tego rozwiązania. Jeśli nie korzysta się z systemu CMS, wystarczy w kodzie strony przy znaczniku dodać atrybut "loading". Lazy Loading można stosować na wybranych przez siebie grafikach.
Obecnie z Internetu korzysta się na najróżniejszych urządzeniach, które różnią się między sobą przede wszystkim wielkością ekranu. Koniecznie należy o tym pamiętać przy projektowaniu strony, przygotowując ją tak, by była wygodna i funkcjonalna dla wszystkich potencjalnie zainteresowanych.
Jednym z elementów tworzenia dobrej responsywnej strony jest odpowiednie przygotowanie grafik, które bezproblemowo będą automatycznie skalowały się, dostosowując się do różnych rozmiarów ekranów.
Za responsywność grafik na stronach internetowych odpowiada atrybut "srcset" z odpowiednią wartością dodany do znacznika
Według najnowszych standardów tworzenia stron internetowych jedną z najważniejszych rzeczy, które trzeba zapewnić, jest dostępność dla osób z ograniczeniami. Aby zapewnić dostępność, należy między innymi pamiętać o zamieszczeniu tekstów alternatywnych, czyli m.in. krótkich, ale rzeczowych i deskryptywnych opisów grafik.
To kolejna ze z pozoru niezauważalnych rzeczy, które mają ogromny wpływ na jakość strony internetowej, jej wydajność oraz pozycjonowanie. Atrybut "alt text" nie powinien być zbyt długi, nie musi opisywać najdrobniejszych szczegółów grafiki. Powinien skupiać się wokół sedna treści obrazu.
Opisy alternatywne dodawane powinny być do absolutnie każdej grafiki, która znajduje się na stronie. Dbałość o tego typu istotne szczegóły sprawia, że powiększa się grono odbiorców oraz rośnie zadowolenie osób, korzystających z dodatkowych ułatwień i udogodnień.
Powiedzieliśmy już sporo o tym co powinno się umieścić na stronie i w jej kodzie, aby kompresacja obrazów, umieszczanie ich na stronie sprawiło, że działała będzie ona wyjątkowo szybko i sprawnie, a wszyscy użytkownicy będą mogli cieszyć się z wygody i dodatkowych ułatwień. Nadszedł czas, by zastanowić się nad tym, jakich działań powinno się unikać.
Jednym z największych błędów, jakie bywają popełniane przy optymalizacji stron internetowych, w szczególności w przypadku obrazów, jest umieszczanie obrazów w skryptach i stylach. Czyli w dodatkowych, zewnętrznych arkuszach, które umożliwiają wygodne zmienianie każdego elementu wyglądu strony od wielkości fontu, przez rozmieszczenia napisów, aż po dobór kolorów. Zdaje się, że skoro jest to miejsce do ustalania wyglądu strony, to również grafiki powinny się tam znaleźć. Niestety nie jest to dobry pomysł, ponieważ umieszczenie w tych sekcjach obrazów i animacji przynosi dużo więcej szkód, niż korzyści.
Obecność obrazów we wspomnianych miejscach ma duży wpływ na spowolnienie procesu załadowywania strony, co, jak będzie się wiązało z ryzykiem utraty użytkownika. Obniżenie wydajności w takim przypadku wynika z tego, że przeglądarka musi poświęcić cenne sekundy na pobranie obrazu z miejsca jej przechowywania. Można tego sprawnie uniknąć, osadzając obrazy bezpośrednio w kodzie HTML. To rozwiązanie prezentuje również inne zalety. W ten sposób dużo łatwiej jest optymalnie dopasować i skompresować graficzne dodatki. Wtedy nic nie powinno zakłócać ładowania i przedłużać czasu jego trwania. Co więcej, umieszczanie grafik w skryptach i stylach sprawia, że często stają się one kompletnie nieczytelne dla niektórych urządzeń.
Przybliżone w tym artykule treści zapewne sprawiają wrażenie pomocnych, ale jednocześnie dość skomplikowanych do wprowadzenia, szczególnie wszystkie jednocześnie. Prawda jest taka, że wprowadzenie zmian na stronie, które pozwolą na standardową optymalizację obrazów, nie jest poza zasięgiem codziennego użytkownika systemów komputerowych. Oczywiście, osoby, które mają możliwość szybkiego zlecenia wprowadzenia proponowanych zmian informatykom i programistom, mogą z takiej szansy skorzystać.
Ale w Internecie jest już dostępnych mnóstwo narzędzi i oprogramowań, które mogą ułatwić przeprowadzanie pożądanych poprawek. Oto najpopularniejsze z nich:
Oprócz przytoczonych wyżej programów bardzo często można skorzystać z narzędzi, które są wbudowaną częścią platformy CMS, z której korzystamy. Oprogramowania służące do zarządzania treścią powinny udostępniać własne narzędzia z funkcją kompresji. W takim wypadku można osiągnąć zadowalające efekty bez konieczności korzystania z zewnętrznych narzędzi.
Po przeprowadzeniu wszystkich zaplanowanych działań, mających na celu optymalizację obrazów na witrynie internetowej, należy przetestować efekty. Należy na bieżąco śledzić czy wydajność strony nie spada, a gdy witryna rzeczywiście notuje spadek – natychmiast diagnozować przyczynę.
Oczywiście rzetelne testowanie powinno odbywać z wykorzystaniem odpowiednich narzędzi. Można znaleźć ich kilka.
O optymalizacji wszystkich elementów zmienianych i dodawanych na stronie należy pamiętać zawsze. Nawet najmniejsza zmiana może spowodować spadek wydajności witryny. Należy bezwarunkowo pamiętać o tym, by każdy nowy obraz, grafika czy animacja, pojawiające się na stronie prawidłowo przeszły każdy etap procesu optymalizacji.
To podstawa tworzenia dobrej, wysoko ocenianej i wygodnej dla użytkowników strony, która dodatkowo będzie miała zwiększone szanse na wysoką pozycję w wyszukiwarce. Aby tak się stało, konieczna jest duża czujność i regularna kontrola działania strony.
Technologia rozwija się bardzo szybko. Właśnie dlatego, warto pamiętać o tym, by cały czas śledzić nowe informacje i opracowania pojawiające się w tym temacie. Pozwoli to na szybkie wprowadzanie zmian dodatkowo udoskonalających działanie strony.