Optymalizacja zdjęć.
Czyli jak przyspieszyć stronę internetową?

Projekt strony internetowej to nie wszystko. Jednym z ważniejszych jej elementów jest właściwa optymalizacja zdjęć, króra potrafi znacznie zwiększyć wydajność twojej strony internetowej, by ta ładowała się szybko a odwiedzający ją użytkownicy chcieli na nią powracać.

Tworzenie stron internetowych z uwzględnieniem optymalizacji zdjęć – czyli poprawa wydajności strony internetowej

Ok, zacznijmy więc, iż optymalizacja zdjęć ma bardzo duże znaczenie w poprawie wydajności naszej strony internetowej.  Obrazy są jednym z kluczowych elementem każdej strony www. Zdjęcia stanowią ponad 60% danych załadowanych na stronach internetowych. Nie ulega więc wątpliwości, że są ważnym elementem prawie wszystkich stron internetowych, przy czym nie ma znaczenia fakt, że są to strony typu e-commerce, news, czy blogi. W każdym z tych przypadków optymalizacja zdjęć jest bardzo ważna jeśli chcesz przyspieszyć swoją stronę internetową i zwiększyć jej wydajność. Należy więc zwrócić na to szczególną uwagę w trakcie projektowania strony internetowej.

Projektowanie i tworzenie stron internetowych do szereg przemyślanych prac. Nie ma tutaj miejsca na przypadek. Od czego więc należy zacząć by strona ładowała się szybciej? Krótkie omówienie na przykładzie optymalizacji zdjęć.

Tania strona internetowa dla firm

Tworzenie stron internetowych a rozmiar zdjęć na stronie

Optymalizacja zdjęć pod względem ich rozmiarów to konieczność. Zmień rozmiar obrazów na dokładnie taki, jaki jest optymalny dla Twojej strony. Nie chodzi tutaj o zmianę rozmiaru za pomocą CSS lub HTML ale o zmianę rozmiaru pliku na serwerze, który w dalszej kolejności przesłany jest do przeglądarki.

Przykładowo jeśli masz obraz o 3000x2000px dla jakiegoś produktu, który chcesz następnie pokazać w swoim sklepie e-commerce to najpierw musisz pokazać go w znacznie mniejszym rozmiarze np. 150x250px na stronie z listą produktów
i 700x900px na stronie szczegółów produktu. Zanim to zrobisz musisz się upewnić, iż zmniejszyłeś oryginalny obraz do takich właśnie wymiarów zanim wyświetli się w przeglądarce. Przeskalowane obrazy są dużo mniejsze niż te oryginalne
i będą się ładowały znacznie szybciej. Nieprawidłowa zmiana rozmiaru zdjęć jest największym obszarem złej optymalizacji, która dotyczy dużej ilości witryn internetowych.

Najlepszym wariantem byłoby posiadanie serwera obrazów, który może zmieniać ich rozmiar do dowolnego wymiaru w czasie rzeczywistym – zmieniając adres URL obrazu. W takiej sytuacji, gdy zmienią się wymagania dotyczące wymiarów obrazu, wszystko czego byś potrzebował, aby uzyskać nowe wymiary obrazu, to określenie tego właśnie wymiaru w adresie URL.

Optymalizacja obrazów na stronie internetowej

Kolejny ruchem jaki musisz wykonać by przyspieszyć ładowanie się zaprojektowanej strony www jest wybranie odpowiedniego formatu i jakości dla każdego zdjęcia.

Najpopularniejsze formaty zdjęć takie jak JPG, PNG czy GIF są one obecnie najczęściej używane w sieci i każdy z nich może mieć różne zastosowanie. Jest natomiast, można powiedzieć stosunkowo nowy i młody format obrazu o nazwie WebP. Jest on o 30% mniejszy i obsługuje go prawie 80% nowoczesnych przeglądarek. WebP to format kompresji statycznych i animowanych obrazów rastrowych. Jest to format rozwijany przez Google, który opiera się o technologie pozyskane przy zakupie On2 Technologies. Siostrzanym projektem jest format wideo WebM, który posiada dwa tryby kompresji: stratną i bezstratną.

Korzyści wydajnościowe z tego formatu są duże i jeśli jest to możliwe to powinno się zamieszczać na swojej stronie internetowej obrazy w formacie WebP.  Oczywiście należy pamiętać o tym, że wyższa jakość obrazu powoduje większy jego rozmiar, a co za tym idzie, wolniejsze ładowanie strony internetowej. Dlatego właśnie poprawna optymalizacja obrazów jest tak ważna.

Szybkość ładowania strony internetowej zależy od wielu czynników a w tym przypadku również od tego ile obrazów i jakiej wielkości dodajemy na naszą stronę, ja obrazy są wyświetlane itd. Czynników jest wiele a w tym wszystkim trzeba znaleźć odpowiednią metodę na właściwą optymalizację.

Optymalizacja zdjęć na stronie www

Responsywna strona internetowa

Tak to już obecnie jest, że dostęp do internetu jest praktycznie wszędzie a myśląc poważnie o prowadzeniu e-buznesu nie możesz ignorować użytkowników mobilnych. Znaczna cześć ludzi używa telefonu do przeglądania internetu czy robienia zakupów online. Niedostosowanie strony internetowej do właściwego jej wyświetlania na urządzeniach mobilnych byłoby niepowetowanym błędem. Dane statystyczne mówią, że około 60% globalnego ruchu w sieci pochodzi właśnie z urządzeń mobilnych. Tak więc obecnie, gdy telefony komórkowe zyskały na znaczeniu, a sieci komórkowe stały się i są coraz lepsze i szybsze a prędkości transmisji danych w sieciach telefonii komórkowej są już coraz bliżej prędkości łączy szerokopasmowych nie powinniśmy zapominać właśnie o tych użytkownikach, którzy coraz częściej przeglądają sieć właśnie z urządzeń mobilnych. Dlatego właśnie tak ważne jest, aby zaprojektowana strona internetowa wyświetlała się poprawnie na urządzeniach mobilnych.

