IMG ট্যাগ বৈশিষ্ট্যাবলী

ছবি এবং অবজেক্টের জন্য এইচটিএমএল IMG ট্যাগ ব্যবহার

এইচটিএমএল IMG ট্যাগ একটি ওয়েব পেজের মধ্যে ছবি এবং অন্যান্য স্ট্যাটিক গ্রাফিকাল বস্তুগুলি সন্নিবেশ করাকে নিয়ন্ত্রণ করে। এই সাধারণ ট্যাগটি বিভিন্ন বাধ্যতামূলক এবং ঐচ্ছিক বৈশিষ্ট্যগুলি সমর্থন করে যা একটি আকর্ষক, চিত্র-ভিত্তিক ওয়েবসাইট ডিজাইন করার আপনার ক্ষমতাতে সমৃদ্ধি যোগ করে।

একটি সম্পূর্ণরূপে গঠিত এইচটিএমএল IMG ট্যাগ একটি উদাহরণ এই মত দেখায়:

প্রয়োজনীয় IMG ট্যাগ বৈশিষ্ট্যাবলী

কি SRC। শুধুমাত্র একটি ওয়েবপেজে চিত্র প্রদর্শন করার জন্য আপনার প্রয়োজন এমন বৈশিষ্ট্যটি হল এসআরসি অ্যাট্রিবিউট। এই বৈশিষ্ট্য প্রদর্শন করা ইমেজ ফাইল নাম এবং অবস্থান সনাক্ত।

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

ওয়েব পৃষ্ঠার পাঠ্য প্রাসঙ্গিক বা গুরুত্বপূর্ণ নয় এমন চিত্র সম্পর্কে অতিরিক্ত বিবরণের জন্য Alt পাঠ ব্যবহার করুন। কিন্তু মনে রাখবেন যে স্ক্রিন পাঠক এবং অন্যান্য টেক্সট-কেবল ব্রাউজারগুলিতে, পাঠ্যটি পৃষ্ঠার বাকি অংশের সাথে ইনলাইন পড়বে। বিভ্রান্তি দূর করতে, বর্ণনামূলক Alt পাঠ্য ব্যবহার করুন (উদাহরণস্বরূপ), "লোগো" এর পরিবর্তে "ওয়েব ডিজাইন এবং এইচটিএমএল সম্পর্কে"।

HTML5 এ, ALT অ্যাট্রিবিউটটি সর্বদা প্রয়োজন হয় না, কারণ আপনি এটিতে আরো বিবরণ যোগ করার জন্য একটি ক্যাপশন ব্যবহার করতে পারেন। আপনি একটি আইডি উল্লেখ করতে ARIA-DESCRIBEDBY- এর বৈশিষ্ট্যটি ব্যবহার করতে পারেন যা একটি পূর্ণ বিবরণ ধারণ করে।

ইমেজটি সম্পূর্ণরূপে আলংকারিক, যেমন ওয়েব পৃষ্ঠা বা আইকনগুলির শীর্ষে একটি গ্রাফিক হিসাবে Alt পাঠ্যের প্রয়োজন নেই। কিন্তু যদি আপনি নিশ্চিত না হন, তবে শুধু আলটি টেক্সিতেই অন্তর্ভুক্ত করুন।

প্রস্তাবিত IMG গুণাবলী

WIDTH এবং HEIGHT আপনি WIDTH এবং HEIGHT বৈশিষ্ট্যাবলী ব্যবহার করে সর্বদা অভ্যাসের মধ্যে প্রবেশ করতে হবে। এবং আপনি সর্বদা বাস্তব আকার ব্যবহার করা উচিত এবং ব্রাউজার সঙ্গে আপনার ইমেজ মাপসই করা উচিত নয়।

এই বৈশিষ্ট্যগুলি পৃষ্ঠার রেন্ডারিংয়ের গতি বাড়ায় কারণ ব্রাউজারটি ইমেজটির জন্য ডিজাইনের স্থানটি বরাদ্দ করতে পারে, এবং তারপর সম্পূর্ণ চিত্র ডাউনলোড করার জন্য অপেক্ষা করার পরিবর্তে বাকি সামগ্রী ডাউনলোড করা চালিয়ে যেতে পারে।

অন্যান্য দরকারী IMG গুণাবলী

TITLE অ্যাট্রিবিউট হল একটি গ্লোবাল অ্যাট্রিবিউট যাটি যেকোনো HTML এলিমেন্টে প্রয়োগ করা যায়। উপরন্তু, TITLE এর বৈশিষ্ট্যাবলী আপনাকে ইমেজ সম্পর্কে অতিরিক্ত তথ্য যোগ করতে দেয়।

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

USEMAP এবং ISMAP এই দুটি বৈশিষ্ট্যগুলি ক্লায়েন্ট-সাইড () এবং সার্ভার-সাইড (ISMAP) ইমেজ ম্যাপস আপনার ইমেজগুলিতে সেট করে।

LONGDESC বৈশিষ্ট্যাবলী ইমেজ একটি দীর্ঘ বিবরণ ইউআরএল সমর্থন। এই বৈশিষ্ট্যটি আপনার চিত্রগুলিকে আরও অ্যাক্সেসযোগ্য করে তোলে।

অপ্রচলিত এবং অতিক্রান্ত IMG গুণাবলী

বেশ কিছু বৈশিষ্ট্যাবলী এখন HTML5 এ অপ্রচলিত বা এইচটিএমএল 4 এ অপ্রচলিত। সেরা এইচটিএমএল এর জন্য, আপনি এই বৈশিষ্ট্যগুলি ব্যবহার করার পরিবর্তে অন্যান্য সমাধান খুঁজে বের করতে হবে।

বর্ডার অ্যাট্রিবিউট ইমেজটির চারপাশে কোনও সীমানা পিক্সেলের প্রস্থকে সংজ্ঞায়িত করে। এটি এইচটিএমএল 4 এ CSS এর পক্ষে উপনীত হয়েছে এবং এটি HTML5 এ অপ্রচলিত।

ALIGN এই বৈশিষ্ট্যটি আপনাকে পাঠ্যের মধ্যে একটি চিত্র স্থাপন করতে এবং এটির চারপাশের পাঠ্য প্রবাহকে অনুমতি দেয়। আপনি ডান বা বামে একটি চিত্র সারিবদ্ধ করতে পারেন। এটি এইচটিএমএল 4 এর ভাসমান সিএসএস বৈশিষ্ট্যের পক্ষে অবচিত হয়েছে এবং এটি HTML5 এ অপ্রচলিত।

HSPACE এবং VSPACE এইচএসপিএসিইএ এবং VSPACE বৈশিষ্ট্যগুলি অনুভূমিকভাবে সাদা স্থান (এইচএসপিএসিএ) এবং উল্লম্বভাবে (VSPACE) যোগ করে। গ্রাফিকের উপরে (উপরের এবং নীচের বা বাম এবং ডান) হোয়াইট স্পেস যোগ করা হবে, তাই যদি আপনি কেবলমাত্র একপাশে স্থান প্রয়োজন, আপনি CSS ব্যবহার করতে হবে। এইচটিএমএল 4 এর মার্জিন সিএসএস প্রোপার্টিজের পক্ষে এই বৈশিষ্ট্যগুলি বাদ দেওয়া হয়েছে, এবং তারা HTML5 এ অপ্রচলিত।

LOWSRC LOWSRC অ্যাট্রিবিউটটি একটি বিকল্প চিত্র সরবরাহ করে যখন আপনার চিত্র উৎসটি এত বড় যে এটি অত্যন্ত ধীরে ধীরে ডাউনলোড করে। উদাহরণস্বরূপ, আপনার এমন একটি ছবি থাকতে পারে যা 500KB এর মতো আপনি আপনার ওয়েব পৃষ্ঠায় প্রদর্শন করতে চান তবে 500KB ডাউনলোড করার জন্য অনেক সময় লাগবে। তাই আপনি ইমেজটির একটি খুব ছোট কপি তৈরি করুন, সম্ভবত কালো এবং সাদা বা শুধু অত্যন্ত অপটিমাইজ করে, এবং LOWSRC এ্যাট্রিবিউটটিতে রাখুন। ছোট ছবিটি প্রথমে ডাউনলোড এবং প্রদর্শন করবে, এবং তারপর যখন বৃহত্তর চিত্রটি প্রদর্শিত হবে তখন এটি নিম্ন-সোর্স একটিকে প্রতিস্থাপন করবে।

আইওএমজি ট্যাগে নেটস্কেপ ন্যাভিগেটর 2.0-তে লোজসআরসি অ্যাট্রিবিউটটি যোগ করা হয়েছে। এটি DOM স্তরের 1 অংশ ছিল কিন্তু তারপর DOM স্তর 2 থেকে সরানো হয়। ব্রাউজার সমর্থনটি এই বৈশিষ্ট্যের জন্য স্কেচ করা হয়েছে, যদিও অনেক সাইট দাবি করে যে এটি সমস্ত আধুনিক ব্রাউজার দ্বারা সমর্থিত। এটি এইচটিএমএল 4 এ অপ্রচলিত নয় বা HTML5 তে অপ্রচলিত নয় কারণ এটি স্পেসিফিকেশন এর কোনও সরকারী অংশ নয়।

এই বৈশিষ্ট্যটি ব্যবহার করা এড়িয়ে চলুন এবং পরিবর্তে আপনার ইমেজগুলি অনুকূলিত করুন যাতে তারা দ্রুত লোড করে। পৃষ্ঠা লোডিংয়ের গতি ভাল ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ অংশ এবং বড় ইমেজগুলি ধীরে ধীরে পৃষ্ঠাগুলি ধীরে ধীরে-এমনকি যদি আপনি LOWSRC অ্যাট্রিবিউট ব্যবহার করেন।