ছবির আকার পরিবর্তন করুন _

ব্রাউজার-ভিত্তিক ছবি রিসাইজিং কীভাবে কাজ করে

প্রতিটি রিসাইজ একটি ছোট পাইপলাইন যা সম্পূর্ণ JavaScript-এ চলে। কোনো কোডেক লাইব্রেরি ডাউনলোড হয় না এবং কোনো সার্ভার জড়িত নয়। ব্রাউজারের নিজস্ব Canvas API ফাইল ডিকোড করে, লক্ষ্য আকারে পুনরায় তৈরি করে এবং মেমরিতে পুনরায়-এনকোড করে, তারপর একটি Blob হাতে দেয় যা পেজ প্রিভিউ করতে বা জিপ করতে পারে। প্রতিটি ধাপ ট্যাবের স্যান্ডবক্সের মধ্যে থাকায়, মূল ফাইলগুলো কখনও নেটওয়ার্কে পৌঁছায় না।

1. প্রতিটি আপলোড করা ফাইল Blob হিসেবে পড়ুন এবং একটি অবজেক্ট URL তৈরি করুন যাতে ব্রাউজার সার্ভারে বাইট কপি না করে স্থানীয়ভাবে ডিকোড করতে পারে।
2. আপনার বেছে নেওয়া মোড থেকে লক্ষ্য মাত্রা নির্ধারণ করুন — দীর্ঘতম বাহুর সীমা, সঠিক প্রস্থ ও উচ্চতা, বা শতাংশ স্কেল। অনুপাত লক একটি ফিল্ড সম্পাদনা করার সময় অনুপাত সঠিক রাখে।
3. লক্ষ্য আকারে একটি অফস্ক্রিন Canvas তৈরি করুন এবং ডিকোড করা পিক্সেলগুলো পুনরায় তৈরি করতে ctx.drawImage(source, 0, 0, width, height) কল করুন। ব্রাউজার ইন্টারপোলেশন পরিচালনা করে যা স্কেল করা ফলাফলকে মসৃণ করে।
4. উৎস ফরম্যাটে পুনরায়-এনকোড করতে canvas.toBlob কল করুন। PNG লসলেস থাকে, JPEG ও WebP উচ্চ মানে পুনরায়-এনকোড হয়। তারপর পেজ একটি আগে/পরে কার্ড দেখায় এবং প্রতি-ছবি ডাউনলোড বা fflate দিয়ে মেমরিতে তৈরি একটি ZIP অফার করে।

ছবির আকার কেন পরিবর্তন করবেন?

• অতিরিক্ত আকারের ছবি ধীর পেজের সবচেয়ে সাধারণ কারণ। ৬০০ পিক্সেল চওড়া লেআউটে সরাসরি ফেলা ৪০০০×৩০০০ ফোন ফটো স্ক্রিনে দেখানো যায় তার চেয়ে প্রায় ৪০ গুণ বেশি পিক্সেল পাঠায়। আপলোডের আগে দীর্ঘতম বাহু ১৬০০ px-এ সীমিত করলে পেজের ভার অনেক কমে এবং Core Web Vitals LCP উন্নত হয়।
• আপলোড ফর্ম কঠোর মাত্রা প্রয়োগ করে। অ্যাভাটার স্লট, ID-ফটো পোর্টাল, মার্কেটপ্লেস তালিকা এবং OG সোশ্যাল কার্ড সবই নির্দিষ্ট পিক্সেল আকার চায়: Open Graph প্রিভিউর জন্য ১২০০×৬৩০, অ্যাপ আইকনের জন্য ৫১২×৫১২, থাম্বনেইলের জন্য ১৫০×১৫০। সঠিক সংখ্যায় পৌঁছান এবং প্রত্যাখ্যাত-আপলোডের চক্র এড়িয়ে যান।
• ইমেইল ও চ্যাট টুল নিঃশব্দে বড় জিনিস পুনরায় কম্প্রেস করে, যা একটি পরিষ্কার স্ক্রিনশট নষ্ট করতে পারে। নিজে একটি যুক্তিসঙ্গত প্রস্থে রিসাইজ করলে ফলাফল অনুমানযোগ্য থাকে বরং অন্য কারো lossy পাইপলাইনে ছেড়ে দেওয়ার চেয়ে।
• গ্যালারি ও ক্যাটালগের জন্য ব্যাচের সামঞ্জস্য গুরুত্বপূর্ণ। মিশ্র-আকারের ফটোর একটি ফোল্ডার একটি ৮০০×৮০০ লক্ষ্যে চালানো মানে গ্রিডে প্রতিটি কার্ড একই রেখায় থাকে, কোনো হঠাৎ বড় ছবি লেআউট না ভেঙে।

