রেসপন্সিভ ইমেজঃ অধ্যায় ১ – বর্ণনা

রেসপন্সিভ ইমেজ এখন আর নতুন কোন শব্দ নয় আমাদের কাছে, বরং বেশ পুরনোই বলা চলে। তবে আমরা অনেকেই খুব ভালভাবে রেসপন্সিভ ইমেজ সম্পর্কে জানিনা। সেজন্যই এই রেসপন্সিভ ইমেজ নিয়ে বিস্তারিত আলোচনা করব, ধৈর্য্য ধরে পড়তে থাকলে বেশ কিছু ব্যাপার আগে আপনি যা জানতেন সেটা আরও ক্লিয়ার হয়ে যাবে।

রেসপন্সিভ ইমেজ কি?

আমরা সাধারনত যেটা জানি যে রেসপন্সিভ ইমেজ হচ্ছে ব্রাউজারের সাইজ অনুযায়ী একটা ইমেজ অটোমেটিক্যালি ছোট বড় হবে।
তবে একটা বড় ইমেজকে ব্রাউজার ছোট করে দেখালেই হয় না, এতে করে একজন ইউজারের ব্রাউজারে বড় ইমেজটাই কিন্তু ডাউনলোড হবে।
অ্যাপল ওয়াচের ছবিটি দেখুন, বেশ বড় সাইজের, ৫১৪৪X১৬৯৮ পিক্সেল। এই ছবিটির ওয়েট হচ্ছে ৩৯৮ কিলোবাইট। এত বড় সাইজের ছবি মূলত আইম্যাকের মত হাই ডেনসিটি (অধিক পিক্সেল ঘনত্ব) ডিসপ্লের জন্য ব্যবহৃত হয়। এই একই ছবিটি যদি ব্ল্যাকবেরি কার্ভ ৯৩১০ এর ৩২০x২৪০ পিক্সেলের ডিসপ্লেতে দেখানো হয় তাহলে সেটাকে নিশ্চয়ই অনেক লোড টাইম নিয়ে নিবে। কারন ব্রাউজার ওই ৫১৪৪X১৬৯৮ পিক্সেলের ছবিটিকেই ডাউনলোড করাবে, এরপর সেটাকে ৩২০x২৪০ পিক্সেল এর মধ্যে দেখাবে।

এভাবে ব্যান্ডউইথের প্রচুর অপচয় হয়। মোবাইলে ছবিটি লোড হতে অনেক সময় নিয়ে নেবে। কিন্তু আমরা যদি একই ছবিটির ছোট সাইজের একটা ভার্সনও আপলোড করতাম আর ব্রাউজার ব্ল্যাকবেরি মোবাইলে ছোট সাইজ দেখাত এবং আইম্যাকে বড় সাইজটা দেখাত তাহলে সেটা যুক্তিযুক্ত হত।

যখন আমরা রেসপন্সিভ ইমেজ নিয়ে কথা বলি, তখন আমরা সাধারনত ইনলাইন ইমেজ নিয়েই কথা বলি। যেমনঃ



<img src="giraffe.jpg" alt="Giraffe">


সবচেয়ে বড় সমস্যা হচ্ছে এখানে ট্যাগটি শুধুমাত্র একটি ইমেজকেই দেখাচ্ছে। কিন্তু রেসপন্সিভ ইমেজ শুধু HTML দিয়েই লিমিটেড নয়, আমরা দেখব CSS দিয়েও রেসপন্সিভ ইমেজ কিভাবে কন্ট্রোল করা যায়।

আসুন কিছু ক্ষেত্রবিশেষ দেখি

যখন আপনি রেসপন্সিভ ইমেজের সমাধান খুজবেন, তখন আপনি অনেকগুলা সমাধান পাবেন। তবে আপনি তাতে হয়তবা কনফিউজড হয়ে যেতে পারেন যে কোন সমাধানটা আপনার জন্য সবচেয়ে কার্যকরী হবে। রেসপন্সিভ ইমেজ কমিউনিটি গ্রুপ (RICG) বেশকিছু ক্ষেত্রবিশেষ বর্ণনা করেছে। আপনি এগুলো বিস্তারিত পড়ে নিতে পারেন এবং সেটা খুব ভাল হবে আপনার জন্য। তবে আমরা নিচে আরেকটু সহজ করে বুঝার চেষ্টা করব।

রেজুলুশন পরিবর্তন

রেজুলুশন পরিবর্তন বা Resolution Switiching হচ্ছে সবচেয়ে কমন। অর্থাৎ আপনাকে একই ইমেজের ভিন্ন ভিন্ন সাইজ প্রোভাইড করতে হবে যাতে করে ভিন্ন ভিন্ন সাইজের ডিসপ্লেতে ভিন্ন ভিন্ন সাইজের ছবি লোড হয়। ফুল এইচডি মনিটরে এক সাইজের ইমেজ এবং এইচডি মনিটরে অন্য সাইজের ইমেজ লোড হবে। ভিন্ন ভিন্ন সাইজের ডিসপ্লে হলেই হবে না, ভিন্ন ভিন্ন ডেনসিটির ডিসপ্লেও হতে পারে। যেমন সাধারন ফোরকে ডিসপ্লে আর আইম্যাকের ফোরকে ডিসপ্লের সাইজ এক হলেও দুই মনিটেরর ডিসপ্লে ঘনত্ব/ডেনসিটি আলাদা।

আর্ট ডিরেকশন

কখনও কখনও রেসপন্সিভ ইমেজের জন্য আপনাকে ছবির কনটেন্টকেই চেঞ্জ করতে হতে পারে কিংবা অ্যাসপেক্ট রেশিও চেঞ্জ করতে হতে পারে। এটাকেই RICG আর্ট ডিরেকশন হিসেবে সঙ্গায়িত করেছে। বারাক ওবামার নিচের ছবিটি দেখুন।

এই ছবিটি যখন বড় ডিসপ্লেতে দেখান হচ্ছে, তখন দেখেই বোঝা যাচ্ছে যে বারাক ওবামা কোন একটা অটোমোবাইল ফ্যাক্টরিতে ভাষণ দিচ্ছেন। এখানে ব্যাকগ্রাউন্ডটা ইউজারকে বুঝতে সাহায্য করে যে ইমেজটা কিসের, ইমেজে কোন ঘটনাটা ঘটছে।

কিন্তু যখন ইউজার একই ইমেজ মোবাইলে রেসপন্সিভলি ছোট করে দেখছে তখন কি হচ্ছে?

এখন কিন্তু খুব একটা বোঝা যাচ্ছে না যে এখানে কি বারাক ওবামা দাড়িয়ে আছে নাকি অন্য কেউ। আর যেই দাড়িয়ে থাকুক, কেন দাড়িয়ে আছে, তার উদ্দেশ্য কি, কিছুই বোঝা যাচ্ছে না। তারমানে ইমেজকে রেসপন্সিভ করতে গিয়ে ছোট করলেই আমাদের সমস্যার সমাধান হচ্ছে না। যদি আমরা রেসপন্সিভ করতে গিয়ে একটু ক্রপ করে নেই তাহলে কেমন হয় দেখুন তো?

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

ব্রাউজার ছোট করলে ল্যান্ডস্কেপ ভার্সনটিও ছোট হয়ে ফলে ছবিটির লেখাগুলি পড়তে কষ্ট হয় সেজন্য ব্রাউজার ছোট হবার সাথে সাথে ল্যান্ডস্কেপ ভার্সনটি পরিবর্তন হয়ে পোর্টট্রেইট মোডে চলে যায় যাতে করে কিছু অংশ ক্রপ হলেও মূল অংশটুকু বোঝা যায়।

আর্ট ডিরেকশন বেশি ব্যবহৃত হয় যদি কোন ছবিতে টেক্সট থাকে। যেমন CB2 ওয়েবসাইটের এই হিরো ইমেজটি দেখুন।

এই ইমেজটিতে তিনটা ফটোগ্রাফি আছে, দুইটা লোগো আছে টাইপিং সহ, একটা স্ট্যাম্পও চিকন স্ট্রোক সহ। যদি এই ছবিটিকে ৩২০ পিক্সেলে রিসাইজ করে ফেলা হয় তাহলে কিন্তু আর টেক্সটগুলি পড়া যাবে না।

তারা তখন তাদের মোবাইল সাইটের জন্য আলাদাভাবে ইমেজ প্রোভাইড করেছে
ইমেজের রেসপন্সিভনেস ঠিক রাখার জন্য।

এখানে তারা বেশ কয়েকটা কাজ করেছে আর্ট ডিরেকশনের অংশ হিসেবেঃ

  • তিনটা ছবিকে দুইটা ছবি বানিয়েছে
  • টেক্সটগুলা রিমুভ করেছে
  • ইমেজের অ্যাসপেক্ট রেশিও চেঞ্জ করেছে (একটু লম্বা করেছে মোবাইলের জন্য)
  • ইমেজের লেআউট চেঞ্জ করেছে

তাহলে আর্ট ডিরেকশন বলতে শুধু বারাক ওবামার ছবিটার মত ক্রপিংকেই বোঝায় না। একটা বড় ছবিকে বড় ডিসপ্লে থেকে ছোট ডিসপ্লেতেও ভালভাবে বুঝতে পারার জন্য প্রয়োজনীয় মডিফিকেশনকেও বোঝায়।

তাহলে আমরা বুঝতে পারলাম ইমেজ রেসপন্সিভ মানে বড় ইমেজকে রিসাইজ করা নয়, বরং এর চেয়ে বেশি কিছু। পরবর্তী অধ্যায়ে আমরা ট্যাগকে কিভাবে আরও ভালভাবে রেসপন্সিভ ইমেজের কাজে লাগান যায় সেটা দেখব। আপাতত এ পর্যন্তই, ভাল থাকুন, রেসপন্সিভ হউন।

লেখক সম্পর্কে

শিমুল

নেশায় ও পেশায় গ্রাফিক ডিজাইনার। তবে নেশাটা ছড়িয়ে গেছে ফটোগ্রাফি, থ্রিডি মডেলিং, লেখালেখি এবং ঘুরাঘুরিতেও। কাজ থাকুক আর নাই থাকুক সারাদিন ওয়েবসাইট ব্রাউজ করি। এছাড়া মাঝে মাঝে গ্রাফিওরাতে আড্ডা দেই।

মন্তব্য করুন

লিখেছেন শিমুল

সাম্প্রতিক মন্তব্যগুলি

Pin It on Pinterest

Shares
Share This