এইচটিএমএল ছবি - HTML Image


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


এইচটিএমএল <img> ট্যাগ ও src এট্রিবিউট

এইচটিএমএল এ ইমেজ কে প্রদর্শন বা ডিফাইন করার হয় <img> ট্যাগ ব্যবহার করে। এটি একটি খালি বা empty ট্যাগ অর্থাৎ এর কোন শেষ ট্যাগ নেই, সুধু এট্রিবিউট আছে। ওয়েব পেজে ইমেজ প্রদর্শন করার জন্য আপনাকে src এট্রিবিউট ব্যবহার করতে হবে। src হল ‘source’ এর সংক্ষিপ্ত রূপ। src এট্রিবিউটের মান হল যে ইমেজ টি আপনি প্রদর্শন করতে চাচ্ছেন তার url বা ঠিকানা অর্থাৎ ইমেজ টি কোথায় সংরক্ষিত আছে তার ঠিকানা। নিছে এর সিনট্যাক্স দেখুন।

সিনট্যাক্স

<img src="image_name.formate"/>
 

নিচে ওয়েব পেজে একটি ছবি প্রদর্শনের কোড গুলো অর্থাৎ একটি উদাহরণ দেখুন।

উদাহরণ


<body>
  <img src="flower.jpg"/>
</body>

কোড এডিটর


নোট - যদি আপনি একটি ইমেজ কে ২টি প্যারাগ্রাফ এর মাঝে রাখেন তবে ব্রাউজার আগে ১ম প্যারাগ্রাফ পরে ইমেজটি ও তারপর ২য় প্যারাগ্রাফটি প্রদর্শন করবে।


ছবি বা image ফরম্যাট

ওয়েব পেজ বা এইচটিএমএল ডকুমেন্টে ব্যবহার করার মত সর্বজন বিদিত এবং সর্বত্তম ফরম্যাট গুলো হল - JPG, PNG এবং GIF, নিছে এগুলোর ব্যবহার ক্ষেত্র উল্লেখ করা হল।


alt এট্রিবিউট

কোন কারনে ব্রাউজার যদি ইমেজ প্রদর্শনে ব্যার্থ হয় বা ইউজার ইমেজ বন্ধ করে রাখে বা ধীরে ধীরে পেজ লোড হবার কারনে যদি ইমেজ লোড না হয় তবে ইমেজ এর স্থানে একটি বক্স বা আইকন দেখা যায় এবং এর সাথে সেই ছবি সম্পর্কিত কোন তথ্য বা উপাত্ত দেখা যায়। alt এট্রিবিউট ব্যবহার করে এই কাজটি করা যায়।

উদাহরণ


<body>
  <img src="flower.jpg" alt="This is a flower."/> 
</body>

কোড এডিটর


নোট - ওয়েব পেজে বাবহ্রিত ছবির সাথে অর্থাৎ <img> ট্যাগে alt এট্রিবিউট ব্যবহার না করা হলে, ওয়েব পেজটি validation করা যায় না।

নোট - যদি আপনি একটি ইমেজ কে ২টি প্যারাগ্রাফ এর মাঝে রাখেন তবে ব্রাউজার প্রথমে ১ম প্যারাগ্রাফ পরে ইমেজটি ও তারপর ২য় প্যারাগ্রাফটি প্রদর্শন করবে।


style এট্রিবিউট

কোন ছবি বা image এর দৈর্ঘ্য বা height এবং প্রস্থ বা width নির্ধারণ করার জন্য img ট্যাগের সাথে style এট্রিবিউট এবং এতে height ও width প্রপার্টি ব্যবহার করা হয়। নিচে এর উদাহরণ দেখুন।

উদাহরণ


<img src="demo.jpg" alt="demo image" style="width:400px;height:250px;" />

কোড এডিটর


এর দৈর্ঘ্য অর্থাৎ height এবং প্রস্থ অর্থাৎ width এর মান বা value স্বয়ংক্রিয় বা defoult ভাবেই pixel এ নির্ধারিত হয়। তবে আপনি এই মান শতকরা (%), em ইত্যাদি একক ব্যবহার করেও করতে পারেন।


height এবং weight এট্রিবিউট

কোন ছবি বা image এর দৈর্ঘ্য বা height এবং প্রস্থ বা width নির্ধারণ করার জন্য img ট্যাগের সাথে height এবং width এট্রিবিউট ব্যবহার করা যায়। নিচে এর উদাহরণ দেখুন।

উদাহরণ


<img src="demo.jpg" alt="demo image" width="400" height="250" />

কোড এডিটর


এর দৈর্ঘ্য অর্থাৎ height এবং প্রস্থ অর্থাৎ width এর মান বা value স্বয়ংক্রিয় বা defoult ভাবেই pixel এ নির্ধারিত হয়। তবে আপনি এই মান শতকরা (%), em ইত্যাদি একক ব্যবহার করেও করতে পারেন।

height এবং width এট্রিবিউট ব্যবহার করে image এর height এবং width পূর্ব থেকেই নির্ধারণ করে দেয়ার একটি ভাল দিক হল এতে করে ব্রাউজার আগে থেকেই image এর আকার জানতে পারে এবং পেজ লোড হওয়ার সময় ওয়েব পেজের লেআউট এ এর কোন প্রভাব পরে না।


width এবং height অথবা style এট্রিবিউট

ছবির প্রস্থ এবং উচ্চতা নির্ধারণ করার জন্য width, height অথবা style, এই তিনটি এট্রিবিউটই এইচটিএমএল এ অনুমোদিত।

কিন্তু width, height ব্যবহার না করে style এট্রিবিউট ব্যবহারে বাড়তি সুবিধা পাওয়া যায়। তা হল style এট্রিবিউট ব্যবহার করা হলে, আভ্যন্তরীণ স্টাইল বা বহিঃস্থ স্টাইল ছবির আকার পরিবর্তন করতে পারবে না।