Posiadając dobrze zaprojektowaną stronę www, poprawnie wyświetlającą się na komputerach stacjonarnych i urządzeń mobilnych, możesz przełączyć się na korzystanie z responsywnych obrazów. Mowa tu o atrybutach srcset oraz sizes znacznika img. Możliwe jest więc udostępnienie przeglądarce internetowej listy wariantów dla pojedynczego zdjęcia definiując rozmiar konkretnego obrazu na różnych urządzeniach a przeglądarka internetowa zdecyduje o najlepszym rozmiarze danego obrazu do wyświetlenia na danym urządzeniu. Atrybut size wskazuje na informacje o układzie obrazu, natomiast atrybut srcset podaje listę obrazów o rzeczywistej szerokości określonej dla każdego adresu URL.

Przy projektowaniu strony www często mniej znaczy wydajniej

To proste, gdy zoptymalizujemy wszystkie obrazy znajdujące się na naszej stronie www a będzie ich zbyt dużo to w efekcie spowoduje to spowolnienie działania naszej witryny.  Nie zawsze musimy stosować na stronie internetowej masy obrazów a jeśli już to możemy unikać ich ładowania wszystkich na raz od razu. I tak, zamiast ładować obrazy, możemy stworzyć przyciski, gradienty lub inne zaawansowane elementy za pomocą kodu CSS.

Kolejną techniką przyspieszającą ładowania strony internetowej jest jest tzw. leniwe ładowanie obrazów. Co to jest leniwe ładowanie obrazów? Jest to po prostu odraczanie ładowania obrazów w czasie i to tych obrazów, które nie są wyświetlane w danej chwili. Każdy obraz, który nie jest wyświetlany aktualnie na ekranie użytkownika lub w oknie wyświetlania może być załadowany w późniejszym czasie. Inaczej wszystkie obrazy będą się ładowały równocześnie.

I tak dla przykładu, powiedzmy, że masz na swojej stronie internetowej sklepu online 50 produktów. Jeśli po wejściu na Twoją stronę zaczną wyświetlać się wszystkie obrazy produktów na raz, w tym samym czasie, to spowoduje to znaczne opóźnienie w załadowaniu się strony. Będzie tak dlatego, że obrazy będą z sobą „konkurowały” o przepustowość sieci
i zasoby procesora z innymi elementami na stronie, które również będą się w tym czasie ładowały np. CSS czy JS.

Korzystając więc z techniki leniwego ładowania obrazów, załadujemy tylko te, które są początkowo widoczne dla użytkownika a reszta sobie spokojnie czeka aż użytkownik przewinie na nie stronę i zechce je zobaczyć. Tak na marginesie, bardzo fajnie to wygląda z dodatkiem przeróżnych animacji. W sytuacji, gdy użytkownik nie przewinie całej strony, niektóre obrazy nie zostaną w ogóle załadowane.

 

Projektowanie stron www i optymalizacja obrazów

Serwer CDN dla zdjęć

 

Kolejnym krokiem zapewniającym szybkie załadowanie zdjęć jest CDN. Co to jest CDN? CDN – Content Delivery Network, jest siecią serwerów, które znajdują się w różnych miejscach świata. Obrazy naszej strony internetowej wczytywane będą z innych źródeł niż serwer, na którym działa nasza strona www. Chodzi o to, że obrazy wczytywane są z serwer, który znajduje się bliżej użytkownika przeglądającego naszą stronę internetową. Co więc nam to da? Odpowiedź brzmi – bardzo dużo. CDN to większa wydajność oraz szybkość wczytywania strony, ponieważ jest ona odciążona o te obrazy, które wczytywane są z serwerów CDN, znajdujących się bliżej użytkownika. Oczywiście jest to duży skrót definicji CDN ale na te potrzeby powinien wystarczyć.

Co nam jeszcze da korzystanie z dobrego CDN? Otóż, to nie tylko zmniejszenie czasu ładowania obrazu, co przekłada się na szybszy całkowity czas ładowania strony, ale również przekłada się to bezpośrednio na wyższą pozycję w wynikach wyszukiwania.

Na co należy zwrócić uwagę wybierając serwer CDN? Na pewno zwrócić trzeba uwagę na to czy CDN obsługuje HTTP/2. HTTP/2 to protokół dostarczania treści w sieci, który może znacznie przyspieszyć czas ładowania strony.

Cóż, istnieje kilka narzędzi, których można użyć do przetestowania witryny specjalnie dla problemów jakie mogą wystąpić z obrazem. Zazwyczaj wystarczy wpisać adres URL strony internetowej i w ciągu kilku sekund otrzymamy sugestie dotyczące np. zmiany rozmiaru, najlepszego formatu, leniwego ładowania czy HTTP/2.

Podsumujmy więc krótko

W niniejszym artykule zostały krótko wskazane najważniejsze metody dotyczące optymalizacji zdjęć, co przekłada się bezpośrednio na szybkość wczytywania strony internetowej oraz wyższą pozycję w wynikach wyszukiwania. Stosują się do wyżej wspomnianych metod, można rozwiązać znaczną część problemów związanych z obrazami. Właściwa optymalizacja obrazów na stronie internetowe ma więc ogromne znaczenie przy projektowaniu storn internetowych.