เราได้ติดตั้งเครื่องมือบรรทัดคำสั่งของ Webp ไว้เรียบร้อยแล้ว คุณพร้อมแล้วที่จะเริ่มต้นใช้งาน เครื่องมือนี้จะแปลงรูปภาพแบบ JPG, PNG และ TIFF เป็น WebP
แปลงรูปภาพเป็น WebP
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
- คลิกเทอร์มินัล (หมายเหตุ: หากปุ่มเทอร์มินัลไม่แสดงขึ้น คุณอาจต้องใช้ตัวเลือกเต็มหน้าจอ)
- พิมพ์คำสั่งต่อไปนี้
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 หรือไม่
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บ Lighthouse
- ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายประสิทธิภาพในรายการหมวดหมู่
- คลิกปุ่มสร้างรายงาน
- ตรวจสอบว่าผ่านการตรวจสอบแสดงรูปภาพในรูปแบบรุ่นใหม่แล้ว
สำเร็จ! ขณะนี้คุณแสดงรูปภาพ WebP ในเว็บไซต์ของคุณ