Format zdjęć WebP sprawdza się w sieci znakomicie

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

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:

<picture>
    <source srcset="zdjecie.webp" type="image/webp">
    <source srcset="zdjecie.jpeg" type="image/jpeg">
    <img src="zdjecie.jpeg" alt="...">
</picture>

</picture>

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

Tagi: grafika • jpeg • png • webp

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

Krzysztof pisze:

11 października 2020 o 22:43

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.

const gulp = require('gulp');
const webp = require('gulp-webp');

gulp.task('webp', function () {
   return gulp.src('./source/_gfx/*')
      .pipe(webp())
      .pipe(gulp.dest('gfx'));
});

const gulp = require('gulp');

const webp = require('gulp-webp');

gulp.task('webp', function () {

return gulp.src('./source/_gfx/*')

.pipe(webp())

.pipe(gulp.dest('gfx'));

});

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

Odpowiedz

Michał Kortas pisze:
12 października 2020 o 08:51
Dziękuję za podrzucenie kodu. W ten sposób można zautomatyzować sobie szybką konwersję. Co do spadku rozmiaru pliku – imponujące :)
Pozdrawiam
Odpowiedz
- Krzysztof pisze:
  16 października 2020 o 14:11
  Można też wskazać pliki do konwersji:
  gulp.task('webp', () => gulp.src('./source/_gfx/*.{jpg,jpeg,png,tiff}') .pipe(webp()) .pipe(gulp.dest('gfx')) )
  1
  2
  3
  4
  5
  gulp.task('webp', () =>
     gulp.src('./source/_gfx/*.{jpg,jpeg,png,tiff}')
        .pipe(webp())
        .pipe(gulp.dest('gfx'))
  )
  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”.
- Michał Kortas pisze:
  20 października 2020 o 10:21
  Dziękuję za kod. AVIF zapowiada się świetnie.

btk pisze:
14 października 2020 o 08:59
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/
Odpowiedz
- Michał Kortas pisze:
  15 października 2020 o 08:33
  Ciekawa alternatywa. Kompresja jest niewiarygodna. Zastanawiam się ile tylko zajmie implementacja w przeglądarkach :)
  Odpowiedz
- Krzysztof pisze:
  16 października 2020 o 14:07
  Ten opis też wygląda ciekawie:
  https://publishing-project.rivendellweb.net/gulp-and-avif-part-2/
  Odpowiedz

Format zdjęć WebP sprawdza się w sieci znakomicie

Zdjęcie JPEG przez kompresją

Zdjęcie WebP po kompresji

Kompatybilność z przeglądarkami

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

Dodaj komentarz Anuluj pisanie odpowiedzi

Partner technologiczny

Najnowsze komentarze

Robert

początkujący

Tom

awprojekt

Temat