إتاحة برامج ترميز جديدة والتصميم المحدّث وواجهة سطر الأوامر
Squoosh هو تطبيق لضغط الصور صمّمه فريقنا ويظهر لأول مرة في مؤتمر Chrome Dev Summit لعام 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 في عقد يستخدم وحدات WebAssembly نفسها التي يستخدمها PWA. ومن خلال الاستخدام المكثّف للعمال، يتم فك ترميز جميع الصور ومعالجتها وترميزها بالتوازي.
نستخدم أيضًا أداة "دمج البيانات" لتجميع كل البيانات في ملف JavaScript واحد لضمان أن تكون عملية التثبيت عبر npx سريعة وسلسة. توفّر واجهة سطر الأوامر أيضًا الضغط التلقائي حيث تحاول خفض جودة الصورة قدر الإمكان بدون التأثير سلبًا في الدقة المرئية
(باستخدام مقياس Butteraugli).
باستخدام Squoosh CLI، يمكنك ضغط الصور في تطبيق الويب إلى تنسيقات متعددة واستخدام
العنصر <picture> للسماح للمتصفح باختيار أفضل إصدار. ونخطط كذلك لإنشاء مكوّنات إضافية خاصة بكل من Webpack وrollup وأدوات تصميم أخرى، لجعل ضغط الصور جزءًا تلقائيًا من عملية التصميم.
تغيير عملية إنشاء حزمة الويب من حزمة الويب إلى عملية الدمج
قضى الفريق نفسه الذي أنشأ Squoosh قدرًا كبيرًا من الوقت في البحث عن أدوات الإنشاء هذا العام لتقرير الأدوات، وقرّر تحويل عملية التصميم من Webpack إلى عملية "دمج".
بدأ المشروع في البداية باستخدام Webpack لأنّنا أردنا تجربته كفريق، وفي عام 2018، كانت Webpack هي الأداة الوحيدة التي أعطتنا التحكم الكافي لإعداد المشروع بالطريقة التي أردناها. ومع مرور الوقت، تبيّن لنا أنّ البساطة التي يتميّز بها نظام المكونات الإضافية لـ Rollup، بالإضافة إلى بساطتها مع ESM، هي الاختيار الطبيعي لهذا المشروع.
تصميم محدّث لواجهة المستخدم
لقد عدّلنا أيضًا تصميم واجهة المستخدم في التطبيق الذي يعرض blobs كعنصر مرئي. إنها تورية بسيطة فيما يتعلق
بكيفية تعاملنا مع البيانات في تعليماتنا البرمجية. يمرر Squoosh بيانات الصورة كنقطة، لذا كان من الطبيعي تضمين بعض النقاط في التصميم (هل حصلت عليها؟).
تم صقل استخدام اللون أيضًا، بحيث كان اللون أكثر من مجرد علامة تمييز ولكن بالإضافة إلى ذلك متجه للتمييز وتعزيز الصورة الموجودة في سياق الخيارات. بشكل عام، تبدو الصفحة الرئيسية أكثر وضوحًا والأداة نفسها أكثر وضوحًا وإيجازًا.
ما هي الخطوات التالية؟
نخطط لمواصلة العمل على Squoosh. مع إطلاق تنسيق الصورة الجديد، نريد توفير مساحة تتيح للمستخدمين إمكانية استخدام برنامج الترميز بدون أي عبء تحميل. ونأمل أيضًا توسيع نطاق استخدام Squoosh CLI ودمج المزيد منه في عملية إنشاء تطبيق ويب.
لطالما كانت Squoosh منصة مفتوحة المصدر، ولكن لم نهتم أبدًا بالتركيز على تطوير المنتدى. في عام 2021، نخطط لتوسيع قاعدة مساهمينا وتوفير عملية إعداد وتأهيل أفضل للمشروع.
هل لديك أي أفكار لـ Squoosh؟ يُرجى إعلامنا بذلك من خلال أداة تتبُّع المشاكل. ينطلق الفريق في عطلة شتوية ممتدة، لكننا نعدك بالعودة إليك في العام الجديد.