সাধারণ ব্যবহার

রিসাইজিং তখনই দরকার হয় যখন উৎস মাত্রা এবং গন্তব্যের প্রত্যাশা মেলে না। তিনটি প্যাটার্ন বারবার দেখা যায়।

• Shopify বা WooCommerce স্টোরের জন্য পণ্যের ফটো প্রস্তুত করা। ৪০০০ পিক্সেল ক্যামেরা অরিজিনালের একটি ফোল্ডার ১৬০০ px দীর্ঘতম বাহুতে সীমিত করা হয় যাতে স্টোরফ্রন্ট দ্রুত লোড হয়, অনুপাত অক্ষুণ্ণ রেখে কিছু প্রসারিত না দেখায়।
• একটি মাস্টার ফাইল থেকে সোশ্যাল ও অ্যাপ অ্যাসেট তৈরি করা। Open Graph কার্ডের জন্য সঠিক ১২০০×৬৩০ সেট করুন, তারপর অ্যাপ আইকনের জন্য ৫১২×৫১২, কোনো ভারী এডিটর না খুলে কয়েক ক্লিকে প্রতিটি এক্সপোর্ট করুন।
• টিকেটে সংযুক্ত করার আগে QA বা সাপোর্ট স্ক্রিনশটের একটি ব্যাচ সংকুচিত করা। ৫০-শটের ফোল্ডার ৫০%-এ স্কেল করলে সাধারণত বাগ ট্র্যাকারে যাওয়ার আগে আর্কাইভের আকার প্রায় তিন চতুর্থাংশ কমে যায়।

একটি কাজের উদাহরণ: ৪০০০ px ফটো থেকে ১৬০০ px ওয়েব ছবি

ফোন থেকে সরাসরি আসা ৪০০০×৩০০০ ফটো একটি সাধারণ পেলোড যা যেকোনো ওয়েব লেআউটের চেয়ে অনেক বড়। রিসাইজিং কী বাঁচায় তার জন্য এটি একটি ন্যায্য মানদণ্ড।

ফটোটি আপলোড জোনে ড্রপ করুন, মোড দীর্ঘতম বাহু সীমিত করুন-এ রাখুন এবং মান ১৬০০ সেট করুন। Canvas পাইপলাইন ছবিটি ১৬০০×১২০০-এ অনুপাত সংরক্ষণ করে পুনরায় তৈরি করে, তারপর মূল ফরম্যাটে পুনরায়-এনকোড করে। আউটপুট কার্ড নতুন মাত্রা ও ফাইল আকার দেখায়, যা একটি সাধারণ JPEG-এর জন্য কয়েক মেগাবাইট থেকে কয়েকশো কিলোবাইটে নামে। একটি ফাইলের জন্য কার্ডে ডাউনলোড ক্লিক করুন, বা একটি পাসে কয়েকটি ছবি রিসাইজ করলে ডাউনলোড .zip ক্লিক করুন। এই আকারের ছবির জন্য ড্রপ থেকে ডাউনলোড পর্যন্ত পুরো রাউন্ড-ট্রিপ এক সেকেন্ডের ভগ্নাংশে চলে এবং পেজ নিজে লোড হওয়ার পরে শূন্য ব্যান্ডউইডথ ব্যবহার করে।

কোন রিসাইজ মোডগুলো পাওয়া যায়?

