आईएमजी टैग गुण

चित्रों और वस्तुओं के लिए एचटीएमएल आईएमजी टैग का उपयोग करें

एचटीएमएल आईएमजी टैग एक वेब पेज के भीतर चित्रों और अन्य स्थैतिक ग्राफिकल वस्तुओं के सम्मिलन को नियंत्रित करता है। यह आम टैग कई अनिवार्य और वैकल्पिक विशेषताओं का समर्थन करता है जो एक आकर्षक, छवि-केंद्रित वेबसाइट तैयार करने की आपकी क्षमता के लिए समृद्धि जोड़ते हैं।

पूरी तरह से गठित एचटीएमएल आईएमजी टैग का एक उदाहरण इस तरह दिखता है:

आवश्यक आईएमजी टैग गुण

एसआरसी। एक वेब पेज पर प्रदर्शित करने के लिए एक छवि प्राप्त करने के लिए आपको एकमात्र विशेषता एसआरसी विशेषता है। यह विशेषता प्रदर्शित होने के लिए छवि फ़ाइल के नाम और स्थान की पहचान करती है।

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

उस छवि के बारे में अतिरिक्त विवरण देने के लिए Alt टेक्स्ट का उपयोग करें जो वेब पेज के पाठ के लिए प्रासंगिक या महत्वपूर्ण नहीं है। लेकिन याद रखें कि स्क्रीन पाठकों और अन्य टेक्स्ट-केवल ब्राउज़र में, टेक्स्ट को पृष्ठ पर शेष पाठ के साथ इनलाइन पढ़ा जाएगा। भ्रम से बचने के लिए, वर्णनात्मक alt टेक्स्ट का उपयोग करें जो कि (उदाहरण के लिए), "लोगो के बजाय" वेब डिज़ाइन और HTML के बारे में "कहता है।

एचटीएमएल 5 में, एएलटी विशेषता हमेशा आवश्यक नहीं होती है, क्योंकि आप इसमें अधिक विवरण जोड़ने के लिए एक कैप्शन का उपयोग कर सकते हैं। आप एक पूर्ण विवरण वाले आईडी को इंगित करने के लिए विशेषता ARIA-DESCRIBEDBY का भी उपयोग कर सकते हैं।

यदि छवि पूरी तरह से सजावटी है, तो वेब टेक्स्ट या आइकन के शीर्ष पर ग्राफ़िक जैसी Alt टेक्स्ट भी आवश्यक नहीं है। लेकिन यदि आप निश्चित नहीं हैं, तो बस मामले में alt टेक्स्ट शामिल करें।

अनुशंसित आईएमजी गुण

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

ये गुण पृष्ठ के प्रतिपादन को तेज़ी से बढ़ाते हैं क्योंकि ब्राउज़र छवि के लिए डिज़ाइन में स्थान आवंटित कर सकता है, और फिर संपूर्ण छवि को डाउनलोड करने की प्रतीक्षा करने के बजाय शेष सामग्री को डाउनलोड करना जारी रखता है।

अन्य उपयोगी आईएमजी गुण

शीर्षक विशेषता एक वैश्विक विशेषता है जिसे किसी भी HTML तत्व पर लागू किया जा सकता है। इसके अलावा, TITLE विशेषता आपको छवि के बारे में अतिरिक्त जानकारी जोड़ने देती है।

अधिकांश ब्राउज़र TITLE विशेषता का समर्थन करते हैं, लेकिन वे इसे विभिन्न तरीकों से करते हैं। कुछ लोग पॉप-अप के रूप में टेक्स्ट प्रदर्शित करते हैं जबकि अन्य इसे छवि स्क्रीन पर प्रदर्शित करते समय सूचना स्क्रीन में प्रदर्शित करते हैं। आप छवि के बारे में अतिरिक्त जानकारी लिखने के लिए TITLE विशेषता का उपयोग कर सकते हैं, लेकिन इस जानकारी को या तो छुपा या दृश्यमान पर भरोसा न करें। खोज इंजन के लिए कीवर्ड छिपाने के लिए आपको निश्चित रूप से इसका उपयोग नहीं करना चाहिए। इस अभ्यास को अब अधिकांश खोज इंजनों द्वारा दंडित किया गया है।

यूएसएएमएपी और आईएसएमएपी । ये दो विशेषताएं क्लाइंट-साइड () और सर्वर-साइड (आईएसएमएपी) छवि मानचित्रों को आपकी छवियों पर सेट करती हैं।

LONGDESC । विशेषता यूआरएल को छवि के लंबे विवरण के लिए समर्थन देती है। यह सुविधा आपकी छवियों को और अधिक सुलभ बनाती है।

बहिष्कृत और अप्रचलित आईएमजी गुण

एचटीएमएल 5 में अब कई विशेषताएं अप्रचलित हैं या HTML4 में बहिष्कृत हैं। सर्वोत्तम एचटीएमएल के लिए, आपको इन विशेषताओं का उपयोग करने के बजाय अन्य समाधान मिलना चाहिए।

बोर्डर विशेषता छवि के चारों ओर किसी भी सीमा के चौड़ाई में चौड़ाई को परिभाषित करती है। इसे HTML4 में सीएसएस के पक्ष में बहिष्कृत कर दिया गया है और HTML5 में अप्रचलित है।

साइन इन करें यह विशेषता आपको पाठ के अंदर एक छवि रखने की अनुमति देती है और इसके चारों ओर पाठ प्रवाह होता है। आप एक छवि को दाएं या बाएं संरेखित कर सकते हैं। इसे HTML4 में फ्लोट सीएसएस संपत्ति के पक्ष में बहिष्कृत कर दिया गया है और HTML5 में अप्रचलित है।

एचएसपीएसीई और वीएसपीएसीईई । एचएसपीएसीईई और वीएसपीएसीई गुण क्षैतिज रूप से सफेद स्थान (एचएसपीएसीई) और लंबवत (वीएसपीएसीई) जोड़ते हैं। सफेद स्थान ग्राफिक (शीर्ष और नीचे या बाएं और दाएं) के दोनों किनारों में जोड़ा जाएगा, इसलिए यदि आपको केवल एक तरफ स्थान की आवश्यकता है, तो आपको सीएसएस का उपयोग करना चाहिए। इन विशेषताओं को मार्जिन सीएसएस संपत्ति के पक्ष में HTML4 में बहिष्कृत कर दिया गया है, और वे HTML5 में अप्रचलित हैं।

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

LOWSRC विशेषता को नेटस्केप नेविगेटर 2.0 में आईएमजी टैग में जोड़ा गया था। यह डीओएम स्तर 1 का हिस्सा था लेकिन उसे डीओएम स्तर 2 से हटा दिया गया था। ब्राउजर समर्थन इस विशेषता के लिए स्केची है, हालांकि कई साइटें दावा करती हैं कि यह सभी आधुनिक ब्राउज़रों द्वारा समर्थित है। इसे HTML5 में HTML4 या अप्रचलित में बहिष्कृत नहीं किया गया है क्योंकि यह कभी भी विनिर्देश का आधिकारिक हिस्सा नहीं था।

इस विशेषता का उपयोग करने से बचें और इसके बजाय अपनी छवियों को अनुकूलित करें ताकि वे जल्दी से लोड हो जाएं। पेज लोडिंग की गति अच्छी वेब डिज़ाइन का एक महत्वपूर्ण हिस्सा है, और बड़ी छवियां बहुत धीमी गति से पृष्ठों को धीमा करती हैं-भले ही आप LOWSRC विशेषता का उपयोग करें।