HTML <img> टैग

  • पिछला पृष्ठ <iframe>
  • अगला पृष्ठ <input>

परिभाषा और उपयोग

<img> टैग का उपयोग HTML पृष्ठ में छवि को एम्बे करने के लिए किया जाता है。

तकनीकी रूप से, वास्तव में छवि को वेब पृष्ठ में जोड़ा नहीं है, बल्कि वेब पृष्ठ में छवि को लिंक किया गया है。<img> टैग एक कंटेनर बनाता है, जो छवि को संदर्भित करता है。

<img> टैग के दो अनिवार्य गुण हैं:

  • src - छवि के पथ को निर्धारित करें
  • alt - यदि किसी कारण से छवि दिखाना नहीं होता है, तो छवि के उपचारक टेक्स्ट को निर्धारित करें

ध्यान:इसके अलावा, हमेशा छवि का चौड़ाई और ऊंचाई निर्धारित करें। यदि चौड़ाई और ऊंचाई निर्धारित नहीं होती है, तो छवि को लोड करते समय पृष्ठ चमक सकता है。

सूचना:एक अन्य दस्तावेज़ के लिए छवि को लिंक करने के लिए केवल <img> टैग निर्धारित करे <a> टैग के अंदर (नीचे के उदाहरण को देखें)。

अन्य संदर्भ:

HTML शिक्षण:HTML इमेज

HTML DOM संदर्भ निर्देशिका:Image ऑब्जेक्ट

CSS शिक्षण:छवि के शैली सेट करना

विस्तृत पढ़ना:छवि का सही उपयोग करना

उदाहरण

उदाहरण 1

नीचे दिए गए उदाहरण में, हमने CodeW3C.com के इंजीनियरों द्वारा शांघाई फूल गांव में शिल्प की तुलिप की छवि को पृष्ठ में जोड़ा है:

<img src="tulip.jpg" alt="शांघाई फूल गांव - ट्यूलिप" />

अपने आप सामने देखें

शांहाई फ्लोअर पोर्ट - ट्यूबरल

उदाहरण 2

छवि को जोड़ने के एक अन्य उदाहरण:

<img src="dancer.png" alt="नृत्यक" width="500" height="749">

अपने आप सामने देखें

सूचना:पृष्ठ के नीचे अधिक उदाहरण प्रदान करें。

गुण

गुण मूल्य वर्णन
alt टेक्स्ट छवि के उपचारक टेक्स्ट को निर्धारित करें。
crossorigin
  • anonymous
  • use-credentials
 अनुमति देने वाले दूसरे साइटों के छवि को कैनवस (canvas) के साथ उपयोग करने की अनुमति दें。
height पिक्सेल छवि की ऊंचाई को निर्धारित करें。
ismap ismap छवि को सर्वर पक्षीय छवि मैप के रूप में परिभाषित करें。
loading
  • eager
  • lazy
 ब्राउज़र को तुरंत छवि को लोड करने या कुछ शर्तों को पूरा करने तक छवि को लोड करने के लिए निर्देशित करें。
longdesc URL छवि के विस्तृत वर्णन के लिए इंगित करने वाले URL को निर्धारित करें。
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 छवि प्राप्त करते समय उपयोग करने वाले संदर्भ सूचना को निर्धारित करें。
sizes आकार विभिन्न पृष्ठ रचना के लिए छवि आकार को निर्धारित करें。
src URL छवि के पथ को निर्धारित करें。
srcset URL-list विभिन्न परिस्थितियों में उपयोग किए जाने वाले छवि फ़ाइलों की सूची निर्धारित करें
usemap #mapname छवि को क्लायंट साइड इमेज मैप के रूप में परिभाषित करें
width पिक्सेल छवि की चौड़ाई निर्धारित करें

वैश्विक प्रकृति

<img> टैग इसके साथ इवेंट प्रकृति का समर्थन करता है HTML में वैश्विक प्रकृति。

इवेंट प्रकृति

<img> टैग इसके साथ इवेंट प्रकृति का समर्थन करता है HTML में इवेंट प्रकृति。

और भी कई उदाहरण

उदाहरण 3

छवि को जस्ता करें (CSS का उपयोग करके):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

अपने आप सामने देखें

उदाहरण 4

छवि के किनारा जोड़ें (CSS का उपयोग करके):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

अपने आप सामने देखें

उदाहरण 5

छवि के बाईं और दाईं ओर किनारा जोड़ें (CSS का उपयोग करके):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

अपने आप सामने देखें

उदाहरण 6

छवि के ऊपर और नीचे बाहरी किनारा जोड़ें (CSS का उपयोग करके):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

अपने आप सामने देखें

उदाहरण 7

किसी अन्य फ़ोल्डर या अन्य वेबसाइट से छवि जोड़ने के लिए कैसे जाना है:

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

अपने आप सामने देखें

उदाहरण 8

कैसे छवि को सुधार कीजिए:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

अपने आप सामने देखें

उदाहरण 9

कैसे एक छवि में क्लिक करने योग्य क्षेत्र होने वाले इमेज़ मैप बनाया जाता है। हर क्षेत्र एक सुधार कीजिए:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

अपने आप सामने देखें

अधिक पढ़ने - कैसे सही तरीके से छवि का उपयोग करना

HTML और XHTML की सबसे अधिक आकर्षक विशेषताओं में से एक, दस्तावेज़ के पाठ में छवि शामिल करने की क्षमता है, यह छवि दस्तावेज़ के आंतरिक वस्तु (इनलाइन छवि) के रूप में भी हो सकती है, या इसे एक अलग दस्तावेज़ के रूप में डाउनलोड करने वाले सिंगल दस्तावेज़ के रूप में या फिर दस्तावेज़ के पृष्ठभूमि के रूप में कर सकती है。

सामग्री में छवियों को (स्थिर या एनिमेटेड आइकन, फोटो, व्याख्यान, चित्रकारी आदि) उचित रूप से जोड़ने से, दस्तावेज़ अधिक जीवंत और आकर्षक हो जाता है, और देखने में अधिक विशेषज्ञ और अधिक सूचनापूर्ण होता है, और उसे अधिक सहज बनाता है। एक छवि को सीधे अनुवांश के रूप में भी बनाया जा सकता है。

तथापि, छवियों का अत्यधिक उपयोग करने पर, दस्तावेज़ अलग-अलग हो जाता है, असंगत, अधिकतर पढ़ने में असमर्थ, और उपयोगकर्ता को इस पृष्ठ को डाउनलोड करने और देखने के लिए अनावश्यक अधिक वार्ता समय आता है。

नीचे दिए गए लेख को पढ़ें, वेब पर दो प्रमुख छवि फॉर्मेटों - GIF और JPEG को सीखें, और छवियों को कैसे सही तरीके से उपयोग करें:

डिफ़ॉल्ट CSS सेटिंग

अधिकांश ब्राउज़र निम्नलिखित डिफ़ॉल्ट मान के साथ प्रदर्शित करेंगे <img> एलीमेंट:

img {
  display: inline-block;
}

अपने आप सामने देखें

ब्राउज़र समर्थन

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
समर्थन समर्थन समर्थन समर्थन समर्थन
  • पिछला पृष्ठ <iframe>
  • अगला पृष्ठ <input>