Membuat Gambar WebP dengan Command Line

Katie Hempenius
Katie Hempenius
X

Alat command line webp telah diinstal untuk Anda, jadi Anda siap untuk memulai. Alat ini mengonversi gambar JPG, PNG, dan TIFF menjadi WebP.

Mengonversi gambar ke WebP

  1. Klik Remix untuk Mengedit agar project dapat diedit.
  2. Klik Terminal (catatan: jika tombol Terminal tidak muncul, Anda mungkin harus menggunakan opsi Layar Penuh).
  3. Ketik perintah berikut:
cwebp -q 50 images/flower1.jpg -o images/flower1.webp

Perintah ini mengonversi file images/flower1.jpg, dengan kualitas 50 (0 yang terburuk; 100 adalah yang terbaik), dan menyimpannya sebagai images/flower1.webp.

Setelah melakukannya, Anda akan melihat sesuatu seperti ini di konsol:

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 |

Anda berhasil mengonversi gambar ke WebP.

Namun, menjalankan perintah cwebp satu gambar sekaligus seperti ini akan memerlukan waktu lama untuk mengonversi banyak gambar. Jika perlu melakukan ini, Anda dapat menggunakan skrip.

  • Jalankan skrip ini di konsol (jangan lupa {i>backticks<i}):
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

Skrip ini mengonversi semua file dalam direktori images/, dengan kualitas 50, dan menyimpannya sebagai file baru (nama file yang sama, tetapi dengan ekstensi file .webp) di direktori yang sama.

✔︎ Check in

Sekarang Anda memiliki 6 file di direktori images/:

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

Selanjutnya, update Glitch ini untuk menyajikan gambar WebP ke browser yang mendukungnya.

Menambahkan gambar WebP menggunakan tag <picture>

Tag <picture> memungkinkan Anda menayangkan WebP ke browser yang lebih baru sambil mempertahankan dukungan untuk browser lama.

  • Di index.html, ganti <img src="images/flower1.jpg"/> dengan HTML berikut:
<picture>
  <source type="image/webp" srcset="images/flower1.webp">
  <source type="image/jpeg" srcset="images/flower1.jpg">
  <img src="images/flower1.jpg">
</picture>
  • Selanjutnya, ganti tag <img> untuk flower2.jpg dan flower3.png dengan tag <picture>.

✔︎ Check in

Setelah selesai, tag <picture> di index.html akan terlihat seperti ini:

<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>

Selanjutnya, gunakan Lighthouse untuk memverifikasi bahwa Anda telah mengimplementasikan gambar WebP dengan benar di situs.

Memverifikasi penggunaan WebP dengan Lighthouse

Audit performa Menyajikan gambar dalam format generasi berikutnya di Lighthouse dapat memberi tahu Anda apakah semua gambar di situs Anda menggunakan format generasi berikutnya seperti WebP.

  1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh layar penuh.
  2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  3. Klik tab Lighthouse.
  4. Pastikan kotak Performa dicentang pada daftar Kategori.
  5. Klik tombol Buat laporan.
  6. Pastikan audit Tayangkan gambar dalam format generasi berikutnya sudah lulus.

Meneruskan audit &#39;Tayangkan gambar dalam format generasi berikutnya&#39; di Lighthouse

Berhasil! Anda kini menampilkan gambar WebP di situs Anda.