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

Katie Hempenius

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

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

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

วัดระยะทาง

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

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

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

ปลั๊กอิน

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

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

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

CLI ของรูปภาพต่ำสุด

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

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

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

โมดูล npm ของรูปภาพ

หากคุณใช้เครื่องมือสร้างอย่างใดอย่างหนึ่งต่อไปนี้ ดู Codelab สำหรับ Imagemin ด้วย webpack, gulp หรือพูดพล่าม

คุณยังสามารถใช้ 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);
})();