Image Optimizer CLI

ภาพรวม

ก่อน deploy เว็บต้องรันหลายขั้นตอนมือ: compress รูป, แปลงเป็น WebP, resize ตาม breakpoints โปรเจกต์นี้รวมทุกขั้นตอนเป็น command เดียว รันจาก project root

วิธีใช้งาน

# compress ทุกรูปใน src/images/ → dist/images/
imgopt --src src/images --out dist/images

# ระบุ format และ quality
imgopt --format webp --quality 85

# Resize เป็นหลาย sizes (responsive images)
imgopt --widths 320,768,1280 --suffix

# Dry run: แสดงว่าจะทำอะไร ไม่เขียนจริง
imgopt --dry-run

สิ่งที่ทำ

• รับ directory input → output และ options ผ่าน commander
• แปลง JPG/PNG/GIF เป็น WebP หรือ AVIF ด้วย sharp
• สร้าง responsive versions: hero.webp, hero-768.webp, hero-320.webp
• strip EXIF metadata (ลบข้อมูล GPS, camera)
• progress bar ด้วย ora + สรุปขนาดก่อน/หลัง
• preserve directory structure: src/blog/cover.jpg → dist/blog/cover.webp

ผลลัพธ์ทั่วไป

รูป JPG ขนาด 2MB → WebP ที่ quality 85 → ~180KB (ลดลง 91%) — ทดสอบกับรูป photography

ปัญหาที่เจอ

sharp ใช้ native binaries ที่ต่างกันในแต่ละ OS — CI บน Linux แต่ dev บน Windows WSL2 ทำให้ต้องระบุ sharp ใน optionalDependencies และ build เฉพาะ platform ที่ต้องการ

เทคโนโลยี

• TypeScript + Node.js 20
• sharp สำหรับ image processing
• commander สำหรับ CLI
• ora + cli-progress สำหรับ progress display
• glob สำหรับ file discovery