HTML ইমেজ এলিমেন্ট: প্রয়োজনীয় অ্যাট্রিবিউট এবং সর্বোত্তম অনুশীলন
HTML <img> এলিমেন্ট হল ওয়েব ডেভেলপমেন্টের একটি মৌলিক অংশ, যা ডেভেলপারদের ওয়েবপেজে ছবি এম্বেড করার সুবিধা দেয়
HTML image tag tutorial in Bengali for beginners by Programming School BD
। প্রশিক্ষণ বিষয়বস্তু অনুযায়ী, প্রতিটি ইমেজ এলিমেন্টের সাথে চারটি অত্যাবশ্যক অ্যাট্রিবিউট যুক্ত করা উচিত যা সঠিক কার্যকারিতা, অ্যাক্সেসিবিলিটি এবং পারফরম্যান্স নিশ্চিত করে।
চারটি প্রয়োজনীয় ইমেজ অ্যাট্রিবিউট
১. সোর্স (src) অ্যাট্রিবিউট
src অ্যাট্রিবিউট ব্রাউজারকে বলে যে কোন ইমেজ ফাইল লোড করতে হবে। এটি হতে পারে:
একটি অ্যাবসোলিউট URL যা বাহ্যিক রিসোর্সের দিকে নির্দেশ করে
একটি রিলেটিভ পাথ স্থানীয় ইমেজ ফাইলের জন্য
html
<img src="https://example.com/images/dog.jpg">
২. অ্যাক্সেসিবিলিটির জন্য Alt অ্যাট্রিবিউট
alt অ্যাট্রিবিউট বিকল্প টেক্সট প্রদান করে যা ছবি দেখা না গেলে একটি বিকল্প হিসেবে কাজ করে
Illustration showing alt-text accessibility with an example HTML image tag including descriptive alt text
। এটি গুরুত্বপূর্ণ:
স্ক্রিন রিডার ব্যবহারকারীদের জন্য যারা অন্ধ বা দৃষ্টিহীন
এমন পরিস্থিতিতে যেখানে ছবি লোড হয় না
সার্চ ইঞ্জিন অপ্টিমাইজেশনের জন্য
Alt টেক্সটের জন্য সর্বোত্তম অনুশীলন:
বর্ণনামূলক এবং সংক্ষিপ্ত হন - ছবির গুরুত্বপূর্ণ দিকে মনোযোগ দিন
অপ্রয়োজনীয় বাক্যাংশ যেমন "এর ছবি" বা "এর ইমেজ" এড়িয়ে চলুন
যথোপযুক্ত হলে সৃজনশীল, মজাদার বা কাব্যিক হতে পারে
কেবল সাজসজ্জার ছবির জন্য খালি রাখুন (
alt="") অপ্রয়োজনীয় পুনরাবৃত্তি এড়াতে
html
<img src="dog.jpg" alt="চকচকে কালো কুকুর চিন্তায় মগ্ন">
৩. Width এবং Height অ্যাট্রিবিউট
width এবং height অ্যাট্রিবিউট পিক্সেলে ছবির মাত্রা নির্দিষ্ট করে। এই মানগুলি ইমেজ ফাইলের প্রকৃত পিক্সেল মাত্রার সাথে মিলতে হবে।
html
<img src="dog.jpg" alt="চকচকে কালো কুকুর চিন্তায় মগ্ন" width="400" height="300">
গুরুত্বপূর্ণ নোট:
মান শুধুমাত্র সংখ্যা হিসেবে নির্দিষ্ট করুন (কোন একক প্রয়োজন নেই)
HTML-এ অ্যাট্রিবিউটের ক্রম কোন ব্যাপার না
এই মাত্রাগুলি প্রকৃত ইমেজ ফাইলের আকার প্রতিফলিত করা উচিত
Width এবং Height কেন গুরুত্বপূর্ণ
যদিও width এবং height অ্যাট্রিবিউট ছাড়াও ছবিগুলি সঠিকভাবে প্রদর্শিত হবে, কিন্তু এগুলি অন্তর্ভুক্ত করা পারফরম্যান্সের উল্লেখযোগ্য সুবিধা প্রদান করে:
লেআউট স্থিতিশীলতা
যখন ব্রাউজার আগে থেকে ইমেজের মাত্রা জানে না, তখন তাদের:
প্রথমে ইমেজ ফাইল ডাউনলোড করতে হয়
মাত্রা নির্ধারণ করতে ফাইল পড়তে হয়
পেজ লেআউট পুনরায় গণনা এবং সামঞ্জস্য করতে হয়
বিদ্যমান টেক্সটের আশপাশে বিষয়বস্তু সম্ভাব্যভাবে স্থানান্তর করতে হয়
এটি পড়ার সময় বিষয়বস্তু লাফানোর হতাশাজনক অভিজ্ঞতা তৈরি করে, কারণ ছবিগুলি লোড হয় এবং টেক্সটকে চারদিকে ধাক্কা দেয়।
পারফরম্যান্স অপ্টিমাইজেশন
আগে থেকে মাত্রা নির্দিষ্ট করে, ব্রাউজার পারে:
তাৎক্ষণিকভাবে সঠিক পরিমাণ স্থান সংরক্ষণ করা
ছবি ডাউনলোড শেষ হওয়ার আগেই লেআউট গণনা করা
বিষয়বস্তু স্থানান্তর এবং লেআউট থ্র্যাশিং প্রতিরোধ করা
একটি মসৃণ ব্যবহারকারীর অভিজ্ঞতা প্রদান করা
সম্পূর্ণ ইমেজ এলিমেন্টের উদাহরণ
এখানে চারটি প্রয়োজনীয় অ্যাট্রিবিউট সহ একটি সঠিকভাবে গঠিত ইমেজ এলিমেন্ট রয়েছে:
html
<img src="https://example.com/dog.jpg" alt="চকচকে কালো কুকুর চিন্তায় মগ্ন" width="400" height="300">
কখন খালি Alt টেক্সট ব্যবহার করবেন
কিছু নির্দিষ্ট পরিস্থিতি রয়েছে যেখানে খালি alt টেক্সট উপযুক্ত:
উদাহরণ: টেক্সট সহ কোম্পানির লোগো
html
<h1>হ্যাপি ডগ ডে কেয়ার</h1> <img src="logo.png" alt="" width="100" height="50">
এই ক্ষেত্রে, যেহেতু কোম্পানির নাম ইতিমধ্যে হেডিং-এ উপস্থিত, স্ক্রিন রিডার দ্বারা "হ্যাপি ডগ ডে কেয়ার" এবং "হ্যাপি ডগ" দুটোই ঘোষণা করা অপ্রয়োজনীয় হবে এবং ব্যবহারকারীর অভিজ্ঞতা হ্রাস করবে।
গুরুত্বপূর্ণ: সর্বদা alt অ্যাট্রিবিউট অন্তর্ভুক্ত করুন, খালি হলেও। এটি সম্পূর্ণভাবে বাদ দিলে স্ক্রিন রিডার ইমেজ ফাইলনেম ঘোষণা করতে পারে।
চারটি প্রয়োজনীয় অ্যাট্রিবিউট - src, alt, width, এবং height - একসাথে মিলে অ্যাক্সেসিবল, পারফরম্যান্ট এবং ব্যবহারকারী-বান্ধব ওয়েব অভিজ্ঞতা তৈরি করে। সঠিক বাস্তবায়ন লেআউট স্থানান্তর প্রতিরোধ করে, সহায়ক প্রযুক্তিগুলিকে সমর্থন করে, এবং নিশ্চিত করে যে ছবিগুলি সামগ্রিক ওয়েব অভিজ্ঞতায় ইতিবাচক অবদান রাখে।
Comments
Post a Comment