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