Tworzenie obrazów WebP za pomocą wiersza poleceń

Katie Hempenius

Narzędzie wiersza poleceń webp zostało już zainstalowane, więc możesz zacząć. To narzędzie konwertuje obrazy JPG, PNG i TIFF do formatu WebP.

Konwertuj obrazy do formatu WebP

1. Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
2. Kliknij Terminal (uwaga: jeśli przycisk Terminal nie jest widoczny, być może trzeba będzie użyć opcji Pełny ekran).
3. Wpisz następujące polecenie:

cwebp -q 50 images/flower1.jpg -o images/flower1.webp

To polecenie dokonuje konwersji z jakością 50 (0 to najgorsza opcja, 100 to najlepiej) pliku images/flower1.jpg i zapisze go jako images/flower1.webp.

W konsoli powinno się wyświetlić 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 uruchomienie polecenia cwebp po jednym obrazie w taki sposób spowodowałoby, za długi czas potrzebny do konwertowania wielu obrazów. W razie potrzeby możesz użyć skryptu .

• Uruchom ten skrypt w konsoli (nie zapominaj o grachach):

`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

Ten skrypt konwertuje wszystkie pliki w folderze images/ o jakości 50 i zapisze je jako nowy plik (ta sama nazwa, ale z plikiem .webp ) w tym samym katalogu.

✔︎ Zameldowanie

W katalogu images/ powinno być teraz 6 plików:

flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp

Następnie zaktualizuj Glitcha, aby wyświetlał obrazy WebP w przeglądarkach, które je obsługują.

Dodaj obrazy WebP za pomocą tagu <picture>

Tag <picture> umożliwia obsługę protokołu WebP w nowszych przeglądarkach przy zachowaniu obsługę starszych przeglądarek.

• W index.html zastąp <img src="images/flower1.jpg"/> następującym fragmentem 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> dla flower2.jpg i flower3.png przez Tagi: <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 witrynie.

Sprawdzanie korzystania z formatu WebP za pomocą Lighthouse

Za pomocą audytu skuteczności w narzędziu Lighthouse Wyświetlaj obrazy w formatach nowej generacji możesz: czy wszystkie obrazy w witrynie są w formatach nowej generacji, takich jak WebP.

1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. 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.