ใช้อิมเมจ WebP

Katie Hempenius
Katie Hempenius
X

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

รูปภาพ WebP มีขนาดเล็กกว่ารูปภาพ JPEG และ PNG ที่เทียบเท่ากัน โดยปกติแล้วขนาดไฟล์จะลดลง 25-35% ซึ่งจะช่วยลดขนาดหน้าเว็บและปรับปรุงประสิทธิภาพ

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 บรรทัดลงในสคริปต์บิลด์หรือไฟล์การกำหนดค่าสำหรับเครื่องมือบิลด์

หากไม่ได้ใช้เครื่องมือสร้างเหล่านั้น คุณสามารถใช้ 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 ในเบราว์เซอร์ที่ใหม่กว่าและรูปภาพสำรองในเบราว์เซอร์ที่เก่ากว่า ดังนี้

ก่อน

<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> มี Wrapper สำหรับแท็ก <source> อย่างน้อย 0 รายการและแท็ก <img> 1 รายการ

<source>

แท็ก <source> ระบุทรัพยากรสื่อ

เบราว์เซอร์จะใช้แหล่งที่มาแรกที่แสดงในรายการซึ่งอยู่ในรูปแบบที่รองรับ หากเบราว์เซอร์ไม่รองรับรูปแบบใดๆ ที่ระบุไว้ในแท็ก <source> เบราว์เซอร์จะกลับไปโหลดรูปภาพที่ระบุโดยแท็ก <img>

<img>

แท็ก <img> คือสิ่งที่ทำให้โค้ดนี้ทำงานในเบราว์เซอร์ที่ไม่รองรับแท็ก <picture> หากเบราว์เซอร์ไม่รองรับแท็ก <picture> เบราว์เซอร์จะละเว้นแท็กที่ไม่รองรับ ดังนั้นจึง "เห็น" เฉพาะแท็ก <img src="flower.jpg" alt=""> และโหลดรูปภาพนั้น

การอ่านส่วนหัว Accept ของ HTTP

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

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Accept"
  </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