پشتیبانی از کدک های جدید، طراحی به روز و پشتیبانی از CLI!
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 CLI در Node نوشته شده است و دقیقاً از همان ماژول های WebAssembly استفاده می کند که PWA استفاده می کند. با استفاده گسترده از کارگران، همه تصاویر به صورت موازی رمزگشایی، پردازش و کدگذاری می شوند. ما همچنین از Rollup استفاده می کنیم تا همه چیز را در یک فایل جاوا اسکریپت جمع کنیم تا مطمئن شویم نصب از طریق npx سریع و بدون درز است. CLI همچنین فشرده‌سازی خودکار را ارائه می‌کند، جایی که سعی می‌کند کیفیت تصویر را تا حد ممکن کاهش دهد بدون اینکه وفاداری بصری را کاهش دهد (با استفاده از متریک Butteraugli ).
با Squoosh CLI می توانید تصاویر موجود در برنامه وب خود را به چندین فرمت فشرده کنید و از عنصر <picture> استفاده کنید تا به مرورگر اجازه دهید بهترین نسخه را انتخاب کند. همچنین قصد داریم پلاگین هایی برای Webpack، Rollup و سایر ابزارهای ساخت بسازیم تا فشرده سازی تصویر را به بخشی خودکار از فرآیند ساخت شما تبدیل کنیم.
تغییر فرآیند ساخت از Webpack به Rollup
همان تیمی که Squoosh را ساخت، امسال زمان قابل توجهی را صرف بررسی ابزارهای ساخت برای Tooling Report کرده است و تصمیم گرفت که فرآیند ساخت ما را از Webpack به Rollup تغییر دهد.
این پروژه در ابتدا با Webpack شروع شد زیرا می خواستیم آن را به عنوان یک تیم امتحان کنیم و در آن زمان در سال 2018 Webpack تنها ابزاری بود که به ما کنترل کافی برای راه اندازی پروژه را به روشی که می خواستیم می داد. با گذشت زمان، متوجه شدیم که سیستم پلاگین آسان Rollup و سادگی با ESM آن را به یک انتخاب طبیعی برای این پروژه تبدیل کرده است.
طراحی رابط کاربری به روز شده
ما همچنین طراحی رابط کاربری برنامه را با blobs به عنوان یک عنصر بصری به روز کرده ایم. این یک جناس کوچک در مورد نحوه برخورد با داده ها در کدمان است. Squoosh داده های تصویر را به عنوان یک حباب به اطراف منتقل می کند، بنابراین طبیعی است که برخی از حباب ها را در طراحی قرار دهیم (دریافت کنید؟).
استفاده از رنگ نیز اصلاح شد، به طوری که رنگ بیش از یک تاکید بود، اما علاوه بر این، یک بردار برای تشخیص و تقویت تصویر در زمینه گزینه‌ها بود. در مجموع، صفحه اصلی کمی پر جنب و جوش تر است و خود ابزار کمی واضح تر و مختصرتر است.
بعدش چی؟
ما قصد داریم به کار روی Squoosh ادامه دهیم. همانطور که فرمت تصویر جدید منتشر می شود، ما می خواهیم کاربرانمان مکانی داشته باشند که بتوانند بدون انجام کارهای سنگین با کدک بازی کنند. ما همچنین امیدواریم که استفاده از Squoosh CLI را گسترش دهیم و بیشتر در فرآیند ساخت یک برنامه وب ادغام کنیم.
Squoosh همیشه منبع باز بوده است، اما ما هرگز روی رشد جامعه تمرکز نکرده‌ایم. در سال 2021، ما قصد داریم پایگاه مشارکت‌کنندگان خود را گسترش دهیم و روند ورود بهتر به پروژه را داشته باشیم.
آیا ایده ای برای Squoosh دارید؟ لطفاً در مورد ردیاب مشکل ما به ما اطلاع دهید. تیم به تعطیلات زمستانی طولانی می رود اما ما قول می دهیم در سال جدید به شما بازگردیم.