Dostępnych jest wiele narzędzi i opcji, z których można skorzystać, aby przyspieszyć ładowanie się sklepu internetowego. Dlaczego prędkość sklepu internetowego jest tak istotna? Dobre wrażenie...

Jakub

11 września 20233 min czytania

Wiedza o kategorii

Co to jest WebP?

Format obrazów, który został opracowany w 2010 roku przez Google, zastąpił popularne formaty JPG i PNG. WebP łączy w sobie ich najlepsze cechy, zapewniając doskonałą jakość obrazu, jak i mniejszy rozmiar pliku. Wykazuje się bardzo dużą skutecznością w kompresji obrazów. Gwarantuje to szybsze ładowanie się stron internetowych, a tym samym korzystniejsze doświadczenia użytkownika.

Jak działa WebP?

Format zmniejsza rozmiar plików przy zachowaniu wysokiej jakości grafiki. Pliki PNG są zmniejszane o 26%, a JPG o 34%. Aby z niego skorzystać, należy zastosować przeglądarkę Chrome, Opera, Mozilla Firefox, Microsoft Edge, Apple Safari.

Google opracowało dla programistów gotowe rozwiązania pod adresem: https://developers.google.com/speed/webp/download. Dostępne są również pluginy kompatybilne z popularnymi programami graficznymi.

Najprostszym sposobem konwersji pliku JPEG lub PNG do WebP jest skorzystanie z dostępnych w internecie konwerterów, a wybór jest bardzo duży.

Gdy plik zostanie przekonwertowany, należy zmodyfikować kod strony internetowej, aby mógł odwoływać się do nowych plików. Można to zrobić na dwa sposoby:

zmieniając nazwy plików graficznych w kodzie HTML,
używając specjalnego kodu JavaScript, który automatycznie wczytuje odpowiedni plik graficzny.

Które przeglądarki obsługują WebP?

WebP dostępny jest już od ponad 10 lat. Początkowo obsługiwały go wyłącznie Google Chrome i Opera. Teraz większość przeglądarek zapewnia częściowe lub pełne wsparcie dla tego formatu. Wyjątkiem jest Internet Explorer, który utracił wsparcie w 2021 roku i nie jest rozwijany.

Co zrobić, gdy przeglądarka nie obsługuje WebP?

Starsze wersje przeglądarek nie są kompatybilne z funkcjonalnościami oferowanymi przez ten format obrazów. Użytkownicy, którzy nie zdecydowali się na aktualizację oprogramowania, mogą skorzystać z wyjścia awaryjnego.

Najprostsze rozwiązanie to:

< picture >

< source srcset=”zdjecie.webp” type=”image/webp” >

< source srcset=”zdjecie.jpg” type=”image/jpeg” >

< img src=”zdjecie.jpg” >

< /picture >

Starsze przeglądarki bez wsparcia dla omawianego formatu wyświetlą zdjecie.jpg ze znacznika < source >. Natomiast przeglądarki bez wsparcia dla znacznika < picture > (np. Internet Explorer) wyświetlą zdjecie.jpg ze znacznika < img >

Jakie zalety ma WebP?

Zwiększenie wydajności strony, co widać po szybszym jej ładowaniu.
Ograniczone zużycie transferu danych, ze względu na mniejszy rozmiar plików. Jest to szczególnie ważne w przypadku osób korzystających z urządzeń mobilnych.
Ulepszona optymalizacja wyszukiwarek – Google Core Web Vitals zaleca używanie nowoczesnych formatów graficznych, takich jak WEBP, w celu osiągania lepszych rezultatów SEO.
Obsługa przezroczystości i animacji.

Jakie wady ma WebP?

Format nie jest obsługiwany przez starsze przeglądarki, m.in. Edge 12-17 i Firefox 2-64.
W niektórych przypadkach utrata jakości po konwersji jest nieunikniona. Najczęściej ma to miejsce przy obrazach o najwyższej możliwej rozdzielczości, w których konieczne jest zachowanie wysokiego poziomu szczegółów.

Zobacz całą ofertę