สาเหตุที่ไม่ควรพลาดผลิตภัณฑ์นี้
รูปภาพ WebP มีขนาดเล็กกว่ารูปภาพ JPEG และ PNG โดยปกติแล้วจะมีขนาดไฟล์ลดลงประมาณ 25-35% ซึ่งจะช่วยลดขนาดหน้าเว็บและปรับปรุงประสิทธิภาพ
- YouTube พบว่าการเปลี่ยนไปใช้ภาพขนาดย่อ WebP ทำให้หน้าเว็บโหลดเร็วขึ้น 10%
- Facebookพบว่าไฟล์ JPEG มีขนาดลดลง 25-35% และไฟล์ PNG มีขนาดลดลง 80% เมื่อเปลี่ยนไปใช้ WebP
WebP เป็นรูปแบบที่ยอดเยี่ยมซึ่งมาแทนที่รูปภาพ JPEG, PNG และ GIF นอกจากนี้ WebP ยังรองรับทั้งการบีบอัดแบบไม่สูญเสียรายละเอียดและแบบสูญเสียรายละเอียดบางส่วน ในการบีบอัดแบบไม่สูญเสียข้อมูล ข้อมูลจะไม่สูญหาย การบีบอัดแบบสูญเสียบางส่วนจะช่วยลดขนาดไฟล์ แต่อาจทำให้คุณภาพของรูปภาพลดลง
แปลงรูปภาพเป็น WebP
โดยทั่วไป ผู้คนจะใช้วิธีใดวิธีหนึ่งต่อไปนี้ในการแปลงรูปภาพเป็น WebP นั่นคือcwebpเครื่องมือบรรทัดคำสั่งหรือปลั๊กอิน WebP ของ Imagemin (แพ็กเกจ npm)
โดยทั่วไปแล้ว ปลั๊กอิน WebP ของ Imagemin เป็นตัวเลือกที่ดีที่สุดหากโปรเจ็กต์ของคุณใช้สคริปต์บิลด์หรือเครื่องมือบิลด์ (เช่น 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
คุณสามารถใช้ปลั๊กอิน WebP ของ Imagemin เพียงอย่างเดียวหรือจะใช้ร่วมกับเครื่องมือสร้างที่คุณชื่นชอบก็ได้ (Webpack/Gulp/Grunt/ฯลฯ) ซึ่งโดยปกติจะเกี่ยวข้องกับการเพิ่มโค้ดประมาณ 10 บรรทัดลงในสคริปต์บิลด์หรือไฟล์การกําหนดค่าสําหรับเครื่องมือบิลด์ ต่อไปนี้คือตัวอย่างวิธีดำเนินการสำหรับ Webpack, Gulp และ Grunt
หากไม่ได้ใช้เครื่องมือสร้างอย่างใดอย่างหนึ่งดังกล่าว คุณสามารถใช้ Imagemin เพียงอย่างเดียวเป็นสคริปต์ Node ได้ สคริปต์นี้จะแปลงไฟล์ในไดเรกทอรี 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 แก่เบราว์เซอร์รุ่นใหม่และรูปภาพสำรองแก่เบราว์เซอร์รุ่นเก่าก็ได้ โดยทำดังนี้
ก่อน:
<img src="flower.jpg" alt="">
หลัง:
<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> มีตัวห่อสำหรับแท็ก <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 เพื่อให้แคชเข้าใจว่ารูปภาพอาจแสดงผลแตกต่างกันไปโดยขึ้นอยู่กับส่วนหัว Accept ดังนี้
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Accept"
</IfModule>
</FilesMatch>
กฎการเขียนใหม่ก่อนหน้านี้จะค้นหารูปภาพ JPEG หรือ PNG ที่ขอในเวอร์ชัน WebP หากพบ 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