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 zaczynać. To narzędzie konwertuje obrazy w formacie JPG, PNG i TIFF do formatu WebP.

Konwertuj obrazy na WebP

  1. Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
  2. Kliknij Terminal (uwaga: jeśli nie widać przycisku terminala, może być konieczne użycie opcji pełnego ekranu).
  3. Wpisz to polecenie:
cwebp -q 50 images/flower1.jpg -o images/flower1.webp

To polecenie konwertuje plik images/flower1.jpg o jakości 50 (0 to najgorsza jakość, a 100 to najlepszy) i zapisuje go jako images/flower1.webp.

Gdy to zrobisz, w konsoli powinna pojawić się informacja podobna do tej:

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 |

Właśnie udało Ci się przekonwertować obraz na WebP.

Jednak uruchamianie polecenia cwebp po kliknięciu w taki sposób obrazu naraz zajmuje dużo czasu. Jeśli chcesz to zrobić, możesz użyć skryptu.

  • Uruchom ten skrypt w konsoli (pamiętaj o lewikach):
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

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

✔✔ 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 ten błąd, aby wyświetlać obrazy WebP w przeglądarkach, które je obsługują.

Dodaj obrazy WebP za pomocą tagu <picture>

Tag <picture> umożliwia wyświetlanie protokołu WebP w nowszych przeglądarkach przy zachowaniu zgodności ze starszymi przeglądarkami.

  • W pliku 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>.

✔✔ Zameldowanie

Gdy skończysz, tagi <picture> w tabeli 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 za pomocą narzędzia Lighthouse sprawdź, czy obrazy WebP są prawidłowo zaimplementowane w witrynie.

Sprawdzanie użycia WebP za pomocą Lighthouse

Audyt wydajności Wyświetlaj obrazy w formatach nowej generacji w narzędziu Lighthouse pozwala sprawdzić, czy wszystkie obrazy w Twojej witrynie korzystają z formatów nowej generacji, takich jak WebP.

  1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran 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 jest zaznaczone pole wyboru Skuteczność.
  5. Kliknij przycisk Wygeneruj raport.
  6. Sprawdź, czy kontrola Wyświetlaj obrazy w formatach nowej generacji zakończyła się powodzeniem.

Audyt „Wyświetlaj obrazy w formatach nowej generacji” w Lighthouse

Success! Wyświetlasz teraz obrazy WebP w swojej witrynie.