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

Katie Hempenius

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

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

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

วัดระยะทาง

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

รูปภาพขั้นต่ำ

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

ปลั๊กอิน

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

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

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

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 แบบเดี่ยวๆ เป็นสคริปต์โหนดได้ด้วย โค้ดนี้ใช้ปลั๊กอิน "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);
})();