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