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

Katie Hempenius
Katie Hempenius
X

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

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

  1. คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้
  2. คลิก Terminal (หมายเหตุ: หากปุ่ม Terminal ไม่แสดง คุณอาจต้องใช้ตัวเลือกเต็มหน้าจอ)
  3. พิมพ์คำสั่งต่อไปนี้
cwebp -q 50 images/flower1.jpg -o images/flower1.webp

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

หลังจากดำเนินการนี้แล้ว คุณควรเห็นข้อความลักษณะนี้ในคอนโซล

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. ตรวจสอบว่าการตรวจสอบแสดงรูปภาพในรูปแบบรุ่นถัดไปผ่านแล้ว

ผ่านการตรวจสอบ &quot;แสดงรูปภาพในรูปแบบรุ่นถัดไป&quot; ใน Lighthouse

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