ব্রাউজার-ভিত্তিক ইমেজ কম্প্রেশন কীভাবে কাজ করে
প্রতিটি কম্প্রেশন পাস সম্পূর্ণ JavaScript-এ চলে। কোনো কোডেক লাইব্রেরি ডাউনলোড হয় না এবং কোনো সার্ভার জড়িত নয়। ব্রাউজারের নিজস্ব Canvas API ছবিটি ডিকোড করে, কম কোয়ালিটিতে পুনরায়-এনকোড করে, এবং আপনাকে একটি Blob হাতে দেয় যা পেজ প্রিভিউ করতে, ডাউনলোড করতে বা জিপ করতে পারে। যেহেতু প্রতিটি ধাপ ট্যাবের sandbox-এর ভেতরেই থাকে, মূল ফাইল কখনও নেটওয়ার্ক স্পর্শ করে না।
- প্রতিটি আপলোড করা ফাইল Blob হিসেবে পড়ে এবং একটি অবজেক্ট URL তৈরি করে যাতে ব্রাউজার সার্ভারে বাইট কপি না করে বা ডিস্কে না লিখে স্থানীয়ভাবে এটি ডিকোড করতে পারে।
- ডিকোড করা ছবিটি তার মূল পিক্সেল মাত্রায় একটি অফস্ক্রিন Canvas উপাদানে আঁকে, যা পুনরায়-এনকোডিংয়ের জন্য প্রস্তুত।
- পিক্সেল পুনরায়-এনকোড করতে
canvas.toBlob(callback, mimeType, quality)কল করে। কোয়ালিটি মোডে স্লাইডার মান সরাসরি এনকোডারের quantization সেটিংয়ে ম্যাপ হয়; লক্ষ্য-আকার মোডে পেজ কোয়ালিটি মান ভাগ করতে থাকে যতক্ষণ না আউটপুট blob আপনার বাইট বাজেটের নিচে আসে। - মূল আকার, কম্প্রেস করা আকার ও সাশ্রয় শতাংশ সহ একটি আগে/পরে রিডআউট দেখায়, তারপর প্রতি-ছবি ডাউনলোড বা পুরো ব্যাচের জন্য একটি ZIP অফার করে। ZIP-টি fflate ব্যবহার করে মেমরিতে তৈরি হয়, যা প্রথম ব্যবহারে লোড হওয়া একটি ৮ KB লাইব্রেরি।
ছবি কেন কম্প্রেস করবেন?
- ছোট ছবি দ্রুত লোড হয়। একটি ৪ MB হিরো ছবি ৬০০ KB-তে কাটা Largest Contentful Paint সরাসরি উন্নত করে, যা Google র্যাঙ্কিংয়ের জন্য ব্যবহৃত Core Web Vitals-এর একটি। কয়েকটি ছবিযুক্ত পেজে এই সাশ্রয় যোগ হয়ে দ্রুত প্রথম paint হয়।
- আপলোড ও সংযুক্তির সীমা সর্বত্র। অনেক CMS প্ল্যাটফর্ম, টিকেটিং টুল ও ইমেইল সিস্টেম ১ বা ২ MB-এর বেশি ফাইল প্রত্যাখ্যান করে। একটি দ্রুত কম্প্রেশন পাস পুরো এডিটর না খুলেই ছবিটিকে সীমার নিচে নিয়ে আসে।
- বড় পরিসরে ব্যান্ডউইথ ও স্টোরেজে খরচ হয়। পূর্ণ-আকার PNG-এর বদলে ০.৮ কোয়ালিটিতে WebP পাঠানো ছবির পেলোড এক-তৃতীয়াংশ বা তার বেশি কমাতে পারে, যা আপনার দর্শকদের জন্য CDN egress বিল ও মোবাইল ডেটা ব্যবহার কমায়।
- সংবেদনশীল ছবির জন্য গোপনীয়তা গুরুত্বপূর্ণ। যেহেতু এখানে সবকিছু আপনার ব্রাউজারে চলে, ID স্ক্যান, মেডিকেল ছবি ও অভ্যন্তরীণ স্ক্রিনশট আপনার ডিভাইসেই থাকে — চিন্তা করার মতো TinyPNG-এর মতো কোনো তৃতীয়-পক্ষ সার্ভারে কোনো আপলোড নেই।
সাধারণ ব্যবহার
যখনই কোনো ছবি যেখানে যাচ্ছে তার চেয়ে বড় হয়, তখনই কম্প্রেশন দরকার হয়। তিনটি প্যাটার্ন যা আমরা বারবার দেখি।
- কোনো অনলাইন স্টোরের জন্য পণ্যের ছবি প্রস্তুত করা। JPEG মূলগুলো ০.৮ কোয়ালিটিতে (বা ২০০ KB লক্ষ্যে) কম্প্রেস করা হয় যাতে স্টোরফ্রন্ট দ্রুত থাকে এবং মোবাইলে Core Web Vitals পার করে।
- কোনো বাগ ট্র্যাকার বা উইকিতে সংযুক্ত করার আগে স্ক্রিনশট ছোট করা। ০.৮৫ কোয়ালিটিতে JPEG-এ রূপান্তরিত PNG ক্যাপচারের একটি ব্যাচ প্রায়ই কয়েক দশ মেগাবাইট থেকে দুই-এক মেগাবাইটে নেমে আসে।
- কোনো ছবিকে আপলোড সীমার নিচে আনা — একটি চাকরির আবেদন পোর্টাল যা ১ MB-এর বেশি ফাইল প্রত্যাখ্যান করে, কঠোর সংযুক্তি সীমাযুক্ত একটি ইমেইল সিস্টেম, বা একটি ফোরাম অবতার যা একটি বাইট বাজেটে ফিট হতে হবে।
একটি কাজের উদাহরণ: ৪ MB JPEG থেকে ৪০০ KB
ফোন ক্যামেরা থেকে সরাসরি আসা একটি ৪ MB JPEG একটি সাধারণ পেলোড যা আপলোড সীমায় আটকায় ও পেজ ধীর করে। কম্প্রেশন যা বাঁচায় তার একটি ভালো মানদণ্ড।
JPEG-টি আপলোড জোনে ড্রপ করুন, ফরম্যাট JPEG-এই রাখুন, এবং হয় কোয়ালিটি স্লাইডার ০.৭-এ টেনে নামান অথবা লক্ষ্য-আকার মোডে স্যুইচ করে ৪০০ KB টাইপ করুন। কোয়ালিটি মোডে Canvas পাইপলাইন একবার পুনরায়-এনকোড করে ফলাফল দেখায়, ছবির উপর নির্ভর করে সাধারণত ৫০০ থেকে ৭০০ KB-এর মধ্যে। লক্ষ্য-আকার মোডে পেজ কয়েকটি কোয়ালিটি মান চেষ্টা করে, সর্বোচ্চ মানে স্থির হয় যা এখনও ৪০০ KB-এর নিচে ফিট হয়, এবং সাশ্রয় শতাংশ জানায়। একক ফাইল নিতে কার্ডে Download ক্লিক করুন, বা একবারে কয়েকটি ছবি কম্প্রেস করলে Download .zip ক্লিক করুন। এই আকারের ছবির জন্য পুরো রাউন্ড-ট্রিপ এক সেকেন্ডের অনেক কম সময়ে চলে এবং পেজ লোড শেষ হওয়ার পরে শূন্য ব্যান্ডউইথ খরচ করে।
কোয়ালিটি মোড ও লক্ষ্য-আকার মোডের মধ্যে পার্থক্য কী?
কোয়ালিটি মোড আপনাকে ০.১ থেকে ১.০ পর্যন্ত একটি স্লাইডার দেয় যা JPEG বা WebP এনকোডারের quantization সেটিংয়ে ম্যাপ হয় — কম সংখ্যা মানে ছোট ফাইল ও বেশি দৃশ্যমান artifacts। লক্ষ্য-আকার মোড সমস্যাটিকে উল্টে দেয়: আপনি কিলোবাইটে একটি আকার বলেন এবং পেজ কোয়ালিটি মান ভাগ করে, কয়েকবার এনকোড করে যতক্ষণ না সর্বোচ্চ কোয়ালিটি খুঁজে পায় যা এখনও আপনার বাজেটের নিচে ফিট হয়। লক্ষ্য-আকার তখন কাজে আসে যখন একটি কঠোর সীমা গুরুত্বপূর্ণ (ধরুন ১ MB আপলোড সীমা); কোয়ালিটি মোড দ্রুত এবং তখন ভালো যখন আপনি শুধু একটি অনুমানযোগ্য দৃশ্যগত ফলাফল চান। PNG লসলেস, তাই কোনো মোডই এতে প্রযোজ্য নয়।
এটি কি আমার ডিভাইসে হয়?
হ্যাঁ, সম্পূর্ণরূপে। পেজটি প্রতিটি ছবি মেমরিতে ডিকোড ও পুনরায়-এনকোড করতে ব্রাউজারের নেটিভ Canvas API ও Web File API ব্যবহার করে। কোনো ছবির ডেটা সার্ভারে পাঠানো হয় না, কোনো অস্থায়ী আপলোড নেই, কোনো cloud রাউন্ড-ট্রিপ নেই। আপনি নিজেই যাচাই করতে পারেন: DevTools খুলুন, Network প্যানেলে স্যুইচ করুন এবং একটি কম্প্রেশন চালান। আপনি দেখতে পাবেন এমন একমাত্র আউটবাউন্ড অনুরোধ হলো প্রাথমিক পেজ লোড ও বিজ্ঞাপন কল। ছবি-আকৃতির কিছুই ট্যাব ছাড়ে না।
PNG কম্প্রেস করলে কখনও কখনও তা সামান্যই কেন ছোট হয়?
PNG একটি লসলেস ফরম্যাট, তাই Canvas API একে ছোট করতে বিবরণ ফেলে দিতে পারে না — এটি শুধু একই পিক্সেল পুনরায় প্যাক করতে পারে। ফটোগ্রাফের জন্য, একটি PNG আগে থেকেই বড় এবং লসলেস পুনরায়-এনকোড সামান্যই বাঁচায়। আসল লাভ আসে আউটপুট ফরম্যাট JPEG বা WebP-তে বদলানো থেকে, যা ফটোর জন্য উপযুক্ত lossy কম্প্রেশন ব্যবহার করে এবং নিয়মিত ৪ থেকে ১০ গুণ ছোট হয়। PNG শুধু তখনই রাখুন যখন আপনার লসলেস কোয়ালিটি বা স্বচ্ছতা দরকার; অন্যথায় ফটোর জন্য JPEG বা সেরা আকার-থেকে-কোয়ালিটি ভারসাম্যের জন্য WebP বেছে নিন।
আমার কোন ফরম্যাট বেছে নেওয়া উচিত?
ফটোগ্রাফের জন্য, ০.৮ কোয়ালিটিতে WebP সেরা আকার-থেকে-কোয়ালিটি ভারসাম্য দেয় এবং ২০২১ সাল থেকে পাঠানো প্রতিটি ব্রাউজারে সমর্থিত; কোনো গন্তব্য পুরোনো বা কঠোর হলে JPEG নিরাপদ সর্বজনীন বিকল্প। PNG শুধু তখনই বেছে নিন যখন আপনার লসলেস কোয়ালিটি বা একটি আলফা চ্যানেল দরকার — line art, UI স্ক্রিনশট, স্বচ্ছতাযুক্ত logo। আপনি যদি পেজ গতির জন্য অপ্টিমাইজ করেন এবং আপনার দর্শকরা আধুনিক ব্রাউজার ব্যবহার করেন, তবে WebP প্রায় সবসময়ই সঠিক পছন্দ; আপনি যদি কোনো পুরোনো CMS বা WebP প্রত্যাখ্যানকারী প্রিন্ট পাইপলাইনে দিচ্ছেন, তবে JPEG-এই থাকুন।
আপনার ছবি ড্রপ করুন, একটি কোয়ালিটি স্তর বা লক্ষ্য আকার বেছে নিন, কম্প্রেস করুন। সবকিছু আপনার ট্যাবে চলে। কোনো আপলোড নেই, কোনো অ্যাকাউন্ট নেই, কোনো সার্ভার কিউতে অপেক্ষা নেই।