HTML => इमेजिस

वाक्य - विन्यास

<img src="" alt="">

पैरामीटर

पैरामीटर	विवरण
`src`	छवि का URL निर्दिष्ट करता है
`srcset`	विभिन्न स्थितियों में उपयोग करने के लिए चित्र (जैसे, उच्च-रिज़ॉल्यूशन डिस्प्ले, छोटे मॉनिटर आदि)
`sizes`	विराम बिंदुओं के बीच की छवि का आकार
`crossorigin`	तत्व क्रॉसोरिगिन अनुरोधों को कैसे संभालता है
`usemap`	उपयोग करने के लिए छवि मानचित्र का नाम
`ismap`	चाहे इमेज सर्वर-साइड इमेज मैप हो
`alt`	यदि किसी कारण से छवि प्रदर्शित नहीं की जा सकती है तो वैकल्पिक पाठ प्रदर्शित किया जाना चाहिए
`width`	छवि की चौड़ाई निर्दिष्ट करता है (वैकल्पिक)
`height`	छवि की ऊंचाई निर्दिष्ट करता है (वैकल्पिक)

एक छवि बनाना

किसी पृष्ठ पर एक छवि जोड़ने के लिए, छवि टैग का उपयोग करें।

इमेज टैग ( img ) में क्लोजिंग टैग नहीं हैं। जो दो मुख्य विशेषताएँ आप img टैग को देते हैं वे हैं src , इमेज सोर्स और alt , जो कि इमेज का वर्णन करने वाला वैकल्पिक टेक्स्ट है।

<img src="images/hello.png" alt="Hello World">

आप वेब URL से चित्र भी प्राप्त कर सकते हैं:

<img src="https://i.stack.imgur.com/ALgZi.jpg?s=48&g=1" alt="StackOverflow user Caleb Kleveter">

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

बेस 64 का उपयोग करके सीधे पेज के अंदर छवियों को एम्बेड करना भी संभव है:

<img src="data:image/png;base64,iVBOR..." alt="Hello World">

युक्ति: किसी अन्य दस्तावेज़ में एक छवि लिंक करने के लिए, बस <img> टैग के अंदर <a> टैग डालें।

छवि की चौड़ाई और ऊँचाई

नोट: चौड़ाई और ऊंचाई की विशेषताओं को चित्रों पर नहीं चित्रित किया गया है और कभी नहीं किया गया है। उनके उपयोग को हालांकि अधिक कठोर बनाया गया है।

छवि टैग की width और height विशेषताओं का उपयोग करके एक छवि के आयाम निर्दिष्ट किए जा सकते हैं:

<img src="images/200x200-img.png" width="200" height="200" alt="A 200x200 image">

किसी छवि की width और height को निर्दिष्ट करके, आपकी संरचना ब्राउज़र को संकेत देती है कि पृष्ठ को कैसे रखा जाना चाहिए, भले ही आप वास्तविक छवि आकार को निर्दिष्ट कर रहे हों। यदि छवि आयाम निर्दिष्ट नहीं किए जाते हैं, तो छवि लोड होने के बाद ब्राउज़र को पृष्ठ के लेआउट को पुनर्गणना करने की आवश्यकता होगी, जिससे लोड होने के दौरान पृष्ठ "चारों ओर कूद" हो सकता है।

4.1

आप सीएसएस पिक्सल की संख्या या छवि के वास्तविक आयामों के प्रतिशत में छवि को एक चौड़ाई और ऊंचाई दे सकते हैं।

ये उदाहरण सभी मान्य हैं:

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">

छवि की चौड़ाई और ऊंचाई सीएसएस पिक्सल में निर्दिष्ट की जानी चाहिए; प्रतिशत मान अब मान्य मान नहीं है। साथ ही, यदि दोनों विशेषताएँ निर्दिष्ट हैं, तो उन्हें तीन सूत्रों में से एक में फिट होना चाहिए जो पहलू अनुपात बनाए रखते हैं। हालांकि मान्य है, आपको किसी छवि को बड़े आकार में खींचने के लिए चौड़ाई और ऊँचाई विशेषताओं का उपयोग नहीं करना चाहिए।

ये उदाहरण मान्य हैं:

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="0" height="0" alt="A hidden tracking image">

यह उदाहरण अनुशंसित नहीं है:

<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">

ये उदाहरण अमान्य हैं:

<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
<img src="images/200x200-img.png" width="1" height="200" alt="A 1x200 image">

ऑल्ट टेक्स्ट चुनना

ऑल्ट-टेक्स्ट का उपयोग स्क्रीन रीडर नेत्रहीन उपयोगकर्ताओं और खोज इंजन द्वारा किया जाता है। इसलिए आपकी छवियों के लिए अच्छा ऑल्ट-टेक्स्ट लिखना महत्वपूर्ण है।

यदि आप छवि को उसकी उच्चतम विशेषता के साथ बदलते हैं, तो भी पाठ सही दिखना चाहिए। उदाहरण के लिए:

<!-- Incorrect -->
<img src="anonymous.png" alt="Anonymous user avatar"/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit icon"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete icon"/></a>

छवियों के बिना, यह ऐसा दिखेगा:

अनाम उपयोगकर्ता अवतार एक अनाम उपयोगकर्ता ने लिखा है:
लोरम ipsum dolor sed।
आइकन संपादित करें / आइकन हटाएं

इसे ठीक करने के लिए:

अवतार के लिए ऑल्ट-टेक्स्ट को हटा दें। यह छवि दृष्टिगोचर उपयोगकर्ताओं (यह दिखाने के लिए एक आसानी से पहचाना जाने वाला आइकन है कि उपयोगकर्ता अनाम है) के लिए जानकारी जोड़ता है लेकिन यह जानकारी पाठ में पहले से ही उपलब्ध है। ¹
आइकन के लिए ऑल्ट-टेक्स्ट से "आइकन" निकालें। यह जानते हुए कि यह एक आइकन होगा यदि यह वहां होता है तो इसका वास्तविक उद्देश्य बताने में मदद नहीं करता है।

<!-- Correct -->
<img src="anonymous.png" alt=""/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete"/></a>

एक अनाम उपयोगकर्ता ने लिखा है:
लोरम ipsum dolor sed।
संपादित करें / हटाएं

फुटनोट

¹ एक खाली alt विशेषता को शामिल करने और इसे पूरी तरह से छोड़कर के बीच एक शब्दार्थ अंतर है। एक खाली ऑल्ट विशेषता यह दर्शाती है कि छवि सामग्री का एक महत्वपूर्ण हिस्सा नहीं है (जैसा कि इस मामले में सच है - यह सिर्फ एक additive छवि है जो बाकी को समझने के लिए आवश्यक नहीं है) और इस प्रकार रेंडरिंग से छोड़ा जा सकता है। हालाँकि, ऑल्ट एट्टीट्यूशन की कमी यह दर्शाती है कि इमेज कंटेंट का एक महत्वपूर्ण हिस्सा है और यह कि रेंडरिंग के लिए बस कोई टेक्स्ट के बराबर उपलब्ध नहीं है।

उत्तरदायी छवि srcset विशेषता का उपयोग कर

आकार के साथ srcset का उपयोग करना

<img sizes="(min-width: 1200px) 580px,
      (min-width: 640px) 48vw,
      98vw"
    srcset="img/hello-300.jpg 300w,
      img/hello-600.jpg 600w,
      img/hello-900.jpg 900w,
      img/hello-1200.jpg 1200w"
    src="img/hello-900.jpg" alt="hello">

sizes मीडिया के प्रश्नों की तरह हैं, यह वर्णन करते हुए कि छवि व्यूपोर्ट की कितनी जगह लेती है।

अगर व्यूपोर्ट 1200px से बड़ा है, तो छवि बिल्कुल 580px है (उदाहरण के लिए हमारी सामग्री कंटेनर में केंद्रित है जो अधिकतम 1200px चौड़ी है। छवि इसमें से आधे से कम मार्जिन लेती है)।
अगर viewport 640px और 1200px के बीच है, तो छवि 48% व्यूपोर्ट लेती है (उदाहरण के लिए हमारे पेज के साथ छवि तराजू और व्यूपोर्ट चौड़ाई का आधा हिस्सा मार्जिन लेता है)।
अगर व्यूपोर्ट किसी अन्य आकार का है, तो हमारे मामले में 640px से कम की छवि, व्यूपोर्ट का 98% हिस्सा लेती है (उदाहरण के लिए हमारे पेज के साथ छवि तराजू और व्यूपोर्ट माइनस मार्जिन की पूरी चौड़ाई लेता है)। मीडिया आइटम को अंतिम आइटम के लिए छोड़ा जाना चाहिए।

srcset केवल ब्राउज़र को बता रहा है कि हमारे पास क्या छवियां उपलब्ध हैं, और उनके आकार क्या हैं।

img/hello-300.jpg 300px चौड़ा है,
img/hello-600.jpg 600px चौड़ा है,
img/hello-900.jpg 900px चौड़ा है,
img/hello-1200.jpg 1200px चौड़ा है

src हमेशा अनिवार्य छवि स्रोत है। srcset साथ उपयोग करने के मामले में, src srcset छवि परोस देगा, srcset समर्थन नहीं कर रहा है।

आकार के बिना srcset का उपयोग करना

<img src="img/hello-300.jpg" alt="hello"
     srcset="img/hello-300.jpg 1x, 
       img/hello-600.jpg 2x,
       img/hello-1200.jpg 3x">

srcset डिवाइस-पिक्सेल अनुपात x डिस्क्रिप्टर के साथ उपलब्ध छवियों की सूची प्रदान करता है।

यदि डिवाइस-पिक्सेल अनुपात 1 है, तो img/hello-300.jpg उपयोग करें
यदि डिवाइस-पिक्सेल अनुपात 2 है, तो img/hello-600.jpg उपयोग करें
यदि डिवाइस-पिक्सेल अनुपात 3 है, तो img/hello-1200.jpg उपयोग करें

चित्र तत्व का उपयोग करके उत्तरदायी छवि

कोड

<picture>
  <source media="(min-width: 600px)" srcset="large_image.jpg">
  <source media="(min-width: 450px)" srcset="small_image.jpg">
  <img src="default_image.jpg" style="width:auto;">
</picture>

प्रयोग

अलग-अलग स्क्रीन चौड़ाई के तहत अलग-अलग छवियों को प्रदर्शित करने के लिए, आपको चित्र के टैग में स्रोत टैग का उपयोग करके सभी छवियों को शामिल करना चाहिए जैसा कि ऊपर दिए गए उदाहरण में दिखाया गया है।

परिणाम

स्क्रीन की चौड़ाई> 600px स्क्रीन पर, यह big_image.jpg दिखाता है
स्क्रीन की चौड़ाई> 450px स्क्रीन पर, यह small_image.jpg दिखाता है
अन्य स्क्रीन चौड़ाई वाली स्क्रीन पर, यह default_image.jpg दिखाता है

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

HTML
इमेजिस

खोज…