Pliki graficzne można zapisywać w bardzo wielu formatach. Do najpopularniejszych należą GIF, PNG, JPG i WebP. Ten ostatni, stworzony przez Google, doskonale sprawdza się w przypadku stron internetowych. Pozwala na lepszy poziom kompresji obrazów, przy zachowaniu ich porównywalnej jakości. A ponieważ aż 80% czasu potrzebnego na wczytanie strony WWW zajmuje przesyłanie plików między serwerem, na którym jest strona, a przeglądarką WWW, warto skorzystać właśnie z WebP, aby przyspieszyć działanie swojej witryny.
WebP vs inne formaty plików
Jeżeli zastanawiasz się, czy korzystanie z WebP przyniesie wymierne korzyści w postaci zmniejszenia rozmiaru plików graficznych na Twojej stronie WWW, pozwól, że zaczniemy od porównania tego formatu do innych popularnych sposobów zapisu grafik wykorzystywanych w Internecie. I tak, pliki zapisane w WebP, w porównaniu do plików JPG o zbliżonej jakości, będą od nich mniejsze do 35%. To bardzo duża różnica. JPG jest popularnym formatem wykorzystywanym na przykład do zapisu zdjęć wykonywanych smartfonami czy aparatami cyfrowymi. Gdy takie zdjęcie zapisane w formacie JPG zajmuje około 3 MB, po konwersji do WebP jego rozmiar zmniejszy się do 2 MB!
Innym popularnym formatem stosowanym wśród twórców stron WWW jest PNG. Podobnie jak WebP obsługuje on przeźroczystość, co jest ważne przy projektowaniu witryn. Przeźroczystość umożliwia użycie tej samej grafiki w ramach kilku warstw na stronie WWW. Zmieniając kompresję z PNG na WebP, możemy liczyć na spadek rozmiaru pliku o około 25%, zakładając tę samą jakość grafiki, co w przypadku PNG. Podobnie rzecz się ma, gdy weźmiemy pod uwagę format GIF, od którego WebP będzie lepszy przy zapisie statycznych obrazów.
Wiele typów urządzeń – wiele wersji tego samego obrazka
Można powiedzieć, że żyjemy mobilnie. Każdego dnia korzystamy z kilku różnych urządzeń, za pomocą których możemy wyświetlać strony WWW. Są to i laptopy, i komputery stacjonarne, i smartfony, i tablety. Każde z nich ma inną rozdzielczość i inny rozmiar ekranu. Smartfony mają ekrany średnio 5 calowe, tablety 10 calowe, laptopy na ogół 15-16 calowe, a monitory do komputerów stacjonarnych – nawet 20 czy 30 calowe. Nie zapominajmy też o telewizorach z funkcjami Smart, które mogą służyć nam jako przeglądarka strony WWW. W tych ostatnich liczba cali nierzadko przekracza kilkadziesiąt.
Skoro grafiki zajmują średnio 70% każdej strony internetowej, przed webmasterami i właścicielami stron stoi nie lada wyzwanie – trzeba sprostać oczekiwaniom każdego pojedynczego użytkownika, godząc rozmiar grafiki, którą umieszcza się na serwerze, z właściwą szybkością jej ładowania i odpowiednią jakością, która pozwoli na wyświetlenie obrazu bez strat na każdym urządzeniu.
Właściwa optymalizacja grafik to umieszczenie na stronie nie tylko jednego obrazu w mniejszym rozmiarze, ale jest to przygotowanie kilku wersji tej samej grafiki stworzonych pod konkretną rozdzielczość ekranu, na którym wyświetlana jest strona. Dzięki możliwości odczytania przez serwer informacji, z jakim ekranem aktualnie ma on do czynienia, do użytkownika w takim przypadku będzie wysłany odpowiedni plik dobrany nie tylko pod względem właściwego formatu zapisu, ale również pod względem rozdzielczości. Oznacza to, że poza przekonwertowaniem obrazów do nowoczesnego formatu WebP, konieczne jest przygotowanie kilku wersji każdej grafiki i zapisanie ich wszystkich na serwerze.
Odpowiednio przygotowany i wgrany na serwer w kilku rozmiarach obrazek wymaga właściwego oprogramowania w kodzie strony, tak, aby serwer przesyłał do przeglądarki użytkownika grafikę odpowiednio dobraną pod względem rozdzielczości ekranu. Z pomocą przychodzi HTML5, dzięki któremu między znacznikami <picture> musimy umieścić informacje o naszej grafice. Korzystając z <source> podajemy maksymalną rozdzielczość, dla której ma być wysyłany przez serwer określony plik, a za pomocą <img> definiujemy grafikę domyślną.
Przykład:
<source media=”(max-width: 400px)” srcset=”obrazek-do-400px.webp”>
<source media=”(max-width: 800px)” srcset=”obrazek-do-800px.webp”>
<img src=”obrazek.webp” style=”width:auto” alt=”Moja grafika”>
</picture>
Dzięki zastosowaniu powyższego kodu, na ekranach do szerokości 400 px wyświetlony będzie obrazek o nazwie obrazek-do-400px.webp, na ekranach między 400 px a 800 px – obrazek-do-800px.webp, a na ekranach o większej rozdzielczości – obrazek.webp. Wszystkie trzy obrazki trzeba uprzednio przygotować i wgrać na serwer, tak samo, jak trzeba przygotować i opublikować zmiany w kodzie naszej strony.
Można samemu, można automatycznie
O ile przekonwertowanie obrazów z innych, używanych przez nas formatów graficznych do WebP jest w zasadzie jednorazową czynnością, to już ich optymalizacja – nie tylko pod względem rozmiaru, ale też estetyki (jakości) – może wymagać od nas bardzo dużo pracy. Trzeba wziąć tu pod uwagę konieczność wykonania kilku wersji tego samego obrazka, zapisania go z odpowiednimi parametrami na serwerze, przechowywania go tam przez cały czas kiedy będzie wyświetlany oraz wykonania zmian w kodzie strony WWW. Przy mało rozbudowanych stronach takie czynności pomimo że są czasochłonne, to są do wykonania. Mogą jednak skutecznie utrudniać pracę związaną z obsługą często aktualizowanych i rozbudowanych serwisów.
A gdyby można było to wszystko zrobić za pomocą jednego kliknięcia… Brzmi jak życzenie? Być może, ale na pewno nie w nazwa.pl! Otóż jednym z najbardziej komfortowych rozwiązań jest skorzystanie z funkcji konwersji do formatu webp i zmiany wielkości obrazów, która jest dostępna dla użytkowników serwerów CloudHosting oraz użytkowników usługi CDN nazwa.pl.
Właściciele serwisów internetowych obsługiwanych czy to na serwerach CloudHostingu, czy to korzystających z usługi CDN nazwa.pl, nie muszą samodzielnie optymalizować materiałów graficznych. Zrobi to za nich nasza funkcja, dzięki której obrazy są automatycznie konwertowane do formatu WebP, a ich rozmiar jest dostosowywany do rozdzielczości urządzenia osoby wchodzącej na stronę WWW. Sama aktywacja funkcji odbywa się za pomocą Panelu Klienta nazwa.pl w ramach ustawień serwera CloudHosting (jeżeli posiadasz w nazwa.pl swój hosting) lub ustawień usługi CDN nazwa.pl (jeżeli korzystasz z sieci CDN nazwa.pl, ale sam hosting masz w innej firmie).
KONIECZNIE PRZECZYTAJ NA BLOGU:
WIĘCEJ INFORMACJI Z CENTRUM POMOCY:
Głos zabiera Mecenas Google!
Szybko wczytująca się strona internetowa przyciąga nie tylko klientów, ale również zwraca na siebie uwagę giganta z Mountain View. Najpopularniejsza na świecie wyszukiwarka internetowa bardzo docenia strony, które działają błyskawicznie i w ten sposób są bardziej przyjazne „ludzkim użytkownikom”. W swoich opracowaniach Google zwraca uwagę na to, że szybko działające strony – a więc takie, które m.in. korzystają z automatycznej optymalizacji grafik do formatu WebP – mogą liczyć na dużo wyższe wyniki przy pozycjonowaniu w porównaniu do stron, które wczytują się wolniej. Dlatego stosowanie nowoczesnego formatu zapisu grafik, takiego jakim jest WebP, to dzisiaj bardziej wymóg dla prawidłowo wykonanej strony WWW niż dowolny wybór webmastera.
Słowem podsumowania
Dzięki rozwiązaniom, które są dostępne na serwerach CloudHosting, a także w ramach usługi CDN nazwa.pl, konieczne optymalizacje witryny internetowej można wykonywać bez poświęcania na te czynności dodatkowego, cennego czasu. Wystarczy przysłowiowe jedno kliknięcie, aby nie tylko polepszyć wyniki wyszukiwania strony WWW w Google, ale również, a może – przede wszystkim, zwiększyć komfort użytkowania strony przez osoby ją odwiedzające. Przenosząc swój hosting do nazwa.pl, masz możliwość skorzystania m.in. z tej nowoczesnej funkcjonalności, jaką jest automatyczna konwersja do formatu webp i zmiana wielkości obrazów. A jeżeli korzystasz z serwera VPS lub serwera dedykowanego, dostęp do automatycznej konwersji obrazów uzyskasz, uruchamiając usługę CDN nazwa.pl.
Wybór należy do Ciebie!
