การสร้างรูปภาพ WebP ด้วยบรรทัดคำสั่ง

Katie Hempenius

หากต้องการติดตาม Codelab นี้ ให้เปิด Glitch นี้ ในแท็บที่ 2

The WebP เครื่องมือบรรทัดคำสั่ง ได้รับการติดตั้งให้คุณแล้ว ดังนั้นคุณจึงพร้อมเริ่มต้นใช้งานแล้ว เครื่องมือนี้จะแปลงรูปภาพ JPG, PNG และ TIFF เป็น WebP

แปลงรูปภาพเป็น WebP

1. คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
2. คลิกเทอร์มินัล (หมายเหตุ: หากปุ่มเทอร์มินัลไม่แสดง คุณอาจต้องใช้ตัวเลือกแบบเต็มหน้าจอ)
3. พิมพ์คําสั่งต่อไปนี้

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

คำสั่งนี้ทำให้เกิด Conversion โดยมีคุณภาพ 50 (0 แย่ที่สุด ขณะที่ 100 คือ ที่ดีที่สุด) ไฟล์ images/flower1.jpg และบันทึกเป็น images/flower1.webp

หมายเหตุ: สงสัยไหมว่าทำไมถึงพิมพ์ cwebp แทนที่จะเป็น webp WebP มีคำสั่งแยกกัน 2 คำสั่งสำหรับการเข้ารหัสและการถอดรหัสรูปภาพ WebP cwebp เข้ารหัสรูปภาพไปยัง WebP ส่วน dwebp จะถอดรหัสรูปภาพจาก WebP

หลังจากดำเนินการแล้ว คุณควรเห็นสิ่งต่อไปนี้ในคอนโซล

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 |

คุณเพิ่งแปลงรูปภาพเป็น WebP เรียบร้อยแล้ว

แต่การเรียกใช้คำสั่ง cwebp ทีละอิมเมจแบบนี้อาจใช้เวลา ใช้เวลานานในการแปลงรูปภาพจำนวนมาก หากต้องการทำเช่นนี้ คุณสามารถใช้สคริปต์ แทน

• เรียกใช้สคริปต์นี้ในคอนโซล (อย่าลืมแบ็กทิก)

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

สคริปต์นี้จะแปลงไฟล์ทั้งหมดใน images/ ที่คุณภาพเท่ากับ 50 ไดเรกทอรี และบันทึกไว้เป็นไฟล์ใหม่ (ชื่อไฟล์เดิม แต่มีไฟล์ .webp) ส่วนขยาย) ไว้ในไดเรกทอรีเดียวกัน

✔︎ เช็คอิน

ตอนนี้คุณควรมี 6 ไฟล์ในไดเรกทอรี images/ ดังนี้

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

จากนั้น อัปเดต Glitch นี้เพื่อแสดงรูปภาพ WebP ไปยังเบราว์เซอร์ที่รองรับ

เพิ่มรูปภาพ WebP โดยใช้แท็ก <picture>

แท็ก <picture> ช่วยให้คุณแสดง WebP ในเบราว์เซอร์รุ่นใหม่ได้ขณะที่คง รองรับเบราว์เซอร์รุ่นเก่า

• ใน index.html ให้แทนที่ <img src="images/flower1.jpg"/> ด้วยค่าต่อไปนี้ HTML:

<picture>
  <source type="image/webp" srcset="images/flower1.webp">
  <source type="image/jpeg" srcset="images/flower1.jpg">
  <img src="images/flower1.jpg">
</picture>

• จากนั้นแทนที่แท็ก <img> สำหรับ flower2.jpg และ flower3.png ด้วย <picture> แท็ก

✔︎ เช็คอิน

เมื่อเสร็จแล้ว แท็ก <picture> ใน index.html ควรมีลักษณะดังนี้

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

ถัดไป ให้ใช้ Lighthouse เพื่อยืนยันว่าคุณติดตั้งใช้งานรูปภาพ WebP อย่างถูกต้องใน ของคุณ

ยืนยันการใช้งาน WebP ด้วย Lighthouse

การตรวจสอบประสิทธิภาพแสดงรูปภาพในรูปแบบรุ่นถัดไปของ Lighthouse ช่วยให้คุณทำสิ่งต่อไปนี้ได้ ให้ดูว่ารูปภาพทั้งหมดในเว็บไซต์ของคุณ ใช้รูปแบบรุ่นถัดไปอย่าง WebP ไหม

1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ
2. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
3. คลิกแท็บ Lighthouse
4. ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายประสิทธิภาพในรายการหมวดหมู่แล้ว
5. คลิกปุ่มสร้างรายงาน
6. ตรวจสอบว่าผ่านการตรวจสอบแสดงรูปภาพในรูปแบบรุ่นถัดไปแล้ว

สำเร็จ! ตอนนี้คุณแสดงรูปภาพ WebP ในเว็บไซต์แล้ว