एचटीएमएल आईएमजी टैग एक वेब पेज के भीतर चित्रों और अन्य स्थैतिक ग्राफिकल वस्तुओं के सम्मिलन को नियंत्रित करता है। यह आम टैग कई अनिवार्य और वैकल्पिक विशेषताओं का समर्थन करता है जो एक आकर्षक, छवि-केंद्रित वेबसाइट तैयार करने की आपकी क्षमता के लिए समृद्धि जोड़ते हैं।
पूरी तरह से गठित एचटीएमएल आईएमजी टैग का एक उदाहरण इस तरह दिखता है:
आवश्यक आईएमजी टैग गुण
एसआरसी।एक वेब पेज पर प्रदर्शित करने के लिए एक छवि प्राप्त करने के लिए आपको एकमात्र विशेषता एसआरसी विशेषता है। यह विशेषता प्रदर्शित होने के लिए छवि फ़ाइल के नाम और स्थान की पहचान करती है।
एएलटी।वैध एक्सएचटीएमएल और एचटीएमएल 4 लिखने के लिए, एएलटी विशेषता भी आवश्यक है। इस विशेषता का उपयोग टेक्स्ट के साथ गैर-विज़ुअल ब्राउज़र प्रदान करने के लिए किया जाता है जो छवि का वर्णन करता है। ब्राउज़र वैकल्पिक पाठ को विभिन्न तरीकों से प्रदर्शित करते हैं। कुछ लोग इसे पॉप-अप के रूप में प्रदर्शित करते हैं जब आप अपने माउस को छवि पर डालते हैं, अन्य लोग इसे गुणों में प्रदर्शित करते हैं जब आप छवि पर राइट-क्लिक करते हैं, और कुछ इसे बिल्कुल प्रदर्शित नहीं करते हैं।
उस छवि के बारे में अतिरिक्त विवरण देने के लिए Alt टेक्स्ट का उपयोग करें जो वेब पेज के पाठ के लिए प्रासंगिक या महत्वपूर्ण नहीं है। लेकिन याद रखें कि स्क्रीन पाठकों और अन्य टेक्स्ट-केवल ब्राउज़र में, टेक्स्ट को पृष्ठ पर शेष पाठ के साथ इनलाइन पढ़ा जाएगा। भ्रम से बचने के लिए, वर्णनात्मक alt टेक्स्ट का उपयोग करें जो कि (उदाहरण के लिए), "लोगो के बजाय" वेब डिज़ाइन और HTML के बारे में "कहता है।
एचटीएमएल 5 में, एएलटी विशेषता हमेशा आवश्यक नहीं होती है, क्योंकि आप इसमें अधिक विवरण जोड़ने के लिए एक कैप्शन का उपयोग कर सकते हैं। आप विशेषता का भी उपयोग कर सकते हैं ARIA-DESCRIBEDBY एक आईडी को इंगित करने के लिए जिसमें एक पूर्ण विवरण है।
यदि छवि पूरी तरह से सजावटी है, तो वेब टेक्स्ट या आइकन के शीर्ष पर ग्राफ़िक जैसी Alt टेक्स्ट भी आवश्यक नहीं है। लेकिन यदि आप निश्चित नहीं हैं, तो बस मामले में alt टेक्स्ट शामिल करें।
अनुशंसित आईएमजी गुण
चौड़ाई तथा ऊंचाई. आपको हमेशा उपयोग करने की आदत में जाना चाहिए चौड़ाई तथा ऊंचाई जिम्मेदार बताते हैं। और आपको हमेशा वास्तविक आकार का उपयोग करना चाहिए और ब्राउज़र के साथ अपनी छवियों का आकार बदलना नहीं चाहिए।
ये गुण पृष्ठ के प्रतिपादन को तेज़ी से बढ़ाते हैं क्योंकि ब्राउज़र छवि के लिए डिज़ाइन में स्थान आवंटित कर सकता है, और फिर संपूर्ण छवि को डाउनलोड करने की प्रतीक्षा करने के बजाय शेष सामग्री को डाउनलोड करना जारी रखता है।
अन्य उपयोगी आईएमजी गुण
शीर्षक. विशेषता एक वैश्विक विशेषता है जिसे किसी भी HTML तत्व पर लागू किया जा सकता है। इसके अलावा, शीर्षक विशेषता आपको छवि के बारे में अतिरिक्त जानकारी जोड़ने देती है।
अधिकांश ब्राउज़रों का समर्थन करते हैं शीर्षक विशेषता है, लेकिन वे इसे विभिन्न तरीकों से करते हैं। कुछ लोग पॉप-अप के रूप में टेक्स्ट प्रदर्शित करते हैं जबकि अन्य इसे छवि स्क्रीन पर प्रदर्शित करते समय सूचना स्क्रीन में प्रदर्शित करते हैं। आप इसका उपयोग कर सकते हैं शीर्षक छवि के बारे में अतिरिक्त जानकारी लिखने के लिए विशेषता है, लेकिन इस जानकारी को या तो छिपी हुई पर भरोसा न करें या दिखाई। खोज इंजन के लिए कीवर्ड छिपाने के लिए आपको निश्चित रूप से इसका उपयोग नहीं करना चाहिए। इस अभ्यास को अब अधिकांश खोज इंजनों द्वारा दंडित किया गया है।
USEMAP तथा ismap. ये दो विशेषताएं क्लाइंट-साइड () और सर्वर-साइड (आईएसएमएपी) छवि मानचित्रों को आपकी छवियों पर सेट करती हैं।
longdesc. विशेषता यूआरएल को छवि के लंबे विवरण के लिए समर्थन देती है। यह सुविधा आपकी छवियों को और अधिक सुलभ बनाती है।
बहिष्कृत और अप्रचलित आईएमजी गुण
एचटीएमएल 5 में अब कई विशेषताएं अप्रचलित हैं या HTML4 में बहिष्कृत हैं। सर्वोत्तम एचटीएमएल के लिए, आपको इन विशेषताओं का उपयोग करने के बजाय अन्य समाधान मिलना चाहिए।
बॉर्डर. विशेषता छवि के चारों ओर किसी भी सीमा के चौड़ाई में चौड़ाई को परिभाषित करती है। इसे HTML4 में सीएसएस के पक्ष में बहिष्कृत कर दिया गया है और HTML5 में अप्रचलित है।
संरेखित करें. यह विशेषता आपको पाठ के अंदर एक छवि रखने की अनुमति देती है और इसके चारों ओर पाठ प्रवाह होता है। आप एक छवि को दाएं या बाएं संरेखित कर सकते हैं। इसे HTML4 में फ्लोट सीएसएस संपत्ति के पक्ष में बहिष्कृत कर दिया गया है और HTML5 में अप्रचलित है।
hspace तथा VSPACE. hspace तथा VSPACE गुण क्षैतिज रूप से सफेद स्थान जोड़ें (hspace) और लंबवत (VSPACE)। सफेद स्थान ग्राफिक (शीर्ष और नीचे या बाएं और दाएं) के दोनों किनारों में जोड़ा जाएगा, इसलिए यदि आपको केवल एक तरफ स्थान की आवश्यकता है, तो आपको सीएसएस का उपयोग करना चाहिए। इन विशेषताओं को मार्जिन सीएसएस संपत्ति के पक्ष में HTML4 में बहिष्कृत कर दिया गया है, और वे HTML5 में अप्रचलित हैं।
LOWSRC. LOWSRC विशेषता एक वैकल्पिक छवि प्रदान करती है जब आपका छवि स्रोत इतना बड़ा होता है कि यह बहुत धीरे-धीरे डाउनलोड होता है। उदाहरण के लिए, आपके पास एक ऐसी छवि हो सकती है जो 500 केबी है जिसे आप अपने वेब पेज पर प्रदर्शित करना चाहते हैं, लेकिन 500 केबी को डाउनलोड करने में काफी समय लगेगा। तो आप छवि की एक बहुत छोटी प्रतिलिपि बना सकते हैं, शायद काले और सफेद या बस बेहद अनुकूलित, और उसमें डाल दिया LOWSRC विशेषता। छोटी छवि पहले डाउनलोड और प्रदर्शित होगी, और फिर जब बड़ी छवि दिखाई देगी तो यह निम्न स्रोत को प्रतिस्थापित करेगा।
LOWSRC विशेषता को नेटस्केप नेविगेटर 2.0 में जोड़ा गया था आईएमजी टैग। यह डीओएम स्तर 1 का हिस्सा था लेकिन उसे डीओएम स्तर 2 से हटा दिया गया था। ब्राउजर समर्थन इस विशेषता के लिए स्केची है, हालांकि कई साइटें दावा करती हैं कि यह सभी आधुनिक ब्राउज़रों द्वारा समर्थित है। इसे HTML5 में HTML4 या अप्रचलित में बहिष्कृत नहीं किया गया है क्योंकि यह कभी भी विनिर्देश का आधिकारिक हिस्सा नहीं था।
इस विशेषता का उपयोग करने से बचें और इसके बजाय अपनी छवियों को अनुकूलित करें ताकि वे जल्दी से लोड हो जाएं। पेज लोडिंग की गति अच्छी वेब डिज़ाइन का एक महत्वपूर्ण हिस्सा है, और बड़ी छवियां बहुत धीमी गति से पृष्ठों को धीमा करती हैं-भले ही आप इसका उपयोग करें LOWSRC विशेषता।