তিনটি। দীর্ঘতম বাহু সীমিত করুন প্রস্থ বা উচ্চতার মধ্যে লম্বাটিকে একটি পিক্সেল মানে সীমিত করে এবং অন্যটি মিলিয়ে স্কেল করে, যা নিরাপদ ডিফল্ট কারণ এটি কখনও বিকৃত করে না। সঠিক প্রস্থ × উচ্চতা আপনাকে উভয় সংখ্যা টাইপ করতে দেয়, একটি অনুপাত লক সহ যা প্রথম ফিল্ড সম্পাদনা করার সময় উৎস অনুপাত থেকে দ্বিতীয়টি গণনা করে — ফর্মে সঠিক অ-সমানুপাতিক আকার দরকার হলে লক বন্ধ করুন। শতাংশ দিয়ে স্কেল করুন উভয় মাত্রা একটি গুণনীয়কে গুণ করে, পুরো ব্যাচকে একসাথে অর্ধেক বা দ্বিগুণ করার জন্য সুবিধাজনক। ছটি ওয়ান-ক্লিক প্রিসেট (১৯২০×১০৮০ থেকে ১৫০×১৫০ থাম্বনেইল) সবচেয়ে সাধারণ লক্ষ্যগুলো কভার করে।

এটি কি আমার ডিভাইসে হয়?

হ্যাঁ, সম্পূর্ণরূপে। পেজটি প্রতিটি ছবি মেমরিতে ডিকোড, পুনরায় তৈরি এবং পুনরায়-এনকোড করতে ব্রাউজারের নেটিভ Canvas API ও Web File API ব্যবহার করে। কোনো ছবির ডেটা সার্ভারে পাঠানো হয় না, কোনো অস্থায়ী আপলোড নেই, কোনো ক্লাউড রাউন্ড-ট্রিপ নেই। আপনি নিজেই যাচাই করতে পারেন: DevTools খুলুন, Network প্যানেলে যান এবং একটি রিসাইজ চালান। দেখা যাওয়া একমাত্র আউটবাউন্ড অনুরোধগুলো হবে প্রাথমিক পেজ লোড ও বিজ্ঞাপন কল। ছবি-আকারের কিছুই ট্যাব ছাড়ে না, যা স্ক্যান করা ID, মেডিকেল ছবি ও অন্যান্য সংবেদনশীল উপাদানের জন্য এটিকে নিরাপদ করে।

রিসাইজিং কি মানের ক্ষতি করবে?

ছবি সংকুচিত করা (ডাউনস্কেলিং) চমৎকার দেখায় — ব্রাউজার উৎস পিক্সেলগুলো কম পিক্সেলে গড় করে, তাই বিস্তারিত স্পষ্ট থাকে এবং ফাইল অনেক ছোট হয়। উৎস রেজোলিউশনের বাইরে বড় করা (আপস্কেলিং) কখনও ক্যাপচার না হওয়া বিস্তারিত তৈরি করতে পারে না, তাই বড় করা ছোট ছবি ঝাপসা দেখাবে; এটি প্রতিটি রিসাইজারের সীমাবদ্ধতা, শুধু এটির নয়। আউটপুট উৎস ফরম্যাট রাখে: PNG লসলেস থাকে, JPEG ও WebP উচ্চ মানে পুনরায়-এনকোড হয়।

কোন ফাইল ফরম্যাটগুলো সমর্থিত?

ইনপুটে, ব্রাউজার ডিকোড করতে পারে এমন যেকোনো ফরম্যাট গৃহীত: PNG, JPEG, WebP, GIF ও BMP প্রায় প্রতিটি ফোন, ক্যামেরা বা স্ক্রিনশট টুলের ফাইল কভার করে। আউটপুট যেখানে Canvas এনকোডার সমর্থন করে সেখানে উৎস ফরম্যাট বজায় রাখে — PNG, JPEG ও WebP সরাসরি রাউন্ড-ট্রিপ করে। GIF ও BMP, যা Canvas API ডিকোড করতে পারে কিন্তু পুনরায়-এনকোড করতে পারে না, লসলেস PNG হিসেবে সংরক্ষিত হয়। রিসাইজ করা ফাইলনামে নতুন মাত্রা অন্তর্ভুক্ত থাকে (উদাহরণ photo-1600x1200.jpg) যাতে ব্যাচ সহজে বাছাই করা যায়।

আপনার ছবি ড্রপ করুন, একটি আকার বেছে নিন, রিসাইজ করুন। সবকিছু আপনার ট্যাবে চলে। কোনো আপলোড নেই, কোনো অ্যাকাউন্ট নেই, কোনো সার্ভার কিউতে অপেক্ষা নেই।