WebP - nowoczesny format obrazów i kompresja zdjęć w Internecie

Strony internetowe w głównej mierze składają się z tekstu. Jednakże każdy tekst powinien być okraszony odpowiednimi obrazkami, które ułatwiają i uprzyjemniają przyswajanie treści. Niestety, wiele nieskompresowanych zdjęć na jednej stronie sprawi, że ta będzie się bardzo wolno wczytywać. To z kolei wpłynie na komfort potencjalnego odbiorcy, ale i ocenę strony www przez Google. Jak temu zaradzić?

Pexels / Lisa Fotios

2021-06-28 14:06
3 minuty czytania

Formaty obrazów – czym się różnią?

Najpopularniejszymi formatami obrazów wykorzystywanymi na stronach internetowych są JPG, PNG, GIF i SVG. Każdy z nich jest nieco inny i ma swoje wady oraz zalety. Poniżej pokrótce przybliżymy ci ich cechy charakterystyczne.

Format JPG

JPG to najczęściej używany format obrazów. Charakteryzuje się on wysokim stopniem kompresji, a co za tym idzie niewielkim rozmiarem plików. Należy jednak pamiętać, że konwersja do JPG jest konwersją stratną, co oznacza, że przy zapisaniu obrazu do tego formatu, bezpowrotnie tracimy część informacji. Stosuje się go wyłącznie do zdjęć. Nie ma możliwości zapisania w nim animacji. JPG nie obsługuje też przezroczystości.

Format PNG

Format PNG został stworzony z myślą o internecie. Ten format stosuje się zwykle, gdy mamy do czynienia z grafikami (również tymi zawierającymi warstwę przezroczystości), a nie zdjęciami. Zdjęcia w formacie PNG mogą zajmować stosunkowo więcej miejsca, niż te w formacie JPG, ze względu na niewielki stopień kompresji. Format ten jednak świetnie nadaje się do obrazów z dużą ilością jednolitych kolorów i gdy potrzebna jest przezroczystość. PNG planowo miał też zastąpić format GIF, który pozwala na zapisywanie animacji. Jednakże rozwiązanie to nie przyjęło się ostatecznie.

Format GIF

GIF to format, który powstał jeszcze w zamierzchłych czasach internetu, bo w roku 1987. GIF wykorzystuje kompresję bezstratną. Obsługuje też przezroczystość i animację. W obecnych czasach wykorzystuje się go w głównej mierze właśnie do wstawiania animacji na stronie internetowej.

Format SVG

SVG to format grafiki wektorowej. Od wyżej wymienionych, które są rastrowe, różni się tym, że jest wektorowy - obraz w nim przedstawiony w momencie powiększania nie jest rozciągany, a skalowany. Dzięki temu nie pojawiają się piksele, a obraz pozostaje w niezmienionej formie. Ten efekt osiągany jest dzięki zastosowaniu funkcji matematycznych, a nie pikseli znajdujących się na siatce. Wykorzystuje się go do przedstawiania prostych grafik, np. logotypów. Zaletą formatu SVG jest to, że plik taki może być zamieszczony bezpośrednio w kodzie strony. Nie trzeba się przez to odwoływać do zewnętrznych plików, a strona ładuje się szybciej.

Jaki format obrazu wybrać na stronę www?

Nadal nie jesteś pewien jakiego formatu obrazu używać na swojej stronie internetowej? Z pomocą przychodzi Google i opracowany przez niego format WEBP. Ten format potrafi zmniejszyć rozmiar pliku, zachowując przy tym jego wysoką jakość. WEBP obsługuje kompresję stratną i bezstratną. Oficjalne statystki przedstawione przez Google pokazują, że w przypadku tej pierwszej możemy ograniczyć rozmiar pliku JPG o średnio 34%, a w przypadku tej drugiej rozmiar pliku PNG o średnio 26%. Jak podają jednak różne źródła, wykorzystując format WEBP na naszej stronie internetowej, możemy liczyć nawet na 8-krotną kompresję rozmiaru pliku!

To jednak nie wszystko, jeśli chodzi o ten format. WEBP bowiem jest w stanie obsługiwać przezroczystość, a także animacje. Biorąc pod uwagę fakt, że wykorzystując go możemy osiągnąć o wiele mniejsze pliki, przy zachowaniu dobrej jakości, format WEBP zdaje się być świetnym rozwiązaniem dla wszelkich witryn, szczególnie tych, na których pojawia się wiele obrazów.

Format WEBP – czy wszyscy go zobaczą?

Format obrazu WEBP został zaprezentowany jeszcze w 2010 roku i na celu miał wyparcie formatu JPG, a później PNG oraz GIF. Jak wiemy, do tego nie doszło. Przez lata wiele przeglądarek nie obsługiwało tego formatu. Internet Explorer nie robił tego nigdy, a obsługę WEBP wprowadzono dopiero w jego następcy – Edge – pod koniec 2018 roku. Mozilla z kolei dodała obsługę obrazów WEBP dopiero na początku 2019 roku.

Obecnie jednak większość nowoczesnych przeglądarek wspiera format WEBP. Jak podaje portal caniuse.com, na ten moment pliki WEBP są prawidłowo wyświetlane przez 95,08% użytkowników internetu. To wystarczająco dużo, żeby przekonać się do tego formatu i włączyć jego stosowanie na Twojej stronie www. 

Czy muszę ręcznie konwertować obrazy na WEBP?

Istnieje wiele internetowych narzędzi służących do konwertowania obrazów na WEBP (pojedynczo lub masowo), ale zakładając, że brazków jest wiele, takie rozwiązanie będzie czasochłonne. Stąd też warto skorzystać z wtyczek dostarczanych przez firmy hostingowe lub używany przez ciebie CMS. Używając takiego rozwiązania, nie musisz przejmować się konwersją obrazów ręcznie. Po prostu wrzucisz je na serwer w jakimkolwiek formacie, reszta wykona się automatycznie, a użytkownicy twojej strony zobaczą obraz już w formacie WEBP.

Pliki WEBP w ICEberg CMS

W ICEberg CMS - autorskim systemie CMS stworzonym i rozwijanym przez Krakweb - pliki WEBP generowane są automatycznie. Nie musisz się martwić o format zdjęć produktów czy obrazków, które umieszczasz jako okładki artykułów. Wyślij na serwer plik JPG, czy PNG, a plik WEBP powstanie automatycznie. 

Format WEBP – czy używać?

Argumentem, żeby aby przestać wykorzystywać inne formaty obrazów są przede wszystkim User Experience i algorytm wyszukiwarki Google. Dla użytkownika jak i dla Google liczy się każdy ułamek sekundy, w którym Twoja strona się wczytuje. Wciąż mnóstwo stron wyświetla obrazy jako JPG lub PNG, a animacje w GIF-ach. Jeśli jesteś profesjonalnym fotografem lub grafikiem i zależy ci, aby na twojej stronie prace wyświetlały się bez utraty najmniejszych szczegółów zostań przy tradycyjnych formatach. W przeciwnym jednak razie włącz stosowanie plików WEBP już dziś. Jeśli prowadzisz sklep online, gdzie jest wiele zdjęć produktów, nie zastanawiaj się już dłużej. Kluczowy jest czas ładowania się strony w przeglądarce. A WEBP pomoże Ci ten czas znacząco zredukować. 


Blog Artykuły
Ustawienia dostępności
Wysokość linii
Odległość między literami
Wyłącz animacje
Przewodnik czytania
Czytnik
Wyłącz obrazki
Skup się na zawartości
Większy kursor
Skróty klawiszowe