<img> टैग वेबपेज में Image(चित्र) डालने के लिए इस्तेमाल होता है, वेबपेज में उपयोगी इमेज डालसे से वेबपेज की गुणवत्ता बढ़ती है और यूजर को चित्रों से सही से समझ आता है।
इसके src ऐट्रब्यूट में इमेज का source(url) डालना जरूरी है।
HTML में इमेज कैसे लगाए?
अगर वेबपेज में कोई भी अच्छी इमेज सही जगह पर लगाई जाए तो वो यूजर को वेबपेज का कंटेन्ट समझने में आसानी करता है, जिससे यूजर का वक्त बचता है और वेबपेज का क्षार मिल जाता है।
<img> टैग को इस्तेमाल करने के सामान्य 2 तरीके है,
- इमेज दिखा सकते है
- <a> टैग में इमेज इस्तेमाल करके क्लिक करने लायक बना सकते है
उदाहरण:
<a href="https://w3hindi.in/">
<img
src="http://w3hindi.in/wp-content/uploads/2022/12/W3-Hindi-logo.png"
alt="W3 Hindi Logo"
width="270px"
height="90px"
/>
</a><img> टैग के महत्वपूर्ण Attributes
| Attribute | Explanation |
|---|---|
| src | इस ऐट्रब्यूट में इमेज की लिंक(source) होता है, इमेज टैग को ठीक से काम करने के लिए इसकी वैल्यू इमेज फॉर्मैट जैसे की, .jpg, .png, आदि में होगी चाहिए। |
| alt | जब कोई इमेज किसी भी वजह से लोड नहीं हो पाती, तब alt attribute में रखी इमेज के विवरण की वैल्यू यूजर को दिखती है, जिससे यूजर को पता चले की जो इमेज लोड नहीं हुई उसमे क्या था। ये ऐट्रब्यूट इसलिए भी जरूरी के जब कोई बोट या AI मशीन आपके पेज को पढ़ती है, तो वो इमेज नहीं देखती इस ऐट्रब्यूट में रखे टेक्स्ट को पढ़ कर बताती है की यहा एसी कोई इमेज है। |
| Sizing | height ऐट्रब्यूट की वैल्यू से इमेज की ऊंचाई और width ऐट्रब्यूट से इमेज की चोंधई तय होती है। किसी भी इमेज की हाइट और विड्थ देना इसलिए भी जरूरी है के जब इमेज को लोड होने में वक्त लगे तो वो अपनी जगह पहले से ही रोक ले, जिससे इमेज लोड होने के बाद पेज साइज़ चेंज ना होने से, यूजर का ध्यान विचलित ना हो। |
| usemap | इस ऐट्रब्यूट से हम इमेज के किसी भी भाग में लिंक डाल सकते है, जिससे उस भाग को क्लिक करने से यूजर को लिंक के पेज पर भेज सकते है। इसका इस्तेमाल करने के लिए आपको इसके सहायी टैग्स जैसे की map और area टैग्स का भी इस्तेमाल करना पड़ता है। HTML5 में ये ऐट्रब्यूट support नहीं करता, लेकिन आप जावास्क्रिप्ट से इस प्रकार का काम कर सकते है। |
| ismap | ये टैग usemap की तरह ही काम करता है, लेकिन इसका मैपिंग सर्वर की साइड होता है, जिससे इसके किसी भी भाग को क्लिक करने से उसके बारे में जानकारी सर्वर को भेजी जाती है, फिर सर्वर में रही स्क्रिप्ट आगे का काम करती है |
| crossorigin | HTML में किसी दूसरे डोमेन की लिंक देने से क्रॉस ऑरिजिन की एरर आती है, यानि आप xyz.com के किसी कंटेन्ट में आप abc.com की सामग्री को इस्तेमाल नहीं कर सकते। ईस प्रॉब्लेम से बचने और कंट्रोल करने के लिए आप crossorigin ऐट्रब्यूट का इस्तेमाल कर सकते है, ये ऐट्रब्यूट <img /> टैग के साथ साथ <script /> और <link /> टैग में भी इस्तेमाल आता है। |
| referrerpolicy | इस ऐट्रब्यूट की मदद से हम <img /> टैग में इस्तेमाल होने वाले src ऐट्रब्यूट के सर्वर पर अतिरिक्त जानकारी भेज सकते है। |
| loading | इस ऐट्रब्यूट का इस्तेमाल करके हम वेब ब्राउजर को बता सकते है की इमेज किस तरह लोड होगी, जिसमे lazy, eager और auto प्रकार मौजूद है। |
Image टैग ग्लोबल Attribute और ईवेंट Attribute दोनों सपोर्ट करता है।
और ज्यादा एचटीएमएल(HTML) टैग्स के बारे में जानने के लिए नीचे दिया गया ब्लॉग जरूर पढ़े,
