Image Tag (img) এবং Image Attributes গাইড ও নোট

HTML5 এ Image Tag (<img>) ব্যবহার করে ওয়েব পেজে ইমেজ এম্বেড করা হয়। এটি একটি self-closing ট্যাগ, অর্থাৎ এটি ক্লোজিং ট্যাগ ছাড়াই ব্যবহার করা হয়। ইমেজ ট্যাগ ব্যবহার করে ওয়েব পেজে বিভিন্ন ফরম্যাটের ছবি যোগ করা যায়, যেমন JPEG, PNG, GIF ইত্যাদি। <img> ট্যাগের সাথে বিভিন্ন Attributes ব্যবহার করে ইমেজের আকার, বর্ণনা, এবং স্টাইল নির্ধারণ করা যায়। নিচে <img> ট্যাগ এবং এর Attributes সম্পর্কে বিস্তারিত আলোচনা করা হলো।

Image Tag (<img>) এর গঠন

<img src="image.jpg" alt="Description of the image" width="500" height="300">

• <img>: ইমেজ এম্বেড করার জন্য HTML ট্যাগ।
• src: ইমেজের সোর্স বা ফাইল পাথ, যা ইমেজ প্রদর্শন করার জন্য ব্যবহৃত হয়।
• alt: ইমেজের বিকল্প টেক্সট, যা ইমেজ লোড না হলে বা অ্যাক্সেসিবিলিটি ডিভাইসে ইমেজের পরিবর্তে প্রদর্শিত হয়।
• width এবং height: ইমেজের প্রস্থ এবং উচ্চতা নির্ধারণ করতে ব্যবহৃত হয়।

Image Attributes

HTML5 এ <img> ট্যাগের সাথে বেশ কিছু গুরুত্বপূর্ণ Attributes ব্যবহার করা হয়, যা ইমেজের আকার, স্টাইলিং, এবং বৈশিষ্ট্য নির্ধারণে সহায়ক। নিচে এই Attributes এর বিস্তারিত আলোচনা করা হলো:

১. src (Source)

• বর্ণনা: ইমেজের সোর্স বা লোকেশন নির্ধারণ করে, যা ইমেজের ফাইল পাথ বা URL নির্দেশ করে।
• ব্যবহার: লোকাল ইমেজ ফাইল বা ওয়েবের কোনো ইমেজ ফাইল লোড করতে।
• উদাহরণ: 

<img src="images/picture.jpg" alt="A beautiful scenery">

• এখানে "images/picture.jpg" হলো ইমেজের লোকাল সোর্স।

২. alt (Alternative Text)

• বর্ণনা: ইমেজের একটি বর্ণনা বা বিকল্প টেক্সট প্রদান করে, যা ইমেজ লোড না হলে বা স্ক্রিন রিডার ব্যবহারকারীরা ইমেজের পরিবর্তে পড়তে পারে।
• গুরুত্ব: এটি অ্যাক্সেসিবিলিটি উন্নত করে এবং SEO তে সাহায্য করে, কারণ সার্চ ইঞ্জিন ইমেজের alt ট্যাগ পড়ে।
• উদাহরণ:

<img src="images/picture.jpg" alt="A beautiful mountain view">

• এখানে, "A beautiful mountain view" ইমেজের একটি বিকল্প বর্ণনা।

৩. width এবং height

• বর্ণনা: ইমেজের প্রস্থ (width) এবং উচ্চতা (height) নির্ধারণ করে, যা পিক্সেলে উল্লেখ করা হয়।
• ব্যবহার: ইমেজের আকার নিয়ন্ত্রণ করতে এবং নির্দিষ্ট লেআউট বজায় রাখতে।
• উদাহরণ:

<img src="images/picture.jpg" alt="A beautiful scenery" width="500" height="300">

• এখানে, ইমেজের প্রস্থ ৫০০ পিক্সেল এবং উচ্চতা ৩০০ পিক্সেল নির্ধারণ করা হয়েছে।

৪. title

• বর্ণনা: ইমেজের একটি টুলটিপ যোগ করতে ব্যবহার করা হয়, যা ইমেজের উপর মাউস হোভার করলে প্রদর্শিত হয়।
• ব্যবহার: ইমেজ সম্পর্কে আরও তথ্য বা বর্ণনা প্রদর্শন করতে।
• উদাহরণ:

<img src="images/picture.jpg" alt="A beautiful scenery" title="Scenic mountain view during sunrise">

৫. loading

• বর্ণনা: ইমেজ লোড করার প্রক্রিয়া নির্ধারণ করে। HTML5 এ নতুন এই অ্যাট্রিবিউটটি lazy বা eager হতে পারে।
  • lazy: স্ক্রল করে ইমেজ যখন ভিউপোর্টে আসবে তখন লোড হবে। এটি পেজের লোডিং টাইম উন্নত করে।
  • eager: ইমেজ দ্রুত লোড হয়, ডিফল্ট সেটিং।
• উদাহরণ:

<img src="images/picture.jpg" alt="A beautiful scenery" loading="lazy">

৬. style

• বর্ণনা: ইনলাইন স্টাইল যোগ করতে ব্যবহৃত হয়, যা ইমেজের স্টাইলিং কাস্টমাইজ করতে সহায়ক।
• উদাহরণ:

CSS দিয়ে ইমেজ স্টাইলিং কাস্টমাইজ করা

HTML ইমেজ ট্যাগের সাথে CSS ব্যবহার করে ইমেজের আকার, পজিশন, এবং স্টাইলিং কাস্টমাইজ করা যায়।

<style>
    img {
        max-width: 100%; /* ইমেজকে রেস্পন্সিভ করে তোলে */
        height: auto; /* উচ্চতা আপেক্ষিক করে তোলে */
        border-radius: 10px; /* কোণাগুলো গোলাকার করে */
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* ইমেজের চারপাশে শেডো */
    }
</style>

<img src="images/picture.jpg" alt="A beautiful scenery">

ব্যাখ্যা:

• max-width: ইমেজের প্রস্থ প্যারেন্ট কন্টেইনারের প্রস্থ অনুযায়ী স্কেল করে, যা রেস্পন্সিভ ডিজাইন নিশ্চিত করে।
• height: auto;: ইমেজের উচ্চতা আপেক্ষিক করে, যা প্রস্থ অনুযায়ী স্বয়ংক্রিয়ভাবে পরিবর্তিত হয়।
• border-radius: ইমেজের কোণাগুলো গোলাকার করে।
• box-shadow: ইমেজের চারপাশে শেডো যোগ করে, যা ইমেজকে আরও আকর্ষণীয় করে।

Image Tag এর কিছু ব্যবহারিক উদাহরণ

১. ওয়েব থেকে ইমেজ লোড করা

<img src="https://www.example.com/image.jpg" alt="External Image">

২. লোকাল ফাইল থেকে ইমেজ লোড করা

<img src="images/local-image.jpg" alt="Local Image">

৩. রেস্পন্সিভ ইমেজ ব্যবহার করা

<img src="images/responsive.jpg" alt="Responsive Image" style="max-width: 100%; height: auto;">

সারসংক্ষেপ