উদাহরণ


<!DOCTYPE html>
  <html>
  <head>
  <style>
  img{
  width:100%;
  }
  </style>
  </head>
  <body>

  <img src="flower.jpg" alt="Flower image" width="100%" height="100%">
  <img src="bird.png" alt="Bird image" style="width:500px;height:400px;">
  
  </body>
  </html>

কোড এডিটর



অন্য ফোল্ডারের ছবি

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

উদাহরণ


<img src="/image/Flower.jpg" alt="Flower image" style="width:500px;height:400px;">

কোড এডিটর



অন্য সার্ভারের ছবি ব্যবহার

কিছু কিছু ওয়েবসাইট আছে, যারা তাদের ছবিগুলো কিছু ইমেজ সার্ভারে রাখে এবং তাদের ওয়েবসাইটে সেই ছবি গুলো লিংক করে ব্যবহার করে। নিছে একটি উদাহরণ দেখুন।

উদাহরণ


<img src="https://www.websschool.com/images/image_example.jpg" alt="websSchools.com">

কোড এডিটর


এ সম্পর্কে আরও বিস্তারিত জানতে আমাদের এইচটিএমএল ফাইল পাথ পেজটি ব্রাউজ করুন।


এনিমেটেড ছবি

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

HTML example

উদাহরণ


<img src="animated-image.gif" alt="Its a animated image" style="width:200px;height:200px;">

কোড এডিটর



ফ্লোটিং

সিএসএস float প্রোপার্টিটি ব্যবহার কোন ছবিকে লেখার ডান অথবা বাম পাশে প্রদর্শনের করা যায়। নিচে এর উদাহরণ দেখুন।

উদাহরণ


<p><img src="Flower.png" alt="Flower image" style="float:right;width:70px;height:70px;">
The flower image will float to the right of the text.</p>

<p><img src="bird.png" alt="Bird flower" style="float:left;width:70px;height:70px;">
The bird image will float to the left of the text.</p>

কোড এডিটর


নোট - সিএসএস float প্রোপার্টি সম্পর্কে আরও জানতে আমাদের সিএসএস ফ্লোটিং টিউটোরিয়ালটি দেখুন।


background-image প্রপার্টি

কোন এইচটিএমএল এলিমেন্টের ব্যাকগ্রাউন্ড এ কোন ছবি যুক্ত করতে চাইলে সিএসএস background-image প্রপার্টি ব্যবহার করুন। নিচে এর একটি উদাহর দেখুন।

উদাহরণ


<body style="background-image:url('sky.jpg')">
  <h2>Background Image</h2>
</body>

কোড এডিটর


কোন প্যারাগ্রাফ এলিমেন্টের ব্যাকগ্রাউন্ডে কোন ছবি যুক্ত করতে হলে, p এলিমেন্টে background-image প্রপার্টি ব্যবহার করুন।

উদাহরণ


<body> 
<p style="background-image:url('clouds.jpg')"> ... </p> </body>

কোড এডিটর


নোট - ব্যাকগ্রাউন্ডে ছবির ব্যবহার সম্পর্কে আরও জানতে আমাদের সিএসএস background প্রপার্টি পেজটি ব্রাউজ করুন।


<picture> এলিমেন্ট

এইচটিএমএল ৫ ই প্রথম <picture> এলিমেন্টের পরিচয় করিয়েছে। এর ফলে কোন ছবির সোর্স আরও ভালভাবে নির্ধারণ করা সম্ভব হয়েছে। <picture> এলিমেন্ট আসলে কতগুলো <source> এলিমেন্ট ধারন করে, যার প্রত্যেকটি ভিন্ন ভিন ছবির লিংক ধারন করে। এই পদ্ধতিতে ব্রাউযার ছবিগুলো থেকে আমন একটি ছবি বেছে নিতে পারে জেটা ব্রাউজার স্ক্রীনের সাথে সর্বোত্তম মানানসই হয়।

প্রত্যেক <source> এলিমেন্টে এট্রিবিউট আছে যেগুলো কোন আকারের ব্রাউজার স্ক্রীনে প্রদর্শিত হবে টা নির্ধারণ করতে নির্দেশ করে।

ব্রাউজার প্রথম <source> এলিমেন্টের এট্রিবিউট মেলাতে চেষ্টা করে এবং না হলে পরের <source> এলিমেন্টে যায়।

উদাহরণ


<picture>
<source media="(min-width: 650px)" srcset="flower_one.jpg">
<source media="(min-width: 465px)" srcset="flower_two.jpg">
<img src="flower_three.jpg" alt="Flowers" style="width:auto;">
</picture>

কোড এডিটর


নোট - সব সময় <picture> এলিমেন্টের শেষ child এলিমেন্ট হিসেবে একটি <img> এলিমেন্টকে নির্ধারণ করুন। যে সকল ব্রাউজারে <picture> এলিমেন্ট সমর্থন করে না সেগুলোতে <img> এলিমেন্টটি কাজ করবে অথবা যদি কোন <source> এলিমেন্টই না মেলে তবে <img> এলিমেন্টের ছবিটি প্রদর্শিত হবে।


সকল ইমেজ ট্যাগ

ট্যাগ বর্ণনা
<img> কোন ছবি প্রদর্শন করার জন্য ব্যবহার করা হয়
<map> কোন ইমেজ-ম্যাপ তৈরি করার জন্য ব্যবহার করা হয়
<area> ছবিতে ম্যাপের clickable area নির্ধারণ করার জন্য ব্যবহার করা হয়
<picture> একাধিক ছবি বা image এর রিসোর্সের জন্য একটি কন্টেইনার নির্ধারণ করে।