תמיכה חדשה בקודקים, עיצוב מעודכן ותמיכה ב-CLI!
Squoosh היא אפליקציה לדחיסת תמונות שהצוות שלנו פיתח והשיקה בכנס Chrome למפתחים בשנת 2018. יצרנו אותו כדי שיהיה קל להתנסות עם קודקים שונים של תמונות, ולהציג את היכולות של האינטרנט המודרני.
היום אנחנו משיקים עדכון משמעותי לאפליקציה שכולל יותר תמיכה בקודקים, עיצוב חדש ודרך חדשה להשתמש ב-Squoosh בשורת הפקודה בשם Squoosh CLI.
תמיכה חדשה בקודקים
אנחנו תומכים עכשיו ב-OxiPNG , MozJPEG , WebP ו-AVIF, בנוסף לקודקים שנתמכים במקור בדפדפן. בעקבות השימוש ב-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 יש גם דחיסה אוטומטית, שבה המערכת מנסה להפחית ככל האפשר את איכות התמונה, מבלי לפגוע באיכות הדיוקן החזותית (באמצעות מדד בוטראוגלי).
באמצעות Squoosh CLI אפשר לדחוס את התמונות באפליקציית האינטרנט לכמה פורמטים, ולהשתמש באלמנט <picture> כדי לאפשר לדפדפן לבחור את הגרסה הכי טובה. אנחנו גם מתכננים לפתח
יישומי פלאגין ל-Webpack, rollup וכלי פיתוח אחרים, כדי שדחיסת תמונות תהיה חלק אוטומטי בתהליך ה-build.
שינוי בתהליך ה-build מ-Webpack ל'נכס-על'
אותו צוות שבנה את Squoosh הקדיש זמן רב לבדיקת כלי ה-build עבור דוח הכלים והחליטו להעביר את תהליך ה-build שלנו מ-Webpack ל-rollup.
הפרויקט התחיל בהתחלה עם Webpack כי רצינו לנסות אותו כצוות, ובשנת 2018 Webpack היה הכלי היחיד שנתן לנו מספיק שליטה כדי להגדיר את הפרויקט כמו שרצינו. עם הזמן, גילינו שמערכת יישומי הפלאגין הנוחה של אוסף-העל והפשטות שלו עם ESM, הפכו אותה לבחירה טבעית עבור הפרויקט הזה.
עיצוב מעודכן של ממשק המשתמש
עדכנו גם את העיצוב של ממשק המשתמש של האפליקציה, והיא מופיעה כרכיב חזותי של blobs. זה קצת מלהיב על האופן שבו אנחנו מטפלים בנתונים בקוד שלנו. Squoosh מעביר את נתוני התמונה כ-blob, כך שזה נראה טבעי לכלול כמה blobs בעיצוב (הבנתם?).
גם השימוש בצבעים כובד, כך שהצבע היה יותר ממבטא, אלא גם וקטור שיכול להבחין ולחזק את התמונה בהקשר של האפשרויות. בסך הכול, דף הבית קצת יותר תוסס והכלי עצמו קצת ברור ותמציתי יותר.
מה השלב הבא?
אנחנו מתכננים להמשיך לעבוד על Squoosh. עם ההשקה של פורמט התמונה החדש, אנחנו רוצים שלמשתמשים שלנו יהיה מקום שבו הם יוכלו לשחק עם הקודק ללא מאמץ מיוחד. אנחנו גם מקווים להרחיב את השימוש ב-Squoosh CLI ולשלב יותר בתהליך ה-build של אפליקציית אינטרנט.
Squoosh היה תמיד קוד פתוח, אבל מעולם לא התמקדנו בהגדלת הקהילה. בשנת 2021, אנחנו מתכננים להרחיב את בסיס התורמים שלנו ולשפר את תהליך ההצטרפות לפרויקט.
יש לך רעיונות ל-Squoosh? תוכלו לפנות אלינו דרך אתר המעקב אחר בעיות. הצוות בדרך לחופשת החורף המורחבת, אבל אנחנו מבטיחים לחזור אליך בשנה החדשה.