Co to jest WebP?

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 . Dzięki niemu możesz wykorzystać tzw. fallback image, czyli to samo zdjęcie, ale w innym formacie.

Przykład użycia:

<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>