ใช้ Imagemin เพื่อบีบอัดรูปภาพ

Katie Hempenius
Katie Hempenius

รูปภาพที่ไม่ได้บีบอัดจะทำให้หน้าเว็บมีจำนวนไบต์ที่ไม่จำเป็น เนื่องจากรูปภาพอาจเป็นผู้สมัครสําหรับ Largest Contentful Paint (LCP) ไบต์ที่ไม่จําเป็นเหล่านั้นอาจเพิ่มระยะเวลาในการโหลดทรัพยากรของรูปภาพ ซึ่งอาจส่งผลให้ LCP นานขึ้น

รูปภาพทางด้านขวามีขนาดเล็กกว่ารูปภาพทางด้านซ้าย 40% แต่ผู้ใช้ทั่วไปอาจมองไม่เห็นความแตกต่าง

20 KB

12 KB

วัดระยะทาง

เรียกใช้ Lighthouse เพื่อตรวจสอบโอกาสในการปรับปรุงการโหลดหน้าเว็บโดยการบีบอัดรูปภาพ โอกาสเหล่านี้จะแสดงอยู่ในส่วน "เข้ารหัสรูปภาพอย่างมีประสิทธิภาพ"

รูปภาพ

Imagemin

Imagemin เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการบีบอัดรูปภาพเนื่องจากรองรับรูปแบบรูปภาพได้หลากหลายและผสานรวมกับสคริปต์บิลด์และเครื่องมือบิลด์ได้อย่างง่ายดาย Imagemin มีให้บริการทั้งในรูปแบบ CLI และ npm module โดยทั่วไปแล้ว โมดูล npm เป็นตัวเลือกที่ดีที่สุดเนื่องจากมีตัวเลือกการกำหนดค่ามากกว่า แต่ CLI ก็เป็นอีกทางเลือกหนึ่งที่ดีหากคุณต้องการลองใช้ Imagemin โดยไม่ต้องเขียนโค้ดใดๆ

ปลั๊กอิน

Imagemin สร้างขึ้นจาก "ปลั๊กอิน" ปลั๊กอินคือแพ็กเกจ npm ที่บีบอัดรูปแบบรูปภาพหนึ่งๆ (เช่น "mozjpeg" จะบีบอัด JPEG) รูปแบบรูปภาพยอดนิยมอาจมีปลั๊กอินให้เลือกหลายรายการ

สิ่งสำคัญที่สุดที่ควรพิจารณาเมื่อเลือกปลั๊กอินคือปลั๊กอินนั้นเป็นแบบ "สูญเสียคุณภาพ" หรือ "ไม่สูญเสียคุณภาพ" ในการบีบอัดแบบไม่สูญเสียข้อมูล ข้อมูลจะไม่สูญหาย การบีบอัดแบบสูญเสียคุณภาพจะลดขนาดไฟล์ แต่อาจทำให้คุณภาพรูปภาพลดลง หากปลั๊กอินไม่ได้ระบุว่า "สูญเสียคุณภาพ" หรือ "ไม่สูญเสียคุณภาพ" คุณสามารถดูได้จาก API ของมัน หากระบุคุณภาพของภาพเอาต์พุตได้ แสดงว่า "สูญเสียคุณภาพ"

สำหรับคนส่วนใหญ่แล้ว ปลั๊กอินแบบสูญเสียคุณภาพเป็นตัวเลือกที่ดีที่สุด ซึ่งจะช่วยประหยัดพื้นที่เก็บข้อมูลได้มากขึ้น และคุณปรับระดับการบีบอัดให้เหมาะกับความต้องการของคุณได้ ตารางด้านล่างแสดงรายการปลั๊กอิน Imagemin ที่ได้รับความนิยม รายการข้างต้นไม่ใช่ปลั๊กอินเพียงรายการเดียวที่ใช้ได้ แต่ทั้งหมดเป็นตัวเลือกที่ดีสำหรับโปรเจ็กต์ของคุณ

รูปแบบรูปภาพ ปลั๊กอินที่สูญเสียคุณภาพ ปลั๊กอินแบบไม่สูญเสียคุณภาพ
JPEG imagemin-mozjpeg imagemin-jpegtran
PNG imagemin-pngquant imagemin-optipng
GIF imagemin-giflossy imagemin-gifsicle
SVG imagemin-svgo
WebP imagemin-webp imagemin-webp

Imagemin CLI

CLI ของ Imagemin ใช้งานได้กับปลั๊กอิน 5 รายการ ได้แก่ imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant และ imagemin-svgo Imagemin จะใช้ปลั๊กอินที่เหมาะสมตามรูปแบบรูปภาพของอินพุต

หากต้องการบีบอัดรูปภาพในไดเรกทอรี "images/" และบันทึกลงในไดเรกทอรีเดียวกัน ให้เรียกใช้คำสั่งต่อไปนี้ (เขียนทับไฟล์ต้นฉบับ)

$ imagemin images/* --out-dir=images

โมดูล npm ของ Imagemin

หากต้องการใช้ Imagemin กับเครื่องมือรวม ให้ตรวจสอบว่าเครื่องมือรวมที่คุณเลือกมีปลั๊กอินสำหรับ Imagemin หรือไม่ เช่น webpack เป็นเครื่องมือรวมไฟล์ยอดนิยมที่รองรับ Imagemin ได้เป็นอย่างดี ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้ Imagemin กับ webpack ในโค้ดแล็บนี้

นอกจากนี้ คุณยังใช้ Imagemin เพียงอย่างเดียวเป็นสคริปต์ Node ได้อีกด้วย โค้ดนี้ใช้ปลั๊กอิน "imagemin-mozjpeg" เพื่อบีบอัดไฟล์ JPEG เป็นคุณภาพ 50 ('0' เป็นคุณภาพต่ำสุด และ '100' เป็นคุณภาพสูงสุด)

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async() => {
 
const files = await imagemin(
     
['source_dir/*.jpg', 'another_dir/*.jpg'],
     
{
        destination
: 'destination_dir',
        plugins
: [imageminMozjpeg({quality: 50})]
     
}
 
);
  console
.log(files);
})();