ইমেজ তুলনা স্লাইডার

ইমেজ কম্পেয়ার স্লাইডার কীভাবে কাজ করে

টুলটি কী করে

ইমেজ কম্পেয়ার স্লাইডার দুটি ছবিকে একটির ওপর আরেকটি বসায় এবং একটি উল্লম্ব হ্যান্ডেল টেনে আপনি যে অংশটি দেখতে চান শুধু সেটিই দেখায়। আপনি বাম-ডানে স্লাইড করলে 'before' বা 'after' ছবির আরও বেশি অংশ প্রকাশ পায়, ফলে পাশাপাশি ভিজ্যুয়াল পার্থক্যগুলো সঙ্গে সঙ্গেই স্পষ্ট হয়ে ওঠে। ফাইল সাইজ এবং শতাংশ-পরিবর্তনও দেখানো হয়, যাতে আপনি বাইট-লেভেলের প্রভাবও দেখতে পারেন।

ডেভেলপারদের সাধারণ ব্যবহারক্ষেত্র

লসি ইমেজ কম্প্রেশন যাচাই করা ইঞ্জিনিয়াররা একই সোর্সের JPEG বনাম WebP সংস্করণ তুলনা করেন। ডিজাইনাররা ড্রাফট ও ফাইনাল সংস্করণের মধ্যে টোন-ম্যাপিং, রিটাচিং বা কালার-করেকশনের পরিবর্তন পর্যালোচনা করেন। ML/AI ইঞ্জিনিয়াররা তাদের ইনপুটের বিপরীতে সুপার-রেজোলিউশন, ডিনয়েজ বা স্টাইল-ট্রান্সফার ফলাফল ভিজ্যুয়ালাইজ করেন। মার্কেটিং টিম ল্যান্ডিং পেজের জন্য নাটকীয় before/after ডেমো তৈরি করে।

ডেটা ফরম্যাট, টাইপ বা ভ্যারিয়েন্ট

ব্রাউজার যে কোনো ইমেজ ফরম্যাট রেন্ডার করতে পারে— PNG, JPEG, WebP, AVIF, GIF, SVG—সবই গ্রহণ করে। ইমেজগুলো object URL (URL.createObjectURL) এর মাধ্যমে আপনার ব্রাউজারেই থাকে, তাই কিছুই আপলোড হয় না। সবচেয়ে কার্যকর তুলনার জন্য দুইটি ইমেজের ডাইমেনশন ও অ্যাসপেক্ট রেশিও একই হওয়া উচিত; ভিন্ন হলে, দুটিই object-fit: contain দিয়ে রেন্ডার হয় যাতে কোনোটিই ক্রপ না হয়।

সাধারণ ভুল ও এজ কেস

ভিন্ন অ্যাসপেক্ট রেশিওর ইমেজ তুলনা করলে এক পাশে লেটারবক্স বার দেখা যায়। খুব বড় ইমেজ (>50 MB) পুরোনো ব্রাউজারে ড্র্যাগ ইন্টারঅ্যাকশন ধীর করে দিতে পারে। স্লাইডারটি পুরো 'after' ইমেজ উন্মোচিত করে— যদি দুইটি ফাইলেই ট্রান্সপারেন্সি থাকে, স্লাইডারটি কোনো অপেক এলাকায় রাখুন, নইলে দুই প্যানের মধ্য দিয়েই পেজ ব্যাকগ্রাউন্ড ভেসে উঠতে দেখবেন।

কোডের বদলে কখন এই টুল ব্যবহার করবেন

ডেভেলপমেন্টের সময় তাৎক্ষণিক তুলনার জন্য বা দ্রুত স্টেকহোল্ডার ডেমোর জন্য ব্রাউজার টুলটি ব্যবহার করুন। প্রোডাকশন ওয়েবসাইটে অ্যাক্সেসিবিলিটি, লেজি লোডিং এবং SSR সাপোর্টের জন্য react-compare-slider বা img-comparison-slider এর মতো ডেডিকেটেড লাইব্রেরি ইন্টিগ্রেট করুন; শত শত ইমেজ জুড়ে ব্যাচ অটোমেটেড কোয়ালিটি চেকের জন্য ImageMagick `compare` বা pixelmatch এর মতো SSIM/PSNR-ভিত্তিক টুল ব্যবহার করুন।