תמיכה חדשה ב-codecs, עיצוב מעודכן ותמיכה ב-CLI!
Squoosh היא אפליקציה לדחיסת תמונות שהצוות שלנו יצר והשיק בכנס Chrome Dev Summit בשנת 2018. יצרנו אותו כדי שיהיה קל להתנסות בפורמטים שונים של קידוד תמונות, וכדי להציג את היכולות של האינטרנט המודרני.
היום אנחנו משיקים עדכון משמעותי לאפליקציה עם תמיכה ביותר קודקים, עיצוב חדש ודרך חדשה להשתמש ב-Squoosh בשורת הפקודה שנקראת Squoosh CLI.
תמיכה בפורמטי Codec חדשים
מעכשיו אנחנו תומכים ב-OxiPNG, MozJPEG, WebP ו-AVIF, בנוסף לקודקים שנתמכים באופן מובנה בדפדפן. השימוש ב-WebAssembly אפשר ליצור קודק חדש. על ידי קומפילציה של מקודד ומפענח של קודק כמודול WebAssembly, המשתמשים יכולים לגשת לקודקים חדשים יותר ולנסות אותם גם אם הדפדפן המועדף שלהם לא תומך בהם.
הפעלת Squoosh! משורת הפקודה
מאז ההשקה המקורית בשנת 2018, בקשה נפוצה של משתמשים הייתה ליצור אינטראקציה עם Squoosh באופן פרוגרמטי בלי ממשק משתמש. התלבטנו לגבי הדרך הזו כי האפליקציה שלנו הייתה ממשק משתמש מעל כלי codec מבוססי שורת פקודה. עם זאת, אנחנו מבינים את הרצון ליצור אינטראקציה עם חבילת הקודקים כולה במקום עם כמה כלים. Squoosh CLI עושה בדיוק את זה.
אפשר להתקין את גרסת הבטא של Squoosh CLI על ידי הרצת הפקודה npm i @squoosh/cli או להריץ אותה ישירות באמצעות הפקודה npx @squoosh/cli [parameters].
כלי ה-CLI של Squoosh כתוב ב-Node ומשתמש באותם מודולי WebAssembly שבהם משתמש ה-PWA. באמצעות שימוש נרחב בעובדים, כל התמונות מפוענחות, מעובדות ומקודדות במקביל.
אנחנו גם משתמשים ב-Rollup כדי לארוז את הכול בקובץ JavaScript אחד, כדי לוודא שההתקנה דרך
npx תהיה מהירה וחלקה. בנוסף, ה-CLI מציע דחיסה אוטומטית, שבה הוא מנסה להפחית את איכות התמונה כמה שיותר בלי לפגוע בנאמנות החזותית (באמצעות מדד Butteraugli).
באמצעות Squoosh CLI אפשר לדחוס את התמונות באפליקציית האינטרנט לכמה פורמטים ולהשתמש ברכיב <picture> כדי לאפשר לדפדפן לבחור את הגרסה הכי טובה. אנחנו מתכננים גם ליצור תוספים ל-Webpack, ל-Rollup ולכלי בנייה אחרים, כדי שדחיסת תמונות תהיה חלק אוטומטי בתהליך הבנייה.
שינוי תהליך הבנייה מ-Webpack ל-Rollup
הצוות שיצר את Squoosh השקיע השנה זמן רב בבדיקת כלי build עבור Tooling Report, והחליט להחליף את תהליך ה-build מ-Webpack ל-Rollup.
התחלנו את הפרויקט עם Webpack כי רצינו לנסות אותו כצוות, ובזמנו, בשנת 2018, Webpack היה הכלי היחיד שנתן לנו מספיק שליטה כדי להגדיר את הפרויקט כמו שרצינו. עם הזמן, גילינו שמערכת הפלאגינים הפשוטה של Rollup והפשטות שלה עם ESM הפכו אותה לבחירה טבעית לפרויקט הזה.
עיצוב ממשק המשתמש עודכן
בנוסף, עדכנו את עיצוב ממשק המשתמש של האפליקציה, והוספנו את blobs כרכיב ויזואלי. זה קצת משחק מילים על האופן שבו אנחנו מטפלים בנתונים בקוד שלנו. הנתונים של התמונה מועברים ב-Squoosh כ-blob, ולכן היה טבעי לכלול כמה blobs בעיצוב (הבנתם?).
גם השימוש בצבעים שופר, כך שהצבע הוא לא רק הדגשה אלא גם וקטור להבחנה בין התמונות ולחיזוק ההקשר של התמונה שנבחרה. בסך הכול, דף הבית נראה יותר תוסס והכלי עצמו יותר ברור ותמציתי.
מה השלב הבא?
אנחנו מתכננים להמשיך לעבוד על Squoosh. אנחנו רוצים שלמשתמשים שלנו יהיה מקום שבו הם יוכלו להתנסות עם הקודק בלי להתאמץ יותר מדי, כשהפורמט החדש של התמונות יושק. אנחנו גם מקווים להרחיב את השימוש ב-Squoosh CLI ולשלב אותו יותר בתהליך build של אפליקציית אינטרנט.
Squoosh תמיד היה קוד פתוח, אבל אף פעם לא התמקדנו בהגדלת הקהילה. בשנת 2021, אנחנו מתכננים להרחיב את בסיס התורמים שלנו ולשפר את תהליך ההצטרפות לפרויקט.
יש לך רעיונות לשיפור Squoosh? נשמח לקבל עדכון בכלי למעקב אחר בעיות. הצוות יוצא לחופשת חורף ארוכה, אבל אנחנו מבטיחים לחזור אליך בשנה החדשה.