Jak można zauważyć wybór odpowiedniego formatu graficznego staje się kluczowy. Jednym z najbardziej obiecujących rozwiązań jest WebP – nowoczesny format opracowany przez Google, który oferuje znakomitą jakość obrazu przy znacznie mniejszym rozmiarze pliku w porównaniu do tradycyjnych formatów JPEG i PNG.
WebP – czym jest i jakie ma zalety?
WebP to format graficzny stworzony przez Google w 2010 roku jako odpowiedź na potrzebę bardziej wydajnej kompresji obrazów w internecie. W porównaniu do powszechnie używanych formatów JPEG i PNG, WebP oferuje:
- Mniejszy rozmiar pliku – obrazy WebP są średnio o 25-35% mniejsze niż ich odpowiedniki JPEG i PNG przy porównywalnej jakości
- Lepszą jakość obrazu – WebP wykorzystuje zaawansowane algorytmy kompresji, które pozwalają zachować więcej szczegółów i głębię kolorów
- Wsparcie dla przezroczystości – w przeciwieństwie do JPEG, WebP obsługuje kanał alfa, co pozwala na wykorzystanie przezroczystego tła, podobnie jak w PNG
- Progresywne ładowanie – WebP umożliwia stopniowe wyświetlanie obrazu podczas jego ładowania, poprawiając wrażenia użytkownika
Wsparcie dla WebP – przeglądarki i urządzenia
Jednym z kluczowych czynników decydujących o powodzeniu nowego formatu graficznego jest jego wsparcie przez przeglądarki internetowe i urządzenia. W przypadku WebP sytuacja wygląda następująco:
| Przeglądarka | Wsparcie WebP |
|---|---|
| Chrome (desktop i mobile) | od wersji 23 (2012 rok) |
| Firefox | od wersji 65 (2019 rok) |
| Edge | od wersji 18 (2018 rok) |
| Safari (desktop i mobile) | od wersji 14 (2020 rok) |
| Opera | od wersji 12.1 (2012 rok) |
Jak widać, wszystkie główne przeglądarki obsługują już format WebP, zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych. Można zatem śmiało stosować ten format bez obaw o kompatybilność.
Wsparcie WebP można łatwo sprawdzić, korzystając z narzędzi dla developerów w przeglądarce. Wystarczy otworzyć konsolę (zwykle klawiszem F12) i wpisać polecenie:
const supportsWebp = document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
console.log(supportsWebp);
Jeśli w konsoli pojawi się `true`, oznacza to, że przeglądarka wspiera format WebP.
Konwersja do WebP
Aby skorzystać z zalet WebP na swojej stronie www, konieczna jest konwersja istniejących obrazów JPEG i PNG do tego formatu. Można to zrobić na kilka sposobów:
Konwersja online
Najprostszą metodą jest skorzystanie z darmowych narzędzi online do konwersji obrazów, takich jak:
- CloudConvert (https://cloudconvert.com/webp-converter)
- Convertio (https://convertio.co/pl/jpg-webp/)
- Zamzar (https://www.zamzar.com/convert/jpg-to-webp/)
Wystarczy wgrać plik JPEG lub PNG, wybrać jakość i format wyjściowy WebP, a następnie pobrać przekonwertowany obraz.
Konwersja za pomocą aplikacji
Bardziej zaawansowaną opcją jest użycie aplikacji desktopowych, które pozwalają na masową konwersję wielu obrazów jednocześnie. Godne polecenia są:
- XnConvert (https://www.xnview.com/en/xnconvert/) – darmowy konwerter obsługujący ponad 500 formatów
- IrfanView (https://www.irfanview.com/) – lekka przeglądarka i konwerter grafiki
- GIMP (https://www.gimp.org/) – darmowy odpowiednik Photoshopa z możliwością eksportu do WebP
Konwersja z poziomu CMS (np. WordPress)
Jeśli nasza strona oparta jest o system CMS, taki jak WordPress, konwersję obrazów do WebP można zautomatyzować za pomocą dedykowanych wtyczek. Niektóre z polecanych to:
- WebP Express (https://wordpress.org/plugins/webp-express/) – wtyczka konwertująca obrazy JPEG i PNG do WebP w locie
- EWWW Image Optimizer (https://wordpress.org/plugins/ewww-image-optimizer/) – rozbudowany optymalizator grafiki z opcją konwersji do WebP
- ShortPixel Image Optimizer (https://wordpress.org/plugins/shortpixel-image-optimiser/) – wtyczka kompresująca i konwertująca obrazy po wgraniu do biblioteki mediów
Wdrożenie WebP na stronie www
Po przekonwertowaniu obrazów do formatu WebP należy wdrożyć je na stronie internetowej. Najprostszym sposobem jest podmiana istniejących plików JPEG/PNG na ich odpowiedniki WebP. Trzeba jednak pamiętać, że nie wszystkie przeglądarki obsługują ten format. Dlatego zaleca się stosowanie techniki „graceful degradation” i serwowanie obrazów WebP tylko tym użytkownikom, których przeglądarki wspierają ten format, a pozostałym dostarczanie tradycyjnych obrazów JPEG/PNG.
Można to osiągnąć za pomocą znacznika `
Przeglądarka będzie kolejno sprawdzać źródła obrazu i wybierze pierwsze obsługiwane, czyli WebP dla przeglądarek z jego wsparciem i JPEG/PNG dla pozostałych.
Inną metodą jest skorzystanie ze skryptów backendowych do automatycznej konwersji i serwowania obrazów WebP w zależności od możliwości przeglądarki. Popularne rozwiązania to:
- Modernizr (https://modernizr.com/) – biblioteka JS do detekcji wsparcia funkcji HTML5 i CSS3, w tym WebP
- Adaptive Images (http://adaptive-images.com/) – skrypt w PHP automatycznie generujący i serwujący obrazy WebP, JPEG lub PNG w zależności od przeglądarki i rozmiaru ekranu
- Imager.js (https://github.com/BBC-News/Imager.js/) – skrypt w JS do responsive images, z automatycznym serwowaniem WebP
Optymalizacja WebP
Same obrazy w formacie WebP już są zoptymalizowane względem JPEG i PNG, jednak wciąż można zmniejszyć ich rozmiar, stosując dodatkową kompresję. Podstawowymi parametrami kompresji WebP są:
- Jakość (quality) – określa stopień kompresji stratnej, wartości od 0 do 100, gdzie niższe wartości to mniejszy rozmiar i gorsza jakość, a wyższe odwrotnie. Google zaleca jakość 85 jako optymalny balans.
- Siła filtra (filter strength) – określa moc filtrowania, wartości od 0 do 100. Wyższe wartości redukują blokowe artefakty kompresji, ale rozmazują obraz.
- Przejścia (sharpness) – określa poziom wyostrzenia krawędzi, wartości od 0 do 7. Wyższe wartości poprawiają czytelność detali, ale mogą wprowadzać artefakty.
Do optymalizacji i kompresji obrazów WebP z poziomu wiersza poleceń służy oficjalne narzędzie Google – cwebp (https://developers.google.com/speed/webp/docs/cwebp). Przykładowe użycie:
cwebp -q 85 -sharp_yuv -m 6 -o photo.webp photo.jpg
Dla wygody można skorzystać też z webowych narzędzi do optymalizacji WebP, takich jak:
- Squoosh (https://squoosh.app/) – prosty web-app do kompresji grafiki z podglądem na żywo
- WebP Optimizer (http://www.webpoptimizer.com/) – rozbudowane narzędzie online do optymalizacji WebP z wyborem presetów jakości
Warto eksperymentować z ustawieniami kompresji WebP, aby znaleźć optymalne wartości dla konkretnych zastosowań i zachować balans między rozmiarem a jakością obrazów.
WebP a SEO
Jedną z głównych zalet formatu WebP w kontekście pozycjonowania strony jest zmniejszenie rozmiaru obrazów, a co za tym idzie przyspieszenie ładowania strony. Szybkość witryny jest ważnym czynnikiem rankingowym, wpływającym na pozycję w wynikach wyszukiwania Google.
Zastąpienie tradycyjnych formatów JPEG i PNG lżejszymi odpowiednikami WebP pozwala znacząco zredukować transfer danych i poprawić Web Vitals, takie jak LCP (Largest Contentful Paint) i CLS (Cumulative Layout Shift), które Google bierze pod uwagę w ocenie UX strony.
Szybsze ładowanie witryny dzięki WebP przekłada się także na lepsze wskaźniki użytkownika, takie jak współczynnik odrzuceń (bounce rate) czy średni czas sesji, a w efekcie również na konwersje. Wszystkie te czynniki są sygnałami rankingowymi dla Google.
Co istotne, Google oficjalnie rekomenduje stosowanie formatu WebP w swoich wytycznych dla webmasterów dotyczących optymalizacji grafiki (https://web.dev/explore/fast?hl=pl#optimize-your-images). Podobnie najważniejsze narzędzia do audytu szybkości stron, takie jak PageSpeed Insights, Lighthouse czy GTmetrix, premiują witryny serwujące obrazy WebP.
Warto zatem wdrożyć WebP na swojej stronie www nie tylko dla korzyści wydajnościowych, ale także z myślą o SEO i zadowoleniu użytkowników.
Przyszłość formatu WebP
Od momentu premiery w 2010 roku format WebP jest stale rozwijany przez zespół Google. Wprowadzane są kolejne usprawnienia kompresji stratnej i bezstratnej, dodawane nowe funkcje, jak animacje czy metadane XMP/EXIF.
Aktualnie trwają prace nad nową wersją formatu – WebP 2, która ma oferować jeszcze lepszą jakość obrazu i mniejsze rozmiary dzięki wykorzystaniu uczenia maszynowego. WebP 2 ma też obsługiwać przestrzeń kolorów HDR i głębię kolorów do 12 bitów na kanał.
WebP to nie jedyny nowoczesny format graficzny pretendujący do miana następcy JPEG. Jego głównym konkurentem jest AVIF (AV1 Image File Format) opracowany przez Alliance for Open Media, wspierany m.in. przez Netflixa. AVIF oferuje jeszcze lepszą kompresję niż WebP, jednak nie jest jeszcze tak powszechnie obsługiwany.
Można się spodziewać, że w najbliższych latach WebP będzie zyskiwać na popularności jako lżejsza i wydajniejsza alternatywa dla JPEG i PNG, szczególnie w zastosowaniach webowych. Nie zastąpi on jednak całkowicie tradycyjnych formatów, które mają ugruntowaną pozycję i szerokie wsparcie sprzętowe.
