Tworzenie obrazów WebP za pomocą wiersza poleceń

Katie Hempenius

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

1. Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
2. Kliknij Terminal (uwaga: jeśli nie widzisz przycisku terminala, włącz pełny ekran).
3. 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ów flower2.jpg i flower3.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.

1. Aby wyświetlić podgląd witryny, kliknij Wyświetl aplikację, a następnie naciśnij Pełny ekran .
2. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
3. Kliknij kartę Lighthouse.
4. Upewnij się, że na liście Kategorie zaznaczone jest pole wyboru Skuteczność.
5. Kliknij przycisk Wygeneruj raport.
6. Sprawdź, czy certyfikat Wyświetlaj obrazy w formatach nowej generacji został zaliczony.

Gotowe. W swojej witrynie wyświetlasz teraz obrazy WebP.