आज किसी भी वेब पेज को ऑनलाइन देखें और आप देखेंगे कि वे कुछ चीजों को साझा करते हैं। उन साझा गुणों में से एक छवियों है। सही छवियां किसी वेबसाइट की प्रस्तुति में बहुत अधिक जोड़ती हैं। उनमें से कुछ छवियां, कंपनी के लोगो की तरह, साइट को ब्रांड करने में सहायता करती हैं और उस डिजिटल इकाई को आपकी भौतिक कंपनी से कनेक्ट करती हैं।
अपने वेब पेज पर एक छवि, आइकन या ग्राफिक्स जोड़ने के लिए, आपको किसी पृष्ठ के HTML कोड में टैग का उपयोग करने की आवश्यकता है। आप आईएमजी टैग को अपने एचटीएमएल में बिल्कुल वहीं रखते हैं जहां आप ग्राफ़िक प्रदर्शित करना चाहते हैं। पेज के कोड को प्रस्तुत करने वाला वेब ब्राउजर पेज को देखे जाने के बाद इस टैग को उचित ग्राफ़िक से बदल देगा। हमारी कंपनी लोगो उदाहरण पर वापस जाकर, यहां बताया गया है कि आप अपनी साइट पर उस छवि को कैसे जोड़ सकते हैं:
छवि गुण
उपरोक्त HTML कोड को देखते हुए, आप देखेंगे कि तत्व में दो विशेषताएं शामिल हैं। उनमें से प्रत्येक छवि के लिए आवश्यक है।
पहली विशेषता "src" है। यह वास्तव में छवि फ़ाइल है जिसे आप पृष्ठ पर प्रदर्शित करना चाहते हैं। हमारे उदाहरण में हम "logo.png" नामक फ़ाइल का उपयोग कर रहे हैं। यह ग्राफिक है कि वेब ब्राउजर साइट को प्रस्तुत करते समय प्रदर्शित करेगा।
आप यह भी देखेंगे कि इस फ़ाइल नाम से पहले, हमने कुछ अतिरिक्त जानकारी, "/ images /" जोड़ा। यह फ़ाइल पथ है। प्रारंभिक आगे स्लैश सर्वर को निर्देशिका की जड़ में देखने के लिए कहता है। इसके बाद यह "छवियों" नामक फ़ोल्डर की तलाश करेगा और अंत में "logo.png" नामक फ़ाइल को देखेंगे। किसी साइट के ग्राफिक्स को स्टोर करने के लिए "छवियों" नामक फ़ोल्डर का उपयोग करना एक बहुत ही सामान्य अभ्यास है, लेकिन आपकी फ़ाइल पथ को आपकी साइट के लिए जो भी प्रासंगिक हो, बदल दिया जाएगा।
दूसरी आवश्यक विशेषता "alt" टेक्स्ट है। यह "वैकल्पिक पाठ" है जो दिखाया गया है कि छवि किसी कारण से लोड करने में विफल रहता है। यह पाठ, जो हमारे उदाहरण में "कंपनी लोगो" पढ़ता है, यदि छवि लोड होने में विफल रहता है तो प्रदर्शित किया जाएगा। ऐसा क्यों होगा? कई कारण हैं:
- गलत फ़ाइल पथ
- गलत फ़ाइल नाम या गलत वर्तनी
- ट्रांसमिशन त्रुटि
- फ़ाइल सर्वर से हटा दी गई थी
ये कुछ संभावनाएं हैं कि हमारी निर्दिष्ट छवि क्यों गुम हो सकती है। इन मामलों में, हमारे alt टेक्स्ट इसके बजाय प्रदर्शित होगा।
स्क्रीन पाठक सॉफ़्टवेयर द्वारा Alt टेक्स्ट का उपयोग उस विज़िटर को छवि को "पढ़ने" के लिए भी किया जाता है, जो दृष्टिहीन है। चूंकि वे हमारे जैसे छवि को नहीं देख सकते हैं, इसलिए यह पाठ उन्हें बताता है कि छवि स्वयं क्या है। यही कारण है कि alt टेक्स्ट की आवश्यकता है और यह स्पष्ट रूप से क्यों बताएगा कि छवि क्या है!
Alt टेक्स्ट की एक आम गलतफहमी यह है कि यह खोज इंजन उद्देश्यों के लिए है। यह सच नहीं है। जबकि Google और अन्य खोज इंजन यह निर्धारित करने के लिए इस पाठ को पढ़ते हैं कि छवि क्या है (याद रखें, वे आपकी छवि को "देख" नहीं सकते हैं), आपको पूरी तरह से खोज इंजन को अपील करने के लिए alt टेक्स्ट नहीं लिखना चाहिए। लेखक स्पष्ट alt पाठ जो मनुष्यों के लिए है। यदि आप खोज इंजन से अपील करने वाले टैग में कुछ कीवर्ड भी जोड़ सकते हैं, तो यह ठीक है, लेकिन हमेशा यह सुनिश्चित कर लें कि alt टेक्स्ट किसी भी व्यक्ति के लिए छवि है जो ग्राफिक्स फ़ाइल नहीं देख सकता है, यह बताकर अपने प्राथमिक उद्देश्य की सेवा कर रहा है।
अन्य गुण
आईएमजी टैग में दो अन्य विशेषताएं भी होती हैं जिन्हें आप उपयोग में देख सकते हैं जब आप अपने वेब पेज पर ग्राफिक डालते हैं - चौड़ाई और ऊंचाई। उदाहरण के लिए, यदि आप ड्रीमवेवर जैसे WYSIWYG संपादक का उपयोग करते हैं, तो यह स्वचालित रूप से आपके लिए यह जानकारी जोड़ता है। यहां एक उदाहरण दिया गया है:
WIDTH और HEIGHT विशेषताएँ ब्राउज़र को छवि के आकार को बताती हैं। ब्राउज़र तब जानता है कि लेआउट में आवंटित करने के लिए कितनी जगह है, और यह छवि डाउनलोड करते समय पृष्ठ पर अगले तत्व पर जा सकता है। आपके एचटीएमएल में इस जानकारी का उपयोग करने में समस्या यह है कि आप हमेशा अपनी छवि को उस सटीक आकार पर प्रदर्शित नहीं करना चाहेंगे। उदाहरण के लिए, यदि आपके पास एक उत्तरदायी वेबसाइट है जिसका विज़िटर स्क्रीन और डिवाइस आकार के आधार पर आकार बदलता है, तो आप अपनी छवियों को लचीला भी बनाना चाहेंगे। यदि आप अपने एचटीएमएल में बताते हैं कि निश्चित आकार क्या है, तो आपको उत्तरदायी सीएसएस मीडिया प्रश्नों के साथ ओवरराइड करना बहुत कठिन लगेगा। इस कारण से, और स्टाइल (सीएसएस) और संरचना (एचटीएमएल) को अलग करने के लिए, यह अनुशंसा की जाती है कि आप अपने एचटीएमएल कोड में चौड़ाई और ऊंचाई विशेषताओं को न जोड़ें।
एक नोट: यदि आप इन आकारों के निर्देशों को बंद करते हैं और सीएसएस में आकार निर्दिष्ट नहीं करते हैं, तो ब्राउज़र छवि को इसके डिफ़ॉल्ट, मूल आकार में दिखाएगा।
जेरेमी गिरार्ड द्वारा संपादित