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