Narzędzie Webp Narzędzie wiersza poleceń jest już zainstalowane, więc możesz rozpocząć pracę. To narzędzie konwertuje obrazy JPG, PNG i TIFF na format WebP.
Konwertuj obrazy do formatu WebP
- Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
- Kliknij Terminal (uwaga: jeśli nie widzisz przycisku terminala, włącz pełny ekran).
- Wpisz następujące polecenie:
cwebp -q 50 images/flower1.jpg -o images/flower1.webp
To polecenie konwertuje plik images/flower1.jpg
z jakością 50
(0
to najgorsza opcja, 100
– najlepsza) i zapisuje go jako images/flower1.webp
.
Gdy to zrobisz, w konsoli powinno pojawić się coś takiego:
Saving file 'images/flower1.webp'
File: images/flower1.jpg
Dimension: 504 x 378
Output: 29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12 35.09 dB
(1.24 bpp)
block count: intra4: 750 (97.66%)
intra16: 18 (2.34%)
skipped: 0 (0.00%)
bytes used: header: 116 (0.4%)
mode-partition: 4014 (13.6%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 22%| 26%| 36%| 17%| 768
quantizer: | 52 | 42 | 33 | 24 |
filter level: | 16 | 9 | 6 | 26 |
Udało Ci się przekonwertować obraz do formatu WebP.
Jednak uruchamianie polecenia cwebp
po jednym obrazie w danym momencie trwałoby bardzo długo. W razie potrzeby możesz zamiast tego użyć skryptu.
- Uruchom ten skrypt w konsoli (nie zapomnij o grachach):
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`
Ten skrypt konwertuje wszystkie pliki w katalogu images/
z uwzględnieniem jakości 50
i zapisuje je w tym samym katalogu jako nowy plik (o tej samej nazwie, ale z rozszerzeniem .webp
).
✔✔
W katalogu images/
powinno być teraz 6 plików:
flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp
Następnie zaktualizuj usterkę, aby wyświetlać obrazy WebP w przeglądarkach, które ją obsługują.
Dodaj obrazy WebP za pomocą tagu <picture>
Tag <picture>
umożliwia obsługę protokołu WebP w nowszych przeglądarkach przy jednoczesnym zachowaniu obsługi starszych przeglądarek.
- W polu
index.html
zastąp<img src="images/flower1.jpg"/>
tym kodem HTML:
<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>
- Następnie zastąp tagi
<img>
tagówflower2.jpg
iflower3.png
tagami<picture>
.
✔✔
Gdy to zrobisz, tagi <picture>
w elemencie index.html
powinny wyglądać tak:
<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>
<picture>
<source type="image/webp" srcset="images/flower2.webp">
<source type="image/jpeg" srcset="images/flower2.jpg">
<img src="images/flower2.jpg">
</picture>
<picture>
<source type="image/webp" srcset="images/flower3.webp">
<source type="image/png" srcset="images/flower3.png">
<img src="images/flower3.png">
</picture>
Następnie użyj narzędzia Lighthouse, aby sprawdzić, czy obrazy WebP zostały prawidłowo zaimplementowane w witrynie.
Weryfikowanie korzystania z WebP za pomocą Lighthouse
Audyt skuteczności narzędzia Lighthouse Wyświetlaj obrazy w formatach nowej generacji pozwoli Ci sprawdzić, czy wszystkie obrazy w Twojej witrynie korzystają z formatów nowej generacji, takich jak WebP.
- Aby wyświetlić podgląd witryny, kliknij Wyświetl aplikację, a następnie naciśnij Pełny ekran
.
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Lighthouse.
- Upewnij się, że na liście Kategorie zaznaczone jest pole wyboru Skuteczność.
- Kliknij przycisk Wygeneruj raport.
- Sprawdź, czy certyfikat Wyświetlaj obrazy w formatach nowej generacji został zaliczony.
Gotowe. W swojej witrynie wyświetlasz teraz obrazy WebP.