ใช้อิมเมจ WebP

Katie Hempenius
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) โดยทั่วไปแล้วปลั๊กอิน 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

คุณสามารถใช้ปลั๊กอิน WebP ของ Imagemin เพียงอย่างเดียวหรือจะใช้ร่วมกับเครื่องมือสร้างที่คุณชื่นชอบก็ได้ (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> มีตัวห่อสำหรับแท็ก <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