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

เคธี่ เฮมปีเนียส
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`

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