دعم برامج ترميز جديد وتصميم محدّث ودعم واجهة سطر الأوامر!
Squoosh هو تطبيق لضغط الصور أنشأه فريقنا ونشره في مؤتمر Chrome Dev Summit لعام 2018. وقد صمّمناها لتسهيل تجربة برامج ترميز مختلفة للصور وعرض الإمكانات التي تتميز بها شبكة الإنترنت الحديثة.
واليوم، سنصدر تحديثًا رئيسيًا للتطبيق يتضمّن مزيدًا من برامج الترميز وتصميمًا جديدًا وطريقة جديدة لاستخدام Squoosh في سطر الأوامر المسمى Squoosh CLI.
إتاحة برامج ترميز جديدة
نتيح حاليًا استخدام OxiPNG وMozJPEG وWebP وAVIF، بالإضافة إلى برامج الترميز المتوافقة في الأصل مع متصفحك. بفضل استخدام WebAssembly، أصبح من الممكن إنشاء برنامج ترميز جديد. ومن خلال تجميع برنامج ترميز وفك ترميز كبرنامج ترميز وفك ترميز في وحدة WebAssembly، يمكن لمستخدمي وحدة WebAssembly الوصول إلى برامج ترميز أحدث وتجربتها حتى إذا كان المتصفّح الذي يفضّلونه لا يتيح استخدامها.
إطلاق سطر الأوامر Squoosh!
منذ الإطلاق الأول له في عام 2018، كان الطلب الشائع لدى المستخدمين هو التفاعل مع Squoosh آليًا بدون واجهة مستخدم. لقد شعرنا ببعض التعارض بشأن هذا المسار لأنّ تطبيقنا كان واجهة مستخدم في أعلى أدوات الترميز المستنِدة إلى سطر الأوامر. إلا أننا نتفهم الرغبة في التفاعل مع مجموعة جميع برامج الترميز بدلاً من استخدام أدوات متعددة. ذلك أن Squoosh CLI يفعل ذلك.
يمكنك تثبيت الإصدار التجريبي من واجهة سطر الأوامر Squoosh من خلال تشغيل npm i @squoosh/cli أو تشغيله
مباشرةً باستخدام npx @squoosh/cli [parameters].
تتم كتابة واجهة سطر الأوامر Squoosh في Node ويتم استخدام وحدات WebAssembly نفسها التي يستخدمها تطبيق الويب التقدّمي (PWA). ويتم فك ترميز جميع الصور ومعالجتها وترميزها بالتوازي مع الاستخدام المكثّف للعمال.
نستخدم أيضًا ميزة دمج البيانات المجمّعة في ملف JavaScript واحد لضمان أن يتم التثبيت عبر
npx بسرعة وسلاسة. يوفّر واجهة سطر الأوامر أيضًا ميزة الضغط التلقائي لخفض جودة الصورة قدر الإمكان بدون التأثير على الدقة المرئية
(باستخدام مقياس Butteraugli).
باستخدام واجهة سطر الأوامر Squoosh، يمكنك ضغط الصور في تطبيق الويب إلى تنسيقات متعددة واستخدام عنصر <picture> للسماح للمتصفّح باختيار أفضل إصدار. ونخطط أيضًا لإنشاء مكوّنات إضافية لـ Webpack وRollup وأدوات إنشاء أخرى لجعل ضغط الصور جزءًا تلقائيًا من عملية التصميم.
تغيير عملية الإصدار من Webpack إلى دمج القنوات
لقد قضى الفريق نفسه الذي أنشأ Squoosh وقتًا طويلاً في البحث عن أدوات إنشاء هذا العام لتقرير الأدوات، وقرر تغيير عملية التصميم لدينا من Webpack إلى دمج القنوات.
بدأ المشروع في البداية باستخدام Webpack لأنّنا أردنا تجربته كفريق، وفي ذلك الوقت في عام 2018، كانت Webpack الأداة الوحيدة التي منحتنا قدرًا كافيًا من التحكّم لإعداد المشروع على النحو الذي أردناه. مع مرور الوقت، توصّلنا إلى نظام سهل للمكوّنات الإضافية من شركة Rollup، وبساطة استخدامه مع ESM، ما جعله خيارًا طبيعيًا لهذا المشروع.
تصميم محدّث لواجهة المستخدم
لقد عدّلنا أيضًا تصميم واجهة المستخدم للتطبيق الذي يعرض blobs كعنصر مرئي. إنها ركيزة بسيطة حول كيفية تعاملنا مع البيانات في التعليمات البرمجية. يمرر Squoosh بيانات الصورة حول الكائن الثنائي الكبير (blob)، لذا بدا الأمر طبيعيًا لتضمين بعض النقاط في التصميم (هل فهمت ذلك؟).
تم تحسين استخدام الألوان أيضًا، بحيث كان هذا اللون أكثر من مجرد تمييز ولكنه كان متجهًا لتمييز وتعزيز الصورة في سياق الخيارات. بشكل عام، تكون الصفحة الرئيسية أكثر حيوية، والأداة نفسها أكثر وضوحًا واختصارًا.
ما الخطوات التالية؟
نحن نخطط لمواصلة العمل على Squoosh. مع إطلاق التنسيق الجديد للصور، نريد أن يكون للمستخدمين مكان يمكنهم فيه تشغيل برنامج الترميز بدون عناء. ونأمل أيضًا توسيع نطاق استخدام Squoosh CLI ودمجه بشكل أكبر في عملية إنشاء تطبيق ويب.
لطالما كانت لعبة Squoosh مفتوحة المصدر، لكننا لم نركّز أبدًا على تنمية المنتدى. في عام 2021، نخطط لتوسيع قاعدة المساهمين لدينا وإدخال عملية إعداد أفضل للمشروع.
هل لديك أي أفكار بخصوص Squoosh؟ يُرجى إخبارنا بها من خلال أداة تتبُّع المشاكل. من المقرر أن يقضي الفريق عطلة شتوية ممتدة، لكننا نعدك بالعودة إليك في العام الجديد.