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

Katie Hempenius
Katie Hempenius
X

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

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

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

คำสั่งนี้จะแปลงไฟล์ที่คุณภาพเท่ากับ 50 (แย่ที่สุด 0 คือ 100 ดีที่สุด) ไฟล์ images/flower1.jpg แล้วบันทึกเป็น images/flower1.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 ครั้งละ 1 รูปภาพแบบนี้จะใช้เวลานานในการแปลงรูปภาพจำนวนมาก หากต้องการทำเช่นนี้ คุณใช้สคริปต์แทนได้

  • เรียกใช้สคริปต์นี้ในคอนโซล (อย่าลืมแบ็กทิก)
`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 บนเว็บไซต์