สาเหตุที่ไม่ควรพลาดผลิตภัณฑ์นี้
รูปภาพ 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/ฯลฯ) โดยปกติแล้วคุณจะต้องเพิ่มโค้ดประมาณ 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> ตั้งแต่ 0 แท็กขึ้นไปและแท็ก <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> อาจมีความยาวค่อนข้างยาวเนื่องจากมีแหล่งที่มาหลายแหล่ง ด้านล่างนี้คือกฎ Apache mod_rewrite ที่แสดงทางเลือก 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>
กฎการเขียนใหม่ด้านบนจะค้นหาเวอร์ชัน WebP ของรูปภาพ JPEG หรือ PNG ที่ขอ หากพบทางเลือก 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 > Options > Performance) และมองหาผลลัพธ์ของการตรวจสอบแสดงรูปภาพในรูปแบบรุ่นใหม่ Lighthouse จะแสดงรูปภาพที่ไม่ได้แสดงใน WebP