इमेजेस (Images)
आज हम पेज पर images देखते हैं — खाली img tag, फ़ाइल का src path, और alt text जो तस्वीर का वर्णन करता है।
- 1
पेज पर image क्या होती है
पिछले लेसन में शब्दों को दूसरे पते से जोड़ा। आज पेज पर तस्वीर लगाते हैं। HTML में यह तस्वीर टेक्स्ट की तरह नहीं लिखी जाती। यह एक फ़ाइल है जिसे browser लाकर खींचता है।
उसका संकेत
<img>tag है। यह empty tag है: closing tag नहीं, टैगों के बीच टेक्स्ट भी नहीं। Browser को जो चाहिए, वह opening tag के attributes में रहता है। - 2
समस्या: टेक्स्ट दस्तावेज़ में बाहरी ग्राफिक्स और तस्वीरों को जोड़ना
पुराने पेज ज़्यादातर शब्द थे। लोग स्क्रीन पर फोटो या लोगो चाहते थे, लेकिन browser सिर्फ़ HTML पढ़ता है। किसी को ऐसा tag बनाना पड़ा जो image फ़ाइल की ओर इशारा करे और browser से दिखाए।
वह tag
<img>है।srcattribute में फ़ाइल का path रहता है।altमें छोटा वर्णन — जब तस्वीर न दिखे: धीमा नेट, टूटा path, या screen reader। - 3
Browser तस्वीरों को कैसे डाउनलोड और रेंडर करता है (और Alt का महत्व)
Browser
<img>पढ़ता है,srcसे फ़ाइल लाता है, और तस्वीर खींचता है। फ़ाइल फेल हो तोaltदिखा या बोल सकता है। ऐसाaltलिखो जो तस्वीर में क्या है बताए, सिर्फ़ “image” शब्द नहीं।नीचे उदाहरण में
src/से शुरू होता है, यानी website की root से path। गलत path का मतलब टूटी image। - 4
आज की प्रैक्टिस: सही Attributes के साथ इमेज रेंडर करना
नीचे एक
<img>लाइन पढ़ो, फिर browser pane देखो। तस्वीर दिखनी चाहिए, और पता होना चाहिए कि फ़ाइल फेल हो तोaltतैयार है। - 5
अहम नियम: src और alt हमेशा एक साथ
srcछोड़ो तो खींचने को कुछ नहीं।altछोड़ो तो जो तस्वीर न देख सकें, अर्थ खो देते हैं। दोनों एक ही खाली<img>tag पर लगाओ।
यह सर्वर पर मौजूद इमेज फ़ाइल की लोकेशन बताता है। अगर पाथ ग़लत हुआ तो टूटी हुई इमेज का आइकन दिखेगा।
धीमे इंटरनेट पर या स्क्रीन रीडर का उपयोग करने वाले दृष्टिबाधित शिक्षार्थियों के लिए यह वर्णन अनिवार्य है।
आप क्या सीखेंगे
- 1Images वे फ़ाइलें हैं जो browser लाता है
- 2खाली img tag तस्वीर दिखाता है
- 3src में उस फ़ाइल का path रहता है
- 4alt तस्वीर को शब्दों में बताता है
- 5गलत src का मतलब टूटी image
लाइन-बाय-लाइन
<img>Empty tag। Closing tag नहीं। तस्वीर टैगों के बीच का टेक्स्ट नहीं, खुद टैग है।
src="/images/momos.svg"फ़ाइल कहाँ है। शुरू का
/website की root से है। Path बदलो तो तस्वीर टूट जाती है।alt="A plate of steamed momos with spicy red chutney"तस्वीर में क्या है, उसका छोटा वर्णन। Screen readers इसे ज़ोर से पढ़ते हैं। सिर्फ़ “image” या “photo” न लिखो।
खुद ट्राई करो
एक <img> लिखो जिसमें src="/images/momos.svg" हो और alt प्लेट पर तुम्हारे पसंदीदा खाने का नाम बताए। एक खाली tag, दोनों attributes साथ।
हिंट: alt का जवाब: अगर मैं यह फोटो न देखूँ, तो मुझे क्या पता चलना चाहिए?
गलती कहाँ होती है
- 1.
alt="image"याalt="photo"लिखना। किसी का भला नहीं। तस्वीर में क्या है वह लिखो। - 2.
altबिलकुल छोड़ देना। जो तस्वीर न देख सकें, या लोड टूटे, अर्थ खो देते हैं।
इंटरव्यू की तैयारी (क्लिक करके उत्तर देखें)
Q: वेब सुलभता (Accessibility) के लिए alt attribute क्यों अनिवार्य है?↓
यदि इमेज लोड नहीं हो पाती (धीमे नेटवर्क या टूटे लिंक के कारण), या जब स्क्रीन रीडर उपयोगकर्ता पेज पढ़ते हैं, तो alt ही उस दृश्य का अर्थ समझाता है। इसके अलावा खोज इंजन भी इमेज सर्च के लिए इसे पढ़ते हैं।
Q: सिर्फ़ सजावटी (decorative) इमेज के लिए alt में क्या लिखना चाहिए?↓
सजावटी छवियों के लिए खाली alt स्ट्रिंग रखें: alt="" (null alt)। इससे स्क्रीन रीडर समझ जाता है कि यह केवल सजावट है और वह फ़ाइल का लंबा नाम पढ़ने के बजाय इसे चुपचाप छोड़ देता है।
Q: <img> टैग पर width और height स्पष्ट रूप से देना क्यों महत्वपूर्ण है?↓
width और height देने से ब्राउज़र इमेज डाउनलोड होने से पहले ही उसके आकार की जगह सुरक्षित रख लेता है। इससे पेज लोड होते समय लेआउट में अवांछित उछाल (Cumulative Layout Shift - CLS) नहीं होता।