สาเหตุที่ไม่ควรพลาดผลิตภัณฑ์นี้
รูปภาพ WebP มีขนาดเล็กกว่า JPEG และ PNG ซึ่งโดยปกติแล้วจะอยู่ใน ขนาดของไฟล์ที่ลดลง 25–35% ซึ่งจะลดขนาดหน้าเว็บและ จะช่วยเพิ่มประสิทธิภาพให้ดียิ่งขึ้น
- YouTube พบว่าการเปลี่ยนไปใช้ภาพปก WebP ส่งผล 10% โหลดหน้าเว็บได้เร็วขึ้น
- Facebook มีประสบการณ์ ประหยัดขนาดไฟล์ 25-35% สำหรับ JPEG และประหยัดขนาดไฟล์ 80% สำหรับ PNG เมื่อ เปลี่ยนมาใช้ WebP
WebP เหมาะอย่างยิ่งสำหรับใช้แทนรูปภาพ JPEG, PNG และ GIF นอกจากนี้ WebP มีทั้งการบีบอัดแบบไม่สูญเสียรายละเอียดและการบีบอัดแบบสูญเสียบางส่วน ไม่มีข้อมูลในการบีบอัดแบบไม่สูญเสียข้อมูล สูญหายไป การบีบอัดที่สูญเสียไปจะลดขนาดไฟล์ลง แต่อาจต้องสูญเสีย คุณภาพของรูปลดลง
แปลงรูปภาพเป็น WebP
โดยทั่วไปแล้วผู้คนมักจะใช้วิธีใดวิธีหนึ่งต่อไปนี้ในการแปลงรูปภาพ WebP: เครื่องมือบรรทัดคำสั่ง cwebp หรือปลั๊กอิน Imagemin WebP (npm ) โดยทั่วไปแล้วปลั๊กอิน Imagemin WebP เป็นตัวเลือกที่ดีที่สุดหากโปรเจ็กต์ของคุณใช้บิลด์ สคริปต์หรือเครื่องมือสร้าง (เช่น Webpack หรือ Gulp) ส่วน CLI คือตัวเลือกที่ดี สำหรับโปรเจ็กต์ง่ายๆ หรือในกรณีที่คุณต้องการแปลงรูปภาพเพียงครั้งเดียว
เมื่อแปลงรูปภาพเป็น WebP คุณสามารถเลือกตั้งค่า การตั้งค่าการบีบอัด แต่สำหรับคนส่วนใหญ่ สิ่งเดียวที่คุณต้องทำคือ คือการตั้งค่าคุณภาพ คุณระบุระดับคุณภาพได้จาก 0 (แย่ที่สุด) ถึง 100 (ดีที่สุด) ถ้าอยากลองเล่นดู ก็ลองหา ระดับใดที่เหมาะสมระหว่างคุณภาพของรูปและขนาดไฟล์ ความต้องการ
ใช้ cwebp
แปลงไฟล์เดียวโดยใช้การตั้งค่าการบีบอัดเริ่มต้นของ Cwebp ดังนี้
cwebp images/flower.jpg -o images/flower.webp
แปลงไฟล์เดียวโดยใช้ระดับคุณภาพ 50:
cwebp -q 50 images/flower.jpg -o images/flower.webp
แปลงไฟล์ทั้งหมดในไดเรกทอรี
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
ใช้ Imagemin
คุณสามารถใช้ปลั๊กอิน Imagemin WebP เดี่ยวๆ หรือใช้กับเครื่องมือสร้างที่คุณชื่นชอบก็ได้ (Webpack/Gulp/Grunt/etc.). ซึ่งโดยปกติจะต้องมีการเพิ่มโค้ดประมาณ 10 บรรทัดลงใน สคริปต์บิลด์หรือไฟล์การกำหนดค่าสำหรับเครื่องมือสร้างบิลด์ ต่อไปนี้เป็นตัวอย่างวิธีการสำหรับ Webpack Gulp และ Grunt
หากคุณไม่ได้ใช้เครื่องมือสร้างเหล่านี้ คุณสามารถใช้ Imagemin เพียงอย่างเดียวได้เพื่อ
สคริปต์โหนด สคริปต์นี้จะแปลงไฟล์ในไดเรกทอรี images และ
บันทึกไว้ในไดเรกทอรี compressed_images
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*'], {
destination: 'compressed_images',
plugins: [imageminWebp({quality: 50})]
}).then(() => {
console.log('Done!');
});
แสดงรูปภาพ WebP
หากเว็บไซต์รองรับเฉพาะ WebP ที่รองรับ เบราว์เซอร์ คุณหยุดอ่านได้ หรือไม่เช่นนั้น แสดง WebP ในเบราว์เซอร์รุ่นใหม่และรูปภาพสำรองไปยังเบราว์เซอร์รุ่นเก่า
ก่อน:
html
<img src="flower.jpg" alt="">
หลัง:
html
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>
<picture>
<source>,
และแท็ก <img> รวมถึง
วิธีเรียงลำดับที่สัมพันธ์กัน
ในการโต้ตอบเพื่อให้ได้ผลลัพธ์สุดท้ายนี้
<picture>
แท็ก <picture> มี Wrapper สําหรับแท็ก <source> อย่างน้อย 1 รายการ และแท็ก <img> 1 แท็ก
<source>
แท็ก <source> ระบุทรัพยากรสื่อ
เบราว์เซอร์จะใช้แหล่งที่มาที่อยู่ในรายการแรกซึ่งอยู่ในรูปแบบที่รองรับ หากเบราว์เซอร์ไม่รองรับรูปแบบใดๆ ที่แสดงอยู่ในแท็ก <source> เบราว์เซอร์จะกลับไปโหลดรูปภาพที่ระบุโดยแท็ก <img>
<img>
แท็ก <img> คือสิ่งที่ทำให้โค้ดนี้ใช้งานได้ในเบราว์เซอร์
ไม่รองรับแท็ก <picture>
หากเบราว์เซอร์ไม่รองรับแท็ก <picture> ระบบจะ
ละเว้นแท็กที่ไม่รองรับ ผลที่ได้คือ "เห็น" เท่านั้น เวลา
<img src="flower.jpg" alt=""> แล้วโหลดรูปภาพนั้น
การอ่านส่วนหัว HTTP Accept
หากคุณมีระบบแบ็กเอนด์ของแอปพลิเคชันหรือเว็บเซิร์ฟเวอร์ที่อนุญาตให้คุณเขียนคำขอใหม่ คุณสามารถอ่านค่าของส่วนหัว HTTP Accept ซึ่งจะโฆษณารูปแบบรูปภาพอื่นที่สนับสนุน ดังนี้
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
การอ่านส่วนหัวของคำขอนี้และเขียนการตอบกลับใหม่ตามเนื้อหาจะช่วยให้มาร์กอัปรูปภาพง่ายขึ้น มาร์กอัป <picture> อาจยาวขึ้นเมื่อมีแหล่งที่มาหลายแหล่ง ด้านล่างคือกฎ mod_rewrite ของ Apache ที่แสดงทางเลือก WebP ได้
RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]
หากคุณเลือกวิธีนี้ คุณจะต้องตั้งค่าส่วนหัวการตอบกลับ HTTP Vary เพื่อให้แน่ใจว่าแคชจะเข้าใจว่ารูปภาพอาจแสดงด้วยเนื้อหาประเภทต่างๆ ดังนี้
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Content-Type"
</IfModule>
</FilesMatch>
กฎการเขียนใหม่ข้างต้นจะค้นหารูปภาพ JPEG หรือ PNG ในเวอร์ชัน WebP ที่ขอ หากพบตัวเลือก WebP ระบบจะแสดงผลด้วยส่วนหัว Content-Type ที่ถูกต้อง การดำเนินการนี้จะช่วยให้คุณสามารถใช้มาร์กอัปรูปภาพในลักษณะต่อไปนี้พร้อมกับการรองรับ WebP อัตโนมัติ
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
ยืนยันการใช้งาน WebP
ใช้ Lighthouse เพื่อยืนยันว่าแสดงรูปภาพทั้งหมดในเว็บไซต์ โดยใช้ WebP เรียกใช้การตรวจสอบประสิทธิภาพ Lighthouse (Lighthouse > ตัวเลือก > ประสิทธิภาพ) แล้วมองหาผลลัพธ์ของตัวเลือกแสดงรูปภาพในรุ่นถัดไป รูปแบบ นี้ Lighthouse จะแสดงรายการรูปภาพที่ไม่ได้แสดงอยู่ใน WebP