ใช้อิมเมจ WebP

Katie Hempenius
Katie Hempenius

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

รูปภาพ 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/etc.). ซึ่งโดยปกติจะต้องมีการเพิ่มโค้ดประมาณ 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> อย่างน้อย 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