ใช้อิมเมจ WebP

Katie Hempenius

สาเหตุที่ไม่ควรพลาดผลิตภัณฑ์นี้

รูปภาพ 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