Tworzenie obrazów WebP za pomocą wiersza poleceń

Katie Hempenius
Katie Hempenius
X

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

Konwertuj obrazy do formatu WebP

  1. Kliknij Remix to Edit (Zmiksuj do edycji), aby umożliwić edycję projektu.
  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 to polecenie:
cwebp -q 50 images/flower1.jpg -o images/flower1.webp

To polecenie konwertuje plik images/flower1.jpg na plik images/flower1.webp z jakością 50 (0 to najgorsza jakość, a 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 |

Obraz został przekonwertowany do formatu WebP.

Jednak uruchamianie polecenia cwebp dla jednego obrazu naraz zajęłoby dużo czasu, gdyby trzeba było przekonwertować wiele obrazów. Jeśli musisz to zrobić, możesz użyć skryptu.

  • Uruchom ten skrypt w konsoli (nie zapomnij o cudzysłowach):
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

Ten skrypt konwertuje wszystkie pliki w folderze images/ do jakości 50 i zapisuje je jako nowy plik (o tej samej nazwie, ale z rozszerzeniem .webp) w tym samym folderze.

✔︎ 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ą.

Dodawanie obrazów WebP za pomocą tagu <picture>

Tag <picture> umożliwia wyświetlanie standardu WebP w nowszych przeglądarkach przy 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>.

✔️ Zamelduj się

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 formatu WebP za pomocą Lighthouse

Weryfikacja wydajności Lighthouse Wyświetlaj obrazy w formatach nowej generacji może pomóc Ci sprawdzić, czy wszystkie obrazy w Twojej witrynie są w formatach nowej generacji, np. WebP.

  1. Aby wyświetlić podgląd witryny, kliknij Wyświetl aplikację, a następnie naciśnij Pełny ekran pełny ekran.
  2. Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
  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 audyt Wyświetlaj obrazy w formatach nowej generacji został zaliczony.

Zaliczenie audytu „Wyświetlaj obrazy w formatach nowej generacji” w Lighthouse

Gotowe! W Twojej witrynie są teraz wyświetlane obrazy w formacie WebP.