O formacie WEBP

WEBP jest formatem grafiki rastrowej stworzonym i rozwijanym przez firmę Google. Nie tylko łączy ze sobą zalety formatów JPEG oraz PNG, ale także je ulepsza. Tak samo jak PNG, WEBP może przechowywać informacje na temat przezroczystości tła. W porównaniu do JPEG charakteryzuje się mniejszym rozmiarem pliku przy zachowaniu tego samego poziomu kompresji oraz jakości. Podsumowując, format WEBP, może mieć mniejszy rozmiar pliku od JPEG o nawet 85% zachowując tą samą jakość i potrafiąc uwzględnić przezroczystość.

Narzędzie Google PageSpeed Insights podczas analizy strony często sugeruje korzystanie właśnie z tego formatu. Dzięki korzystaniu z WEBP przyśpieszymy czas ładowania witryny oraz podniesiemy nasz scoring w wyszukiwarce Google co pozytywnie przełoży się na ruch organiczny.

Wsparcie przeglądarek

Większość nowych przeglądarek wspiera format WEBP. Natomiast w 2020 roku należy brać pod uwagę jeszcze takie przeglądarki jak Internet Explorer 11 oraz Safari 13, które owego wsparcia dla WEBP nie posiadają.

Pełna lista przeglądarek wspierających WEBP

Jeżeli nie chcesz wykluczyć żadnego użytkownika z wygodnego korzystania z twojej witryny, a chcesz korzystać z formatu WEBP, wszelkie obrazki musisz umieszczać w tagu <picture>. Dzięki niemu możesz wykorzystać tzw. fallback image, czyli to samo zdjęcie, ale w innym formacie.

Przykład użycia:

HTML
<picture>
  <source type="image/webp" srcset="image-l.webp" media="(min-width: 640px)">
  <source type="image/webp" srcset="image-m.webp" media="(min-width: 320px)">
  <source type="image/webp" srcset="image-s.webp">
  <source srcset="image-l.jpg" media="(min-width: 640px)">
  <source srcset="image-m.jpg" media="(min-width: 320px)">
  <source srcset="image-s.jpg">
  <img alt="Description of the image" src="image-l.jpg">
</picture>
Cookies Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dzięki nim możemy indywidualnie dostosować stronę do twoich potrzeb. Każdy może zaakceptować pliki cookies albo ma możliwość wyłączenia ich w przeglądarce, dzięki czemu nie będą zbierane żadne informacje. Polityka prywatności