Compress รูป บน Front End ก่อน Uploadให้มันจบๆไป Server จะได้สบาย :)
การ Compress รูป เป็นเรื่องที่สำคัญมากๆถ้าเราจะทำเว็บที่เปิดให้ user หรือ admin Upload รูปได้ ซึ่งเทคนิดปกติที่ทุกคนทำก็คือ โยนรูป Fullsize ไปที่ Server และปล่อยให้ script ตัวนึง Compress รวมถึง แปลงรูปให้อยู่ใน Format ที่ต้องใช้ แต่ปัญหาที่เราจะเจอเลยก็คือ ถ้ารูปที่เราอัพโหลดใหญ่เกินไป user จะใช้เวลานานมากๆในการอัพโหลด และ Server ก็ต้องทำงานหนักมากขึ้น หลายๆคนคงจะทราบแล้วว่ามีเทคนิคที่ทำให้เราสามารถ Compress และ Resize รูปบน Front End ได้ ก่อนที่จะอัพโหลดขึ้นไปเก็บบน Server แต่ว่า เทคนิคที่นิยมใช้เป็นการใช้ความสามารถของ Canvas ในการ resize และ compress รูป ซึ่งไม่ได้เทียบเท่า การบีบอัดที่ server ใช้ และก็ไม่สามารถ แปลงเป็น format อื่นๆอย่าง webp หรือ avif ได้ แต่หลังจากที่ มี Web Assembly ออกมาเราก็สามารถ ทำเรื่องเหล่านี้บน front end ได้ง่ายขึ้นกว่าเดิมซึ่งวิธีการทำไม่ยากเลย
มันเริ่มจาก Squoosh
หลายปีก่อน Google ปล่อย Web App ตัวนึงที่ใช้สำหรับ Compress รูปชื่อ https://squoosh.app/ โดยที่เบื้องหลังเว็บตัวนี้ Google ได้ Complie library สำหรับการ Compress รูปที่มีอยู่ในตลาดอยู่แล้ว จาก ภาษา C มาเป็น Web Assembly ผ่าน Tools ที่ชื่อว่า Emscripten
ตอนแรกก็ว่าจะสอนงัด lib ตัวนี้แต่เปลี่ยนใจเป็นผมงัดให้ดีกว่าเพราะมันไม่ง่ายเลยแล้วแต่ละอันก็มีวิธีแงะงัดต่างกันออกไป โดยหลักการหลักๆคือเราต้องแปลงรูปเป็นไฟล์ image data ก่อนแล้วก็โยนเข้าไปใน Lib ให้มันแปลงให้ ซึ่ง lib จะ return ออกมาเป็น base64 data ของตัว Image วิธีการก็ตามตัวอย่างด้านล่างแต่ถ้าอยากไปดูตัวเต็มๆก็ไปดูได้ที่ GitHub นี้เลยครับ โดย หลักๆที่ Lib ตัวนี้ทำได้จะประกอบด้วย
- Encode WEBP
- Encode AVIF
- Encode JPEG
- Encode PNG
- Rotate Image
- Resize Image
- Resize Pixel Art Image
- Reduce Color of Image
เร็วมั้ย กิน CPU มั้ย
คำตอบคือ ตอบยากมากๆครับ เพราะอยู่ที่ ว่าเรา compress แบบไหนและเลือก compression rate สูงมากมั้ย ยิ่งสูงมากก็ยิ่งใช้ CPU มากและช้ามากตามไปด้วย เพราะฉะนั้นแล้ว ลองเทสก่อนเสมอๆครับว่า ใช้ parameter อะไร แล้วผลลัพธ์ออกมาดีที่สุด แต่ถ้าให้ผมสรุปแบบรวมๆก็ขอตอบว่า “ไม่เร็วมาก แต่ไม่ช้าจนน่ารำคาญ และใช้บน production ได้ครับ”
คำเตือน
วิธีการนี้จะใช้ได้เฉพาะ Browser ที่ support Web Assembly เท่านั้น ซึ่งดู list ได้ที่ด้านล่าง
ถึงแม้จะดูเหมือนว่าใช้ได้ทุก Browser แต่ก็อย่าลืม ทำ Fallback เป็น Server Compress ไว้ใช้ในกรณีที่ Browser ไม่ Support ด้วย
