Online Tool Store
Srcset জেনারেটর
Canvas API দিয়ে একটি আপলোড করা ছবিকে একাধিক প্রস্থে রিসাইজ করুন এবং সংশ্লিষ্ট <img srcset sizes> মার্কআপ ও ডাউনলোডযোগ্য ফাইল তৈরি করুন, ব্রাউজারেই।
🔒 এই টুলটি সম্পূর্ণভাবে আপনার ব্রাউজারে চলে। আপনার ফাইল কখনও সার্ভারে আপলোড করা হয় না।
ডিফল্টভাবে একটি নমুনা গ্রেডিয়েন্ট ছবি ব্যবহৃত হয় — প্রতিস্থাপন করতে আপনার নিজের ছবি আপলোড করুন।
এটি কীভাবে কাজ করে
- একটি ছবি আপলোড করুন (ডিফল্টভাবে একটি নমুনা গ্রেডিয়েন্ট দেখানো হয়)।
- আপনার লক্ষ্য প্রস্থ ও একটি ফাইলনাম ভিত্তি সেট করুন — প্রিভিউ তাৎক্ষণিক আপডেট হয়।
- আপনার লেআউটে ছবিটি যেভাবে দেখায় তার সঙ্গে মেলাতে "sizes" অ্যাট্রিবিউট সমন্বয় করুন।
- তৈরি হওয়া মার্কআপ কপি করুন এবং এর পাশে হোস্ট করতে রিসাইজ করা ফাইলগুলো ডাউনলোড করুন।
FAQ
এই টুল আসলে কী তৈরি করে?
এটি Canvas API দিয়ে আপনার আপলোড করা ছবিকে প্রতিটি লক্ষ্য প্রস্থে রিসাইজ করে, তারপর সংশ্লিষ্ট <img srcset sizes> মার্কআপ লেখে যাতে ব্রাউজার প্রতিটি ভিউপোর্টের জন্য সঠিক ফাইল বাছতে পারে।
"sizes" অ্যাট্রিবিউটে কী রাখব?
বিভিন্ন ভিউপোর্টে ছবিটি কতটা প্রশস্ত দেখায় তার একটি CSS-সদৃশ বর্ণনা, যেমন "(max-width: 768px) 100vw, 50vw" মানে মোবাইলে এটি ভিউপোর্ট পূরণ করে এবং বড় স্ক্রিনে অর্ধেক ভিউপোর্ট। আপনার প্রকৃত লেআউটের সঙ্গে মেলান।
রিসাইজ করা ফাইলগুলো কি আমাকে নিজে আপলোড করতে হবে?
হ্যাঁ — "সব আকার ডাউনলোড করুন" তৈরি হওয়া মার্কআপের সঙ্গে মিলে যাওয়া ফাইলনামে (যেমন photo-640w.jpg) প্রতিটি রিসাইজ করা JPEG আপনার ডিভাইসে সংরক্ষণ করে। সেই একই পাথে আপনার ইমেজ হোস্ট বা CDN-এ আপলোড করুন।
ডাউনলোডগুলো মূল ফরম্যাটের বদলে JPEG কেন?
রেসপনসিভ ফটো ডেলিভারির জন্য JPEG ফাইলের আকার ছোট ও অনুমেয় রাখে। স্বচ্ছতা বা ভালো কম্প্রেশনের জন্য PNG বা WebP আউটপুট দরকার হলে পরে একটি ডেডিকেটেড ইমেজ কনভার্টার দিয়ে রিসাইজ করুন।
আমার ছবি কি কোথাও আপলোড হয়?
না। রিসাইজিং আপনার ব্রাউজারে একটি <canvas>-এ স্থানীয়ভাবে ঘটে — মূল ফাইলটি কখনও আপনার ডিভাইস ছাড়ে না।
আমরা কীভাবে তুলনীয়
| বৈশিষ্ট্য | Online Tool Store | একটি ইমেজ এডিটরে হাতে রিসাইজ করা | CDN-এর স্বয়ংক্রিয় ইমেজ রিসাইজিং পরিষেবা |
|---|---|---|---|
| স্বয়ংক্রিয়ভাবে মিলে যাওয়া মার্কআপ তৈরি করে | ✓ | ✗ | পরিষেবার উপর নির্ভর করে |
| কোনো অ্যাকাউন্ট বা ব্যাকএন্ড লাগে না | ✓ | ✓ | ✗ |
| ফ্রি, প্রতি ছবিতে খরচ নেই | ✓ | ✓ | ব্যবহারভিত্তিক মূল্য |
বিল্ড ধাপ বা CDN অ্যাকাউন্ট ছাড়াই যদি আপনার শুধু একবারের রেসপনসিভ ছবির সেট ও মিলে যাওয়া মার্কআপ দরকার হয়, এই টুল এক পৃষ্ঠায় উভয়ই তৈরি করে।