Format zdjęć WebP sprawdza się w sieci znakomicie


9 października 2020 / Michał Kortas


Chciałbym dziś krótko pochwalić format zdjęć WebP. Ostatnio poprawiałem wydajność strony i PageSpeed Insights zwrócił mi uwagę, aby używać nowszych formatów zdjęć, zamieniając PNG i JPEG na WebP właśnie. Przekonwertowałem więc kilka zdjęć, między innymi zdjęcie w tle tego bloga, nie skupiając się zbyt na szczegółach kompresji. Efekt?

Różnice w jakości są zauważalne, lecz niewielkie. Rozmiar zdjęcia skurczył się o ponad 3/4 w stosunku do źródłowej wersji.

Zdjęcie JPEG przez kompresją

Rozmiar: 229 KB – kliknij w zdjęcie, aby otworzyć je w pełnej karcie i porównać w pełnym rozmiarze.

Zdjęcie przed kompresją

Zdjęcie WebP po kompresji

Rozmiar: 48,5 KB – kliknij w zdjęcie, aby otworzyć je w pełnej karcie i porównać w pełnym rozmiarze.

Zdjęcie po kompresji

Kompatybilność z przeglądarkami

Na dzień dzisiejszy jest naprawdę dobrze. Prawie wszystkie przeglądarki radzą sobie znakomicie z wyświetlaniem formatu WebP. Wyjątek stanowi oczywiście IE11.

W celu zapewnienia kompatybilności można użyć następującego kodu:

Ciekawi mnie, czy wykorzystujecie ten format na szerszą skalę, czy trzymacie się jeszcze starych formatów typu PNG/JPEG?


Tagi:


7 odpowiedzi na “Format zdjęć WebP sprawdza się w sieci znakomicie”

  1. Krzysztof pisze:

    Zaciekawiłem sie tematem i nie powiem bardzo ciekawy wpis. Jako że nie mam konwertera do plików użyłem gulpa i gulp-webp plugin.

    Efekt końcowy:
    229kB –> 33kB, spadek jakości nie zauważyłem

    • Dziękuję za podrzucenie kodu. W ten sposób można zautomatyzować sobie szybką konwersję. Co do spadku rozmiaru pliku – imponujące :)
      Pozdrawiam

      • Krzysztof pisze:

        Można też wskazać pliki do konwersji:

        można to zautomatyzować, tylko tak ja mam w watch’a ustawionaego na less->css a zdjęcia raczej ich bardzo dużo nie wrzucamy to można zrobić to „z ręki”.

      • Dziękuję za kod. AVIF zapowiada się świetnie.

  2. btk pisze:

    WebP można użyć tu i teraz, ale na horyzoncie mamy jeszcze AVIF, który może przejąć palmę pierwszeństwa już niedługo. ‚Mała’ analiza: https://jakearchibald.com/2020/avif-has-landed/

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *