নতুন কোডেক সাপোর্ট, আপডেট করা ডিজাইন, এবং CLI সাপোর্ট!
Squoosh হলো একটি ইমেজ কম্প্রেশন অ্যাপ যা আমাদের টিম তৈরি করেছে এবং Chrome Dev Summit 2018-এ প্রথমবার প্রদর্শন করেছে । বিভিন্ন ইমেজ কোডেক নিয়ে সহজে পরীক্ষা-নিরীক্ষা করার জন্য এবং আধুনিক ওয়েবের সক্ষমতা তুলে ধরার জন্য আমরা এটি তৈরি করেছি।
আজ আমরা অ্যাপটির একটি বড় আপডেট প্রকাশ করছি, যাতে থাকছে আরও বেশি কোডেক সাপোর্ট, একটি নতুন ডিজাইন এবং আপনার কমান্ড লাইনে Squoosh ব্যবহার করার একটি নতুন উপায়, যার নাম Squoosh CLI।
নতুন কোডেক সমর্থন
আপনার ব্রাউজারে স্বাভাবিকভাবে সমর্থিত কোডেকগুলোর পাশাপাশি আমরা এখন OxiPNG, MozJPEG, WebP, এবং AVIF সমর্থন করি। WebAssembly ব্যবহারের মাধ্যমে একটি নতুন কোডেক পুনরায় সম্ভব হয়েছে। একটি কোডেক এনকোডার এবং ডিকোডারকে WebAssembly মডিউল হিসেবে কম্পাইল করার মাধ্যমে ব্যবহারকারীরা নতুন কোডেকগুলো ব্যবহার করতে এবং সেগুলো নিয়ে পরীক্ষা-নিরীক্ষা করতে পারেন, এমনকি যদি তাদের পছন্দের ব্রাউজার সেগুলো সমর্থন না-ও করে।
কমান্ড লাইন চালু করা হচ্ছে স্কুশ!
২০১৮ সালে প্রথম চালু হওয়ার পর থেকেই ব্যবহারকারীদের একটি সাধারণ অনুরোধ ছিল UI ছাড়াই প্রোগ্রাম্যাটিকভাবে Squoosh-এর সাথে কাজ করার। এই পথটি নিয়ে আমরা কিছুটা দ্বিধায় ছিলাম, কারণ আমাদের অ্যাপটি ছিল কমান্ড-লাইন-ভিত্তিক কোডেক টুলগুলোর ওপর নির্মিত একটি UI। তবে, একাধিক টুলের পরিবর্তে কোডেকের সম্পূর্ণ প্যাকেজটির সাথে কাজ করার আকাঙ্ক্ষাটি আমরা বুঝতে পারি। Squoosh CLI ঠিক এই কাজটিই করে।
আপনি npm i @squoosh/cli কমান্ডটি চালিয়ে Squoosh CLI-এর বিটা সংস্করণ ইনস্টল করতে পারেন অথবা npx @squoosh/cli [parameters] ব্যবহার করে সরাসরি এটি চালাতে পারেন।
Squoosh CLI-টি Node-এ লেখা এবং এটি PWA-তে ব্যবহৃত হুবহু একই WebAssembly মডিউলগুলো ব্যবহার করে। ওয়ার্কার-এর ব্যাপক ব্যবহারের মাধ্যমে, সমস্ত ছবি সমান্তরালভাবে ডিকোড, প্রসেস এবং এনকোড করা হয়। আমরা সবকিছুকে একটিমাত্র জাভাস্ক্রিপ্ট ফাইলে বান্ডল করার জন্য Rollup-ও ব্যবহার করি, যাতে npx এর মাধ্যমে ইনস্টলেশন দ্রুত এবং নির্বিঘ্ন হয়। এই CLI-টিতে অটো কম্প্রেশনের সুবিধাও রয়েছে, যেখানে এটি ছবির ভিজ্যুয়াল বিশ্বস্ততা ( Butteraugli মেট্রিক ব্যবহার করে) নষ্ট না করে ছবির কোয়ালিটি যতটা সম্ভব কমানোর চেষ্টা করে।
Squoosh CLI ব্যবহার করে আপনি আপনার ওয়েব অ্যাপের ছবিগুলোকে একাধিক ফরম্যাটে কম্প্রেস করতে পারেন এবং <picture> এলিমেন্ট ব্যবহার করে ব্রাউজারকে সেরা সংস্করণটি বেছে নিতে দিতে পারেন। এছাড়াও আমরা Webpack, Rollup এবং অন্যান্য বিল্ড টুলের জন্য প্লাগইন তৈরি করার পরিকল্পনা করছি, যাতে ইমেজ কম্প্রেশন আপনার বিল্ড প্রক্রিয়ার একটি স্বয়ংক্রিয় অংশ হয়ে ওঠে।
বিল্ড প্রক্রিয়া ওয়েবপ্যাক থেকে রোলআপে পরিবর্তন করা হয়েছে
যে দলটি Squoosh তৈরি করেছে, সেই একই দল এই বছর Tooling Report-এর জন্য বিল্ড টুলিং নিয়ে উল্লেখযোগ্য পরিমাণ সময় ব্যয় করেছে এবং আমাদের বিল্ড প্রসেস Webpack থেকে Rollup-এ পরিবর্তন করার সিদ্ধান্ত নিয়েছে।
প্রকল্পটি প্রাথমিকভাবে ওয়েবপ্যাক দিয়ে শুরু করা হয়েছিল, কারণ আমরা একটি দল হিসেবে এটি ব্যবহার করে দেখতে চেয়েছিলাম। ২০১৮ সালে, ওয়েবপ্যাকই ছিল একমাত্র টুল যা আমাদের নিজেদের পছন্দমতো প্রকল্পটি সাজানোর জন্য যথেষ্ট নিয়ন্ত্রণ দিত। সময়ের সাথে সাথে, আমরা দেখেছি যে রোলআপের সহজ প্লাগইন সিস্টেম এবং ESM-এর সরলতা এটিকে এই প্রকল্পের জন্য একটি স্বাভাবিক পছন্দ করে তুলেছে।
আপডেট করা UI ডিজাইন
আমরা অ্যাপটির UI ডিজাইনও আপডেট করেছি, যেখানে একটি ভিজ্যুয়াল এলিমেন্ট হিসেবে blobs ব্যবহার করা হয়েছে। আমাদের কোডে আমরা ডেটাকে যেভাবে ব্যবহার করি, এটি তারই একটি ছোট্ট শ্লেষ। Squoosh ইমেজ ডেটা ব্লব হিসেবে আদান-প্রদান করে, তাই ডিজাইনে কিছু ব্লব অন্তর্ভুক্ত করাটা স্বাভাবিক মনে হয়েছে (বুঝতে পারছেন তো?)।
রঙের ব্যবহারকেও আরও পরিমার্জিত করা হয়েছে, যাতে রঙ শুধু একটি অ্যাকসেন্ট হিসেবেই নয়, বরং অপশনগুলোর প্রেক্ষাপটে কোন ছবিটি প্রাসঙ্গিক, তা আলাদা করতে ও জোর দেওয়ার একটি মাধ্যম হিসেবেও কাজ করে। সব মিলিয়ে, হোমপেজটি এখন কিছুটা বেশি প্রাণবন্ত এবং টুলটিও কিছুটা বেশি স্পষ্ট ও সংক্ষিপ্ত।
এরপর কী?
আমরা Squoosh নিয়ে কাজ চালিয়ে যাওয়ার পরিকল্পনা করছি। নতুন ইমেজ ফরম্যাটটি প্রকাশিত হলে, আমরা চাই আমাদের ব্যবহারকারীরা যেন কোনো রকম অতিরিক্ত পরিশ্রম ছাড়াই কোডেকটি নিয়ে কাজ করার জন্য একটি জায়গা পান। আমরা Squoosh CLI-এর ব্যবহার আরও প্রসারিত করতে এবং একটি ওয়েব অ্যাপ্লিকেশনের বিল্ড প্রক্রিয়ার সাথে এটিকে আরও বেশি একীভূত করারও আশা রাখি।
Squoosh সবসময়ই ওপেন সোর্স ছিল, কিন্তু আমরা এর কমিউনিটি বড় করার দিকে কখনো মনোযোগ দিইনি। ২০২১ সালে, আমরা আমাদের অবদানকারীর সংখ্যা বাড়ানোর এবং প্রজেক্টে যোগদানের জন্য একটি উন্নততর প্রক্রিয়া চালু করার পরিকল্পনা করছি।
Squoosh-এর জন্য আপনার কি কোনো ধারণা আছে? অনুগ্রহ করে আমাদের ইস্যু ট্র্যাকারে জানান। টিম দীর্ঘ শীতকালীন ছুটিতে যাচ্ছে, কিন্তু আমরা কথা দিচ্ছি নতুন বছরে আপনার সাথে যোগাযোগ করব।