WebP – rewolucyjny format graficzny.

Łukasz Wesołowski | 8 lipca 2024 | Technologie | Brak komentarzy

webp

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ądarkaWsparcie WebP
Chrome (desktop i mobile)od wersji 23 (2012 rok)
Firefoxod wersji 65 (2019 rok)
Edgeod wersji 18 (2018 rok)
Safari (desktop i mobile)od wersji 14 (2020 rok)
Operaod wersji 12.1 (2012 rok)
Wsparcie WebP dla różnych przeglądarek

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 `` w HTML5, który pozwala określić wiele źródeł obrazu dla różnych warunków.

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.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

SEO BLOG

Zapoznaj się z nowościami z branży SEO i zobacz co nowego jest na blogu

webp
WebP – rewolucyjny format graficzny.

Jak można zauważyć wybór odpowiedniego formatu graficznego staje się kluczowy. Jednym z najbardziej obiecujących rozwiązań jest WebP – nowoczesny...

Bard Google
Bard Google – co to jest i jak z niego korzystać?

Firma Google zaprezentowała niedawno swoje najnowsze osiągnięcie w dziedzinie sztucznej inteligencji – model konwersacyjny Bard. To narzędzie ma stanowić...

serwer VPS
Serwer VPS – Serwer wirtualny i jak go wybrać?

Wybór odpowiedniego serwera VPS (Virtual Private Server), czyli wirtualnego serwera prywatnego, jest kluczowym krokiem w kierunku efektywnego i bezpiecznego...

analityka internetowa
Analityka internetowa – Klucz do sukcesu w cyfrowym świecie

Dziś gdzie dane są nowym złotem, analityka internetowa wyłania się jako kluczowy element strategii każdej firmy pragnącej zaznaczyć swoją...

SEO BLOG