การรองรับตัวแปลงรหัสแบบใหม่ การออกแบบที่อัปเดต และการสนับสนุน 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 ใช้ ระบบใช้ผู้ปฏิบัติงานอย่างกว้างขวาง ระบบจึงถอดรหัส ประมวลผล และเข้ารหัสรูปภาพทั้งหมดพร้อมกัน
นอกจากนี้เรายังใช้ Rollup เพื่อรวมทุกอย่างไว้ในไฟล์ JavaScript เดียวเพื่อให้การติดตั้งผ่าน npx เป็นไปอย่างรวดเร็วและราบรื่น นอกจากนี้ CLI ยังมีการบีบอัดอัตโนมัติ โดยจะพยายามลดคุณภาพของรูปภาพลงมากที่สุดโดยไม่ลดทอนคุณภาพของภาพ
(โดยใช้เมตริก Butteraugli)
คุณสามารถใช้ Squoosh CLI เพื่อบีบอัดรูปภาพในเว็บแอปให้อยู่ในรูปแบบที่หลากหลายและใช้องค์ประกอบ <picture> เพื่อให้เบราว์เซอร์เลือกเวอร์ชันที่ดีที่สุด นอกจากนี้ เราวางแผนที่จะสร้างปลั๊กอินสำหรับ Webpack, Rollup และเครื่องมือสร้างอื่นๆ เพื่อให้การบีบอัดรูปภาพกลายเป็นส่วนหนึ่งของกระบวนการสร้างโดยอัตโนมัติ
เปลี่ยนกระบวนการบิลด์จาก Webpack เป็น Rollup
ทีมเดียวกับที่สร้าง Squoosh ได้ใช้เวลามากมายไปกับการพิจารณาเครื่องมือการสร้าง สำหรับรายงานเครื่องมือในปีนี้ และตัดสินใจเปลี่ยนกระบวนการบิลด์ของเราจาก Webpack ไปเป็น Rollup
ในตอนแรก โปรเจ็กต์เริ่มต้นด้วย Webpack เพราะเราต้องการลองใช้แบบเป็นทีม และในช่วงปี 2018 Webpack เป็นเครื่องมือเดียวที่ช่วยให้เราควบคุมการสร้างโปรเจ็กต์ได้ตามที่ต้องการ เมื่อเวลาผ่านไป เราพบว่าระบบปลั๊กอินที่ใช้ง่ายของ Rollup และความเรียบง่ายด้วย ESM ทำให้โปรเจ็กต์นี้เป็นตัวเลือกที่เป็นธรรมชาติ
อัปเดตการออกแบบ UI
เรายังอัปเดตการออกแบบ UI ของแอปที่มี blobs เป็นองค์ประกอบภาพด้วย แต่จะเล่นกันเล็กน้อยเกี่ยวกับ
วิธีที่เราจัดการข้อมูลในโค้ดของเรา Squoosh ส่งข้อมูลรูปภาพที่อยู่รอบๆ เป็น BLOB ทำให้ดูเป็นธรรมชาติ
การใส่ BLOB ลงไปในการออกแบบ (เข้าใจไหม)
การใช้สีก็ได้รับการปรับแต่งเป็นอย่างดี ดังนั้นสีจึงเป็นมากกว่าเฉพาะจุด แต่ยังเป็นเวกเตอร์เพื่อแยกความแตกต่างและเน้นว่ารูปภาพใดอยู่ในบริบทของตัวเลือก สรุปคือ หน้าแรกมีสีสันมากขึ้น และตัวเครื่องมือเองก็ชัดเจนและกระชับขึ้นเล็กน้อย
ต้องทำอะไรต่อไป
เราวางแผนที่จะพัฒนา Squoosh ต่อไป เมื่อรูปแบบรูปภาพใหม่เปิดตัว เราต้องการให้ผู้ใช้ มีที่สำหรับเล่นกับตัวแปลงรหัสโดยไม่ต้องทำงานหนัก เรายังหวังว่าจะขยายการใช้งาน Squoosh CLI และผสานรวมเข้ากับกระบวนการสร้างเว็บแอปพลิเคชันมากขึ้น
Squoosh เป็นโอเพนซอร์สเสมอ แต่เราไม่เคยให้ความสำคัญกับการพัฒนาชุมชน ในปี 2021 เราวางแผนที่จะขยายฐานผู้สนับสนุนและมีกระบวนการเริ่มต้นใช้งานที่ดียิ่งขึ้นสำหรับโครงการ
คุณมีไอเดียสำหรับ Squoosh ไหม โปรดแจ้งให้เราทราบในเครื่องมือติดตามปัญหา ทีมงานกำลังจะขยายเวลาวันหยุดฤดูหนาว แต่เราสัญญาว่าจะติดต่อกลับหาคุณในปีหน้า