एचटीएमएल IMG टैग एक वेब पेज के भीतर चित्रों और अन्य स्थिर ग्राफिकल वस्तुओं के सम्मिलन को नियंत्रित करता है। यह सामान्य टैग कई अनिवार्य और वैकल्पिक विशेषताओं का समर्थन करता है जो एक आकर्षक, छवि-केंद्रित वेबसाइट डिजाइन करने की आपकी क्षमता में समृद्धि जोड़ती हैं।
पूरी तरह से गठित HTML IMG टैग का एक उदाहरण इस तरह दिखता है:
आवश्यक IMG टैग विशेषताएँ
src="/path/to/image.jpg"
एक वेब पेज पर प्रदर्शित करने के लिए एक छवि प्राप्त करने के लिए आपको केवल एक विशेषता की आवश्यकता होती है एसआरसी विशेषता। यह विशेषता प्रदर्शित होने वाली छवि फ़ाइल के नाम और स्थान की पहचान करती है।
alt = "छवि का विवरण"
मान्य XHTML और HTML4 लिखने के लिए, Alt विशेषता भी आवश्यक है। इस विशेषता का उपयोग गैर-दृश्य ब्राउज़र को छवि का वर्णन करने वाले पाठ के साथ प्रदान करने के लिए किया जाता है। ब्राउज़र वैकल्पिक पाठ को विभिन्न तरीकों से प्रदर्शित करते हैं। जब आप छवि पर अपना माउस रखते हैं तो कुछ इसे पॉप-अप के रूप में प्रदर्शित करते हैं, अन्य इसे गुणों में प्रदर्शित करते हैं जब आप छवि पर राइट-क्लिक करते हैं, और कुछ इसे बिल्कुल प्रदर्शित नहीं करते हैं।
उपयोग वैकल्पिक शब्द छवि के बारे में अतिरिक्त विवरण देने के लिए जो वेब पेज के टेक्स्ट के लिए प्रासंगिक या महत्वपूर्ण नहीं हैं। लेकिन, याद रखें कि स्क्रीन रीडर्स और अन्य टेक्स्ट-ओनली ब्राउजर में, टेक्स्ट को पेज के बाकी टेक्स्ट के साथ इनलाइन पढ़ा जाएगा। भ्रम से बचने के लिए, केवल "लोगो" के बजाय वर्णनात्मक वैकल्पिक टेक्स्ट का उपयोग करें (उदाहरण के लिए), "वेब डिज़ाइन और HTML के बारे में"।
Alt टेक्स्ट SEO (Search Engine Optimization) के लिए भी जरूरी है। खोज इंजन, जैसे Google, साइटों पर सामग्री का पता लगाने के लिए उपयोग किए जाने वाले बॉट छवियों को "देख" नहीं सकते हैं। वे इस पर भरोसा करते हैं Alt पाठ यह निर्धारित करने के लिए कि पृष्ठ पर क्या है।
में एचटीएमएल 5, द Alt विशेषता की हमेशा आवश्यकता नहीं होती है, क्योंकि आप a. का उपयोग कर सकते हैं शीर्षक इसमें और विवरण जोड़ने के लिए। आप इस विशेषता का उपयोग उस आईडी को इंगित करने के लिए भी कर सकते हैं जिसमें पूर्ण विवरण हो:
aria-decribedby="छवि का विवरण"
यदि छवि विशुद्ध रूप से सजावटी है, जैसे कि वेब पेज या आइकन के शीर्ष पर ग्राफ़िक, तो ऑल्ट टेक्स्ट की भी आवश्यकता नहीं है। लेकिन अगर आप निश्चित नहीं हैं, तो वैकल्पिक टेक्स्ट शामिल करें।
आकार देने के गुण
चौड़ाई = "500"तथा।
ऊंचाई = "500"अपने डिजाइन के आधार पर, का उपयोग कर। ऊंचाई तथा। चौड़ाई
आम तौर पर, आप चाहते हैं कि छवि का आकार आपके सीएसएस में सेट हो। अधिकतर, यह छवि के मूल कंटेनर के आयामों का परिणाम होगा। विभिन्न स्क्रीन आकारों के अनुकूल होने पर यह दृष्टिकोण सबसे अधिक लचीलेपन की अनुमति देता है। हालाँकि, अभी भी ऐसे मामले हैं जहाँ आप छवि आयामों को HTML विशेषताओं के रूप में निर्दिष्ट करना चाह सकते हैं।
अन्य उपयोगी आईएमजी गुण
शीर्षक = "वर्णनात्मक छवि का नाम"विशेषता एक वैश्विक विशेषता है जिसे किसी पर भी लागू किया जा सकता है। एचटीएमएल तत्व. इसके अलावा,. शीर्षक
अधिकांश ब्राउज़र इसका समर्थन करते हैं शीर्षक विशेषता, लेकिन वे इसे अलग-अलग तरीकों से करते हैं। कुछ टेक्स्ट को पॉप-अप के रूप में प्रदर्शित करते हैं जबकि अन्य इसे सूचना स्क्रीन में प्रदर्शित करते हैं जब उपयोगकर्ता छवि पर राइट-क्लिक करता है। आप का उपयोग कर सकते हैं शीर्षक छवि के बारे में अतिरिक्त जानकारी लिखने के लिए विशेषता, लेकिन इस जानकारी को या तो छुपाए जाने पर भरोसा न करें या दृश्यमान। आपको निश्चित रूप से इसका उपयोग सर्च इंजन के लिए कीवर्ड छिपाने के लिए नहीं करना चाहिए। इस अभ्यास को अब अधिकांश खोज इंजनों द्वारा दंडित किया जाता है।
उपयोगमैप = ""तथा।
इसमैप = ""ये दो विशेषताएँ क्लाइंट-साइड () और सर्वर-साइड (ISMAP) सेट करती हैं छवि मानचित्र
longdesc="आपकी छवि का अधिक विस्तृत विवरण"द. लॉन्गडेस्क
बहिष्कृत और अप्रचलित IMG विशेषताएँ
कई विशेषताएँ अब HTML5 में अप्रचलित हैं या HTML4 में बहिष्कृत हैं। सर्वोत्तम HTML के लिए, आपको इन विशेषताओं का उपयोग करने के बजाय अन्य समाधान खोजने चाहिए।
सीमा = "3"
संरेखित करें = "बाएं"यह विशेषता आपको पाठ के अंदर एक छवि रखने और उसके चारों ओर पाठ प्रवाहित करने की अनुमति देती है। आप किसी छवि को दाईं या बाईं ओर संरेखित कर सकते हैं। के पक्ष में बहिष्कृत किया गया है। फ्लोट सीएसएस संपत्ति
एचएसपीसीएएस = "10"तथा।
बनाम स्पेस = "10"द. हस्पेस तथा। बनाम स्पेस विशेषताएँ क्षैतिज रूप से सफेद स्थान जोड़ती हैं ( हस्पेस) और लंबवत ( बनाम स्पेस
Lowsrc="/path/to/lowres.jpg"द. लोसआरसी विशेषता एक वैकल्पिक छवि प्रदान करती है जब आपका छवि स्रोत इतना बड़ा होता है कि यह बहुत धीरे-धीरे डाउनलोड होता है। उदाहरण के लिए, आपके पास 500KB की एक छवि हो सकती है जिसे आप अपने वेब पेज पर प्रदर्शित करना चाहते हैं, लेकिन 500KB को डाउनलोड होने में लंबा समय लगेगा। तो आप छवि की एक बहुत छोटी प्रतिलिपि बनाते हैं, शायद काले और सफेद रंग में या बस बेहद अनुकूलित, और उसे. लोसआरसी
लोसआरसी विशेषता को नेटस्केप नेविगेटर 2.0 में टैग में जोड़ा गया था। यह डीओएम स्तर 1 का हिस्सा था लेकिन फिर इसे डीओएम स्तर 2 से हटा दिया गया था। इस विशेषता के लिए ब्राउज़र समर्थन स्केची रहा है, हालांकि कई साइटों का दावा है कि यह सभी आधुनिक ब्राउज़रों द्वारा समर्थित है। यह HTML4 में पदावनत नहीं है या HTML5 में अप्रचलित है क्योंकि यह कभी भी किसी भी विनिर्देश का आधिकारिक हिस्सा नहीं था।
इस विशेषता का उपयोग करने से बचें और इसके बजाय अपनी छवियों को अनुकूलित करें ताकि वे जल्दी से लोड हों। पृष्ठ लोडिंग की गति अच्छे वेब डिज़ाइन का एक महत्वपूर्ण हिस्सा है, और बड़ी छवियां पृष्ठों को बहुत धीमा कर देती हैं - भले ही आप इसका उपयोग करते हों लोसआरसी विशेषता।