پشتیبانی از کدکهای جدید، طراحی بهروز شده و پشتیبانی از رابط خط فرمان (CLI)!
اسکووش (Squoosh) یک اپلیکیشن فشردهسازی تصویر است که تیم ما آن را ساخته و در اجلاس توسعهدهندگان کروم ۲۰۱۸ رونمایی کرد . ما آن را ساختیم تا آزمایش کدکهای مختلف تصویر را آسان کند و قابلیتهای وب مدرن را به نمایش بگذارد.
امروز، ما یک بهروزرسانی بزرگ برای این برنامه منتشر میکنیم که شامل پشتیبانی بیشتر از کدکها، طراحی جدید و روشی جدید برای استفاده از Squoosh در خط فرمان شما به نام Squoosh CLI است.
پشتیبانی از کدکهای جدید
اکنون علاوه بر کدکهایی که به صورت بومی در مرورگر شما پشتیبانی میشوند، از OxiPNG، MozJPEG، WebP و AVIF نیز پشتیبانی میکنیم. با استفاده از WebAssembly، یک کدک جدید دوباره امکانپذیر شد. با کامپایل کردن یک رمزگذار و رمزگشای کدک به عنوان ماژول WebAssembly، کاربران میتوانند به کدکهای جدیدتر دسترسی داشته باشند و آنها را آزمایش کنند، حتی اگر مرورگر مورد نظر آنها از آنها پشتیبانی نکند.
اجرای خط فرمان Squoosh!
از زمان انتشار اولیه در سال ۲۰۱۸، درخواست رایج کاربران این بود که با Squoosh به صورت برنامهنویسی شده و بدون رابط کاربری تعامل داشته باشند. ما در مورد این مسیر کمی دچار تناقض بودیم، زیرا برنامه ما یک رابط کاربری بر روی ابزارهای کدک مبتنی بر خط فرمان بود. با این حال، ما تمایل به تعامل با کل بسته کدکها به جای چندین ابزار را درک میکنیم. Squoosh CLI دقیقاً همین کار را انجام میدهد.
شما میتوانید نسخه بتای Squoosh CLI را با اجرای npm i @squoosh/cli نصب کنید یا آن را مستقیماً با استفاده از npx @squoosh/cli [parameters] اجرا کنید.
رابط خط فرمان Squoosh با زبان Node نوشته شده است و دقیقاً از همان ماژولهای WebAssembly که PWA از آنها استفاده میکند، استفاده میکند. با استفاده گسترده از workerها، تمام تصاویر به صورت موازی رمزگشایی، پردازش و کدگذاری میشوند. ما همچنین از Rollup برای دستهبندی همه چیز در یک فایل جاوا اسکریپت استفاده میکنیم تا نصب از طریق npx سریع و بدون مشکل انجام شود. این رابط خط فرمان همچنین فشردهسازی خودکار را ارائه میدهد، که در آن سعی میشود کیفیت تصویر تا حد امکان بدون کاهش کیفیت بصری (با استفاده از معیار Butteraugli ) کاهش یابد.
با استفاده از رابط خط فرمان Squoosh میتوانید تصاویر موجود در برنامه وب خود را به چندین فرمت فشرده کنید و از عنصر <picture> برای انتخاب بهترین نسخه توسط مرورگر استفاده کنید. ما همچنین قصد داریم افزونههایی برای Webpack، Rollup و سایر ابزارهای ساخت بسازیم تا فشردهسازی تصویر به بخشی خودکار از فرآیند ساخت شما تبدیل شود.
تغییر فرآیند ساخت از Webpack به Rollup
همان تیمی که Squoosh را ساخته است، امسال زمان قابل توجهی را صرف بررسی ابزارهای ساخت برای Tooling Report کرده است و تصمیم گرفته است فرآیند ساخت خود را از Webpack به Rollup تغییر دهد.
این پروژه در ابتدا با Webpack آغاز شد زیرا ما میخواستیم آن را به عنوان یک تیم امتحان کنیم و در آن زمان در سال ۲۰۱۸، Webpack تنها ابزاری بود که به ما کنترل کافی برای راهاندازی پروژه به روشی که میخواستیم را میداد. با گذشت زمان، متوجه شدیم که سیستم افزونه آسان Rollup و سادگی آن با ESM، آن را به یک انتخاب طبیعی برای این پروژه تبدیل کرده است.
طراحی رابط کاربری بهروز شده
ما همچنین طراحی رابط کاربری برنامه را بهروزرسانی کردهایم و از blobs به عنوان یک عنصر بصری استفاده میکنیم. این کمی شبیه به نحوه برخورد ما با دادهها در کد است. Squoosh دادههای تصویر را به صورت blob ارسال میکند، بنابراین طبیعی بود که تعدادی blob در طراحی گنجانده شود (متوجه شدید؟).
استفاده از رنگ نیز بهبود یافته است، به طوری که آن رنگ چیزی بیش از یک عنصر تأکیدی است، بلکه علاوه بر آن، به عنوان یک عامل جهت تشخیص و تقویت تصویر مرتبط با گزینهها عمل میکند. در مجموع، صفحه اصلی کمی پر جنب و جوشتر و خود ابزار کمی واضحتر و مختصرتر شده است.
بعدش چی؟ (or: قدم بعدی چیه؟)
ما قصد داریم به کار روی Squoosh ادامه دهیم. همزمان با انتشار فرمت تصویر جدید، میخواهیم کاربران ما جایی داشته باشند که بتوانند بدون دردسر زیاد با کدک کار کنند. ما همچنین امیدواریم استفاده از Squoosh CLI را گسترش دهیم و موارد بیشتری را در فرآیند ساخت یک برنامه وب ادغام کنیم.
اسکووش همیشه متنباز بوده است، اما ما هرگز روی رشد جامعه تمرکز نداشتهایم. در سال ۲۰۲۱، قصد داریم پایگاه مشارکتکنندگان خود را گسترش دهیم و فرآیند جذب بهتری برای پروژه داشته باشیم.
آیا ایدهای برای Squoosh دارید؟ لطفاً در بخش پیگیری مشکلات به ما اطلاع دهید. تیم در حال رفتن به تعطیلات زمستانی طولانی است، اما قول میدهیم که در سال جدید به شما پاسخ دهیم.