รองรับตัวแปลงรหัสใหม่ ดีไซน์ใหม่ และรองรับ CLI
Squoosh เป็นแอปบีบอัดรูปภาพที่ทีมของเราสร้างและเปิดตัวที่งาน Chrome Dev Summit 2018 เราสร้างเครื่องมือนี้ขึ้นมาเพื่อให้ทดลองใช้ตัวแปลงรหัสภาพต่างๆ และแสดงให้เห็นถึงความสามารถของเว็บสมัยใหม่
วันนี้เราจะเปิดตัวการอัปเดตสำคัญของแอปเพื่อให้รองรับตัวแปลงรหัสมากขึ้น มีการออกแบบใหม่ และวิธีใหม่ในการใช้ Squoosh ในบรรทัดคำสั่ง Squoosh CLI
รองรับตัวแปลงรหัสใหม่
ตอนนี้เรารองรับ OxiPNG, MozJPEG, WebP และ AVIF นอกเหนือจากตัวแปลงรหัสที่รองรับในเบราว์เซอร์แล้ว ตัวแปลงรหัสใหม่ได้เกิดขึ้นอีกครั้งโดยใช้ WebAssembly การคอมไพล์ตัวแปลงรหัสและตัวถอดรหัสในขณะที่ผู้ใช้โมดูล WebAssembly สามารถเข้าถึงและทดสอบตัวแปลงรหัสที่ใหม่กว่าได้แม้ว่าเบราว์เซอร์ที่ผู้ใช้ต้องการใช้ไม่รองรับก็ตาม
การเปิดตัวบรรทัดคำสั่ง Squoosh
นับตั้งแต่การเปิดตัวครั้งแรกในปี 2018 คำขอทั่วไปของผู้ใช้คือการโต้ตอบกับ Squoosh แบบเป็นโปรแกรมโดยไม่มี UI เรารู้สึกว่าเส้นทางนี้ขัดแย้งกันเล็กน้อยเพราะแอปของเราเป็น UI ที่อยู่ด้านบนสุดของเครื่องมือตัวแปลงรหัสตามบรรทัดคำสั่ง อย่างไรก็ตาม เราเข้าใจดีถึงความต้องการที่จะมีปฏิสัมพันธ์กับตัวแปลงรหัส ทั้งชุด แทนที่จะใช้เครื่องมือหลายชนิด เช่นนั้นแล้ว Squoosh CLI
คุณติดตั้ง Squoosh CLI เวอร์ชันเบต้าได้โดยเรียกใช้ npm i @squoosh/cli หรือเรียกใช้
โดยตรงด้วย npx @squoosh/cli [parameters]
Squoosh CLI เขียนขึ้นในโหนดและใช้ประโยชน์จากโมดูล WebAssembly ที่ PWA ใช้ทุกประการ รูปภาพทั้งหมดจะได้รับการถอดรหัส ประมวลผล และเข้ารหัสแบบคู่ขนานผ่านการใช้งานผู้ปฏิบัติงานอย่างเต็มที่
นอกจากนี้เรายังใช้ภาพรวมเพื่อรวมทุกอย่างไว้ในไฟล์ JavaScript เดียวเพื่อให้การติดตั้งผ่าน npx เป็นไปอย่างรวดเร็วและราบรื่น นอกจากนี้ CLI ยังมีการบีบอัดอัตโนมัติ ซึ่งจะพยายามลดคุณภาพของรูปภาพให้มากที่สุดเท่าที่จะเป็นไปได้โดยไม่ลดคุณภาพของภาพ (โดยใช้เมตริก Butteraugli)
Squoosh CLI ช่วยให้คุณบีบอัดรูปภาพในเว็บแอปให้อยู่ในรูปแบบต่างๆ และใช้
องค์ประกอบ <picture>
เพื่อให้เบราว์เซอร์เลือกเวอร์ชันที่ดีที่สุดได้ เรายังวางแผนที่จะสร้างปลั๊กอินสำหรับ Webpack, Rollup และเครื่องมือบิลด์อื่นๆ เพื่อทำให้การบีบอัดรูปภาพเป็นขั้นตอนโดยอัตโนมัติในกระบวนการสร้างของคุณ
การเปลี่ยนแปลงกระบวนการสร้างจาก Webpack เป็น Rollup
ทีมเดียวกับที่สร้าง Squoosh ได้ใช้เวลาอย่างมากไปกับการตรวจสอบเครื่องมือสร้างงาน สำหรับรายงานเครื่องมือในปีนี้ และตัดสินใจเปลี่ยนกระบวนการสร้างของเราจาก Webpack ไปเป็นภาพรวม
โครงการนี้เริ่มต้นจาก Webpack เพราะเราต้องการทดลองใช้กันเป็นทีม และในตอนนั้นเมื่อปี 2018 Webpack ก็เป็นเครื่องมือเดียวที่ทำให้เราสามารถควบคุมการตั้งค่าโครงการได้ตามที่ต้องการ เมื่อเวลาผ่านไป เราได้พบว่าระบบปลั๊กอินที่ใช้งานง่ายของ Rollup และความเรียบง่ายด้วย ESM ทำให้ตัวเลือกนี้ เป็นตัวเลือกที่เป็นธรรมชาติสำหรับโปรเจ็กต์นี้
อัปเดตการออกแบบ UI
ทั้งยังอัปเดตการออกแบบ UI ของแอปให้มี blobs เป็นองค์ประกอบภาพด้วย เป็นเรื่องน่าสับสนเล็กน้อย
เกี่ยวกับวิธีจัดการข้อมูลในโค้ดของเรา Squoosh ส่งข้อมูลรูปภาพเป็นวงกลมเพื่อให้ดู
เป็นธรรมชาติถ้าใส่บล็อบในการออกแบบ (ใช่ไหมล่ะ)
แล้วก็มีการเพิ่มประสิทธิภาพการใช้สีด้วย เพื่อให้สีนั้นเป็นมากกว่าแค่สีเฉพาะจุด แต่ยังมีเวกเตอร์เพิ่มเติมเพื่อแยกความแตกต่างและเน้นย้ำว่ารูปภาพใดอยู่ในบริบทของตัวเลือก โดยสรุปแล้ว หน้าแรกจะมีสีสันสดใสมากขึ้น และเครื่องมือเองก็มีความชัดเจนและกระชับขึ้นเล็กน้อย
แล้วต้องทำอะไรต่อไป
เราวางแผนที่จะพัฒนา Squoosh ต่อไป เมื่อมีการเปิดตัวรูปแบบภาพใหม่ เราอยากให้ผู้ใช้ มีที่สำหรับเล่นกับตัวแปลงรหัสโดยไม่ต้องออกแรงมาก เรายังหวังที่จะขยายการใช้ Squoosh CLI และผสานรวมเข้ากับกระบวนการสร้างเว็บแอปพลิเคชันให้มากขึ้น
Squoosh เป็นซอฟต์แวร์โอเพนซอร์สมาโดยตลอด แต่เราไม่เคยมุ่งเน้นที่การขยายชุมชน ในปี 2021 เราวางแผนที่จะขยายฐานผู้สนับสนุนและมีกระบวนการเริ่มต้นใช้งานที่ดียิ่งขึ้นสำหรับโครงการ
คุณมีไอเดียเกี่ยวกับ Squoosh บ้างไหม โปรดแจ้งให้เราทราบในเครื่องติดตามปัญหา ทางทีมกำลังจะขยายเวลาวันหยุดฤดูหนาว แต่เราสัญญาว่าจะติดต่อกลับหาคุณในปีใหม่