Format WebP – Mały rozmiar pliku

Optymalizacja obrazów na stronie internetowej jest niezwykle ważna. Wykorzystywanie grafik w formacie dostosowanym do ich funkcji usprawnia ładowanie witryny, a co za tym idzie zapewnia lepsze odczucia podczas użytkowania jej. W dzisiejszym artykule przyjrzymy się facebookowej technice tworzenia obrazów poglądowych. Czym jest format WebP i jaki ma wpływ na funkcjonowanie stron internetowych?

Duży potencjał ukryty w niewielkim pliku

W jednym z poprzednich artykułów wspominaliśmy o różnych rodzajach formatów grafik oraz ich zastosowaniu w zależności od sytuacji. Oprócz dobrze znanych i od wielu lat powszechnie wykorzystywanych plików JPEG, PNG, SVG czy GIF wspomnieliśmy również o formacie WebP. Jego największą zaletą jest kilkukrotnie mniejszy rozmiar pliku, w porównaniu, chociażby z wcześniej wymienionym formatem JPEG. 

Niewielki rozmiar pliku daje duże możliwości optymalizowania obrazów na witrynach internetowych. Jednym ze sposobów na urozmaicenie ładowania grafik, przy jednoczesnym ograniczeniu wielkości plików, jest wyświetlanie ich poglądowych wersji w formie rozmytego obrazu. Zanim obraz zdąży się załadować, zamiast pustego miejsca zobaczymy estetycznie zblurowana grafikę. Taki sposób ładowania zdjęć możemy zaobserwować, między innymi, na Facebooku.

Dlaczego warto wykorzystywać WebP?

Chcąc stworzyć grafikę w niewielkim stopniu obciążającą stronę, musisz mieć na uwadze, że istnieje ścisła zależność pomiędzy wymiarami, jakie posiada fotografia, stopniem rozmycia oraz wagą pliku. W zależności od ostatecznego rozmiaru obrazu poglądowego zmieniać się będzie finalna wielkość już wyrenderowanego pliku – im większa grafika, tym cięższy uzyskamy plik. Jeżeli zależy Ci na jak najmniejszej ilości zajętego miejsca na serwerze, ustal dokładnie optymalny wymiar obrazu tak, aby nie obciążać niepotrzebnie strony internetowej. 

Posługując się przykładem Facebooka, możemy zobaczyć, że dla użytkowników jego mobilnej wersji optymalne wymiary zdjęcia osiągają wymiary 45x45px. Lider w dziedzinie social mediów poszukiwał formatu, który dawałby najlepszą jakość przy takich wymiarach obrazu. Zwycięzcą okazał się JPEG, jednak dążono do jeszcze większej oszczędności miejsca. Okazało się, że format WebP jest w stanie jeszcze bardziej skompresować plik, uzyskując możliwie najniższą wagę. Warto podkreślić, że format WebP wyświetlany jest tylko w przeglądarce Chrome i Opera, jednak w aplikacjach wspierany jest zarówno przez Android jak i iOS.

Jak zastosować WebP na stronie?

Chcąc zmaksymalizować ilość miejsca na swojej stronie internetowej, zdecydowanie powinieneś wykorzystywać na niej obrazy w formacie WebP. Takie rozszerzenie zdjęcia znacząco przyspieszy ładowanie Twojej witryny, nawet w przypadku, w którym użytkownik odwiedzający ją korzysta z bardzo słabego połączenia sieciowego. Być może zastanawiasz się, w jaki sposób zmienić format grafiki, aby przyspieszyć ładowanie strony. W kolejnej części artykułu przedstawimy Ci sposób, w jaki możesz oszczędzić miejsce na serwerze.

Jeżeli na swojej stronie chcesz umieścić naprawdę małe grafiki poglądowe, które dodatkowo będą zajmowały niewiele miejsca na dysku, powinieneś zacząć od znalezienia odpowiedniego obrazu w formacie JPEG. Ustal satysfakcjonujący Cię rozmiar i zastosuj go do swojej grafiki za pomocą Twojego ulubionego programu graficznego. Zastosuj maksymalne ustawienia jakości, które sprawią, że podczas zmieniania formatu z JPEG na WebP grafika nie ulegnie uszkodzeniu. Aby zmniejszyć plik, użyj ImageOptim, który zmniejszy rozmiar Twojego obrazu o około 25%. Ostatnim krokiem jest zmienianie formatu z JPEG na WebP, co jeszcze bardziej zmniejszy jej wagę.

Format ma wpływ na rozmiar pliku

W podsumowaniu naszego artykułu chcielibyśmy zawrzeć najważniejsze informacje na temat wykorzystania formatu WebP na stronie internetowej. Może zdarzyć się tak, że będziesz chciał wykorzystać naprawdę małe grafiki na swojej witrynie. Taką sytuację warto wykorzystać do zmniejszenia plików w taki sposób, aby otrzymać obrazy mieszczące się w rozmiarze oscylującym w granicach 100 bajtów. W naszym artykule przedstawiliśmy Ci prosty sposób, który nie wymaga zaawansowanej wiedzy graficznej. 

Zmiana formatu z popularnie wykorzystywanych JPEG lub PNG na superoszczędny WebP pozwala zmniejszyć rozmiar pliku kilkukrotnie. Mniejsza waga takiego pliku w mniejszym stopniu spowalnia stronę internetową, dzięki czemu nawet przy bardzo słabym łączu internetowym opóźnienie w wyświetlaniu strony nie będzie wpływało na jej użytkowanie. O ile format WebP może być wykorzystywany tylko w przeglądarkach Chrome i Opera, o tyle aplikacje dedykowane systemom Android i iOS nie mają z nim żadnego problemu.