สาเหตุที่ไม่ควรพลาดผลิตภัณฑ์นี้
รูปภาพที่ไม่ได้บีบอัดจะทำให้หน้าเว็บมีไบต์ที่ไม่จำเป็นเพิ่มขึ้น เนื่องจากรูปภาพอาจเป็นผู้สมัครรับเลือกเป็น Largest Contentful Paint (LCP) ไบต์ที่ไม่จำเป็นเหล่านั้นจึงอาจเพิ่มระยะเวลาในการโหลดทรัพยากรของรูปภาพ ซึ่งอาจส่งผลให้ LCP นานขึ้น
รูปภาพทางด้านขวามีขนาดเล็กกว่ารูปภาพทางด้านซ้าย 40% แต่ผู้ใช้ทั่วไปอาจมองว่ารูปภาพทั้ง 2 เหมือนกัน
|
|
|
|---|
วัดผล
เรียกใช้ Lighthouse เพื่อตรวจสอบโอกาสในการปรับปรุงการโหลดหน้าเว็บโดยการบีบอัดรูปภาพ โอกาสเหล่านี้จะแสดงอยู่ในส่วน "เข้ารหัสรูปภาพอย่างมีประสิทธิภาพ"
Imagemin
Imagemin เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการบีบอัดรูปภาพ เนื่องจากรองรับรูปภาพหลากหลายรูปแบบและผสานรวมกับสคริปต์การสร้างและเครื่องมือการสร้างได้ง่าย Imagemin มีให้ใช้งานทั้งในรูปแบบ CLI และโมดูล npm โดยทั่วไป โมดูล 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
Imagemin CLI ทำงานร่วมกับปลั๊กอิน 5 รายการ ได้แก่ imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant และ imagemin-svgo โดย Imagemin จะใช้ปลั๊กอินที่เหมาะสมตามรูปแบบรูปภาพของอินพุต
หากต้องการบีบอัดรูปภาพในไดเรกทอรี "images/" และบันทึกลงในไดเรกทอรีเดียวกัน ให้เรียกใช้คำสั่งต่อไปนี้ (เขียนทับไฟล์ต้นฉบับ)
$ imagemin images/* --out-dir=images
โมดูล npm ของ Imagemin
หากต้องการใช้ Imagemin กับ Bundler ให้ตรวจสอบว่า Bundler ที่คุณเลือกมีปลั๊กอินสำหรับ Imagemin หรือไม่ ตัวอย่างเช่น webpack เป็น Bundler ยอดนิยมที่รองรับ Imagemin ได้เป็นอย่างดี คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับ วิธีใช้ Imagemin กับ webpack ได้ใน Codelab นี้
นอกจากนี้ คุณยังใช้ 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);
})();