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

Katie Hempenius

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

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

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

วัดระยะทาง

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

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

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

ปลั๊กอิน

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

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

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

CLI ของอิมเมจ

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

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

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

โมดูล npm ของ Imagemin

หากคุณใช้เครื่องมือสร้างเหล่านี้ ให้ค้นหาใน 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);
})();