ইমেজ রিপ্লেসার আপনাকে একটি ওয়েবপেজের যেকোনো ছবিতে ক্লিক করে তা আপনার নিজের ছবি দিয়ে বদলে দেওয়ার সুযোগ দেয় — সেটি লোকাল ফাইল আপলোড করে হোক বা কোনো ছবির URL পেস্ট করে। নতুন ফাইলটি মূল এলিমেন্টের ডাইমেনশনের সাথে নিখুঁতভাবে ফিট হয়ে যায়, ফলে পেজের লেআউট ঠিক থাকে। প্রোডাকশন কনটেক্সটে নতুন অ্যাসেটগুলো কেমন দেখায় তা পরীক্ষা করুন, বাস্তব কন্টেন্ট দিয়ে মকআপ তৈরি করুন অথবা কাস্টম ছবি দিয়ে স্ক্রিনশট নিন।
ডিজাইনার এবং ডেভেলপারদের প্রায়ই দেখতে হয় যে একটি বিদ্যমান লেআউটে একটি নতুন ছবি কেমন দেখাবে। নতুন হিরো ইমেজটি কি বর্তমান টেক্সট ওভারলের সাথে মানিয়ে যাবে? নতুন পণ্যের ছবিটি কি বিদ্যমান কার্ড গ্রিডে ঠিকঠাক দেখাবে? ক্লায়েন্টের লোগোটি কি হেডারের জন্য সঠিক সাইজের? সাধারণত, এই প্রশ্নগুলোর উত্তর পেতে কোড এডিট করা, ইমেজ ফাইল পরিবর্তন করা, রিবিল্ড করা এবং প্রিভিউ করার প্রয়োজন হয়। ইমেজ রিপ্লেসার এটিকে তাৎক্ষণিক করে তোলে — আপনি যে ছবিটি পরিবর্তন করতে চান তাতে ক্লিক করুন, একটি নতুন ছবি আপলোড করুন বা একটি URL পেস্ট করুন এবং সাথে সাথে ছবিটি বদলে যাবে। এটি মূল এলিমেন্টের ডাইমেনশন এবং স্টাইলিং অক্ষুণ্ণ রাখে। লেআউট সরে যায় না, আশেপাশের এলিমেন্টগুলো তাদের জায়গায় থাকে এবং আপনি বাস্তব পেজের প্রেক্ষাপটে নতুন ছবিটি ঠিক কেমন দেখাচ্ছে তা দেখতে পান। সমস্ত পরিবর্তন নন-ডেসট্রাক্টিভ এবং পেজ রিফ্রেশ করলে এগুলো আগের অবস্থায় ফিরে যায়।
পেজের ছবিগুলোর ওপর মাউস নিয়ে গেলে সেগুলো হাইলাইট হবে। আপনি যে ছবিটি পরিবর্তন করতে চান তা সিলেক্ট করতে ক্লিক করুন। টুলটি img এলিমেন্ট, CSS background-image এলিমেন্ট এবং picture/source এলিমেন্টগুলো শনাক্ত করতে পারে।
আপনার কম্পিউটার থেকে একটি ইমেজ ফাইল ড্র্যাগ অ্যান্ড ড্রপ করুন অথবা ফাইল পিকার ওপেন করতে ক্লিক করুন। এটি PNG, JPG, WebP, SVG এবং GIF ফরম্যাট সাপোর্ট করে। ফাইলটি লোকালভাবে লোড হয় — কখনোই কোনো সার্ভারে আপলোড করা হয় না।
অন্য কোথাও কি কোনো ছবি হোস্ট করা আছে? URL-টি পেস্ট করুন এবং এটি তাৎক্ষণিকভাবে কার্যকর হবে। যেকোনো পাবলিকলি অ্যাক্সেসযোগ্য ইমেজ URL-এর ক্ষেত্রে এটি কাজ করে — Unsplash, Imgur, আপনার CDN, S3 বাকেটস বা যেকোনো সরাসরি ইমেজ লিঙ্ক।
প্রতিস্থাপিত ছবিটি object-fit ব্যবহার করে মূল এলিমেন্টের ডাইমেনশন পূরণ করে, ফলে পেজের লেআউট ঠিক আগের মতোই থাকে। কোনো লেআউট শিফট বা গ্রিড ভেঙে যাওয়ার ভয় নেই। নতুন ছবিটি নির্ধারিত জায়গার সাথে খাপ খাইয়ে নেয়।
একটি সাইডবার প্যানেল আপনার বর্তমান সেশনের বদলে দেওয়া সব ছবি ট্র্যাক করে। এক নজরে মূল বনাম নতুন ছবিটি দেখুন এবং যেকোনো হিস্ট্রি এন্ট্রিতে ক্লিক করে সেই নির্দিষ্ট পরিবর্তনটি আনডু (undo) করুন।
সমস্ত পরিবর্তন শুধুমাত্র ব্রাউজার মেমোরিতে থাকে। পেজের আসল ইমেজ ফাইল বা HTML কখনোই পরিবর্তন করা হয় না। প্রতিটি আসল ছবি তাৎক্ষণিকভাবে পুনরুদ্ধার করতে পেজটি রিফ্রেশ করুন। যেকোনো ওয়েবসাইটে ব্যবহারের জন্য নিরাপদ।
আপনার টিমের কাছে হোমপেজের জন্য তিনটি সম্ভাব্য হিরো ইমেজ আছে। প্রতিটি আলাদাভাবে ডিপ্লয় করার পরিবর্তে প্রোডাকশন সাইটটি ওপেন করুন এবং প্রতিটি ছবি দিয়ে হিরো ইমেজটি বদলে দেখুন। বাস্তব টেক্সট ওভারলে, ন্যাভিগেশন বার এবং আশেপাশের কন্টেন্টের সাথে প্রতিটি ছবি কেমন দেখাচ্ছে তা যাচাই করুন।
ক্লায়েন্ট কলের সময় কোনো স্টেজিং সাইটের প্লেসহোল্ডার ইমেজগুলো ক্লায়েন্টের আসল পণ্যের ছবি বা ব্র্যান্ড অ্যাসেট দিয়ে বদলে দিন। ফাইনাল ডিজাইনে তাদের কন্টেন্ট ঠিক কেমন দেখাবে তা সরাসরি ব্রাউজারে তাদের দেখান।
বিভিন্ন আঞ্চলিক কন্টেন্টসহ স্ক্রিনশট প্রয়োজন? প্রোডাক্ট ইমেজ, টিমের ছবি বা ফিচার গ্রাফিক্সগুলোকে অঞ্চল-ভিত্তিক ভার্সন দিয়ে বদলে ফেলুন এবং প্রতিটি মার্কেটের জন্য স্ক্রিনশট নিন — কোনো আলাদা বিল্ড ডিপ্লয় না করেই।
একটি বিদ্যমান পেজে কোনো নতুন ইলাস্ট্রেশন স্টাইল বা ফটোগ্রাফি অ্যাপ্রোচ কেমন দেখাবে তা এক্সপ্লোর করুন। কোনো কোড স্পর্শ না করেই নতুন ডিজাইনের একটি ভিজ্যুয়াল প্রোটোটাইপ তৈরি করতে একে একে ছবিগুলো বদলে দেখুন।
কোয়ালিটি গ্রহণযোগ্য কিনা তা যাচাই করতে একটি JPG ছবিকে WebP ভার্সন দিয়ে বদলে দেখুন। অথবা লেআউটটি ২x ইমেজ ঠিকঠাক হ্যান্ডেল করে কিনা তা পরীক্ষা করতে একটি হাই-রেজোলিউশন ইমেজ দিয়ে বদলে দেখুন। ফাইল কনভার্ট করার আগে ভিজ্যুয়ালভাবে ইমেজ ফরম্যাটের পরিবর্তনগুলো পরীক্ষা করে নিন।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং ইমেজ রিপ্লেসার আইকনে ক্লিক করুন। টুলটি সক্রিয় হবে এবং পেজের ছবিগুলো ক্লিকযোগ্য টার্গেটে পরিণত হবে, যা হোভার করলে হাইলাইট হবে।
পেজের যেকোনো ছবিতে ক্লিক করুন। একটি রিপ্লেসমেন্ট ডায়ালগ বক্স দেখা যাবে যেখানে বর্তমান ছবির তথ্য (ফাইলের নাম, ডাইমেনশন, সাইজ) এবং আপলোড বা URL পেস্ট করার অপশন থাকবে।
আপনার কম্পিউটার থেকে একটি ফাইল ড্র্যাগ অ্যান্ড ড্রপ করুন, ব্রাউজ করতে ক্লিক করুন অথবা একটি ছবির URL পেস্ট করুন। পরিবর্তনটি তাৎক্ষণিকভাবে কার্যকর হবে এবং ছবিটি নির্ধারিত জায়গায় বদলে যাবে।
আসল পেজ লেআউটে নতুন ছবিটি কেমন দেখায় তা দেখুন। টেক্সট ওভারলের সাথে তা মানাচ্ছে কিনা, কন্টেইনারে ঠিকমতো ফিট হয়েছে কিনা এবং আশেপাশের কন্টেন্টের সাথে সামঞ্জস্যপূর্ণ কিনা তা চেক করুন।
পরিবর্তন চালিয়ে যেতে অন্য ছবিগুলোতে ক্লিক করুন। হিস্ট্রি সাইডবার আপনার সব পরিবর্তন ট্র্যাক করবে। কাজ শেষ হলে আসল ছবিগুলো ফিরিয়ে আনতে পেজটি রিফ্রেশ করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
