Theory
Poster जो कभी दिखा ही नहीं
FestConnect के home page को एक चमकीले event poster से खुलना चाहिए। आप इसे जोड़ते हैं, refresh करते हैं, और सिर्फ़ एक छोटा broken-image icon दिखता है, कुछ और नहीं। एक slow phone पर बाक़ी page भी इधर-उधर हिलता है जैसे-जैसे चीज़ें load होती हैं।
यह सब एक tag के चार attributes से control होता है। <img> tag में कोई content और कोई closing tag नहीं होता, इसे जो कुछ चाहिए वह इसके attributes पर टिका है: src, alt, width/height, और style।
Theory
एक picture frame जो आप photo आने से पहले टाँगते हैं
एक framed photo टाँगते समय, आप तीन चीज़ें decide करते हैं: कौन सी photo अंदर जाती है (src), जो इसे नहीं देख सकता उसके लिए एक caption (alt), और frame कितना बड़ा है (width/height)। पहले frame size fix करने का मतलब है wall layout set हो जाता है photo के print होने और अंदर slide होने से पहले ही। एक web image इसी तरह काम करती है: पहले size reserve कीजिए, फिर picture आने पर इसे भर देती है।
Theory
चार attributes
- src: image file का path। Links जैसा ही relative/absolute rule: अपनी file के लिए
images/poster.jpg, या एक पूराhttps://...URL। - alt: alternative text। Image fail होने पर दिखता है, और blind users को पढ़ा जाता है। हर meaningful image को असली alt text दीजिए।
- width और height: pixels में size (सिर्फ़ एक number, attribute में
pxकी ज़रूरत नहीं)। दोनों set करना space reserve करता है और page को हिलने से रोकता है। - style: extras के लिए inline CSS, जैसे
style="border-radius:8px"।
Practical
FestConnect poster
<img
src="images/fest-poster.jpg"
alt="Ganpat University TechFest 2026, 12 to 14 March"
width="600"
height="300"
style="border-radius: 8px;">
<!-- Note: <img> is self-closing. There is no </img>. -->This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
alt लिखना ही क्यों?
दो अलग situations बताइए जहाँ alt text 'Ganpat University TechFest 2026' असल में इस्तेमाल होता है, भले ही image आपके अपने laptop पर बिल्कुल ठीक दिखती हो। सोचिए, फिर check कीजिए।
Show the answer
1. Image load होने में fail होती है (ग़लत path, धीमा या टूटा network): browser इसकी जगह alt text दिखाता है, तो visitor फिर भी जान लेता है वहाँ क्या होना था। 2. एक screen reader वाला blind user: software alt को ज़ोर से पढ़ता है, क्योंकि वह picture देख नहीं सकता। (Bonus: search engines भी alt पढ़ते हैं, जो page को rank करने में मदद करता है।) यही वजह है exams missing alt को एक असली accessibility mistake मानते हैं, कोई मामूली बात नहीं।
Quiz
एक slow phone पर, poster load ख़त्म होते ही FestConnect page का content अचानक नीचे हिल जाता है। कौन सा fix इस हिलने को रोकता है?
- <img> पर width और height दोनों set कीजिए ताकि load होने से पहले इसकी space reserve हो जाए
- Image तेज़ load हो इसके लिए alt attribute हटा दीजिए
- एक </img> closing tag जोड़िए
- src को relative path से absolute URL में बदल दीजिए
Show the answer
<img> पर width और height दोनों set कीजिए ताकि load होने से पहले इसकी space reserve हो जाए
Image को एक fixed width और height देना तुरंत इसका box reserve कर देता है, तो picture आने पर कुछ नहीं हिलता (A)। alt (B) का loading speed पर कोई असर नहीं। img का कोई closing tag नहीं होता (C), तो </img> बस ग़लत है। Path style (D) यह बदलता है file कहाँ से आती है, layout jump नहीं।
Watch out
Common img mistakes
- alt भूल जाना, या
alt="image"लिखना। Alt को picture describe करना चाहिए ('event poster'), image शब्द दोहराना नहीं। - `</img>` लिखना।
<img>एक void element है: कोई closing tag नहीं। यही सच<br>और<hr>के लिए भी है। - सिर्फ़ width set करना। अगर आप width set करते हैं पर height नहीं (या उल्टा) browser दूसरे को guess करता है, जो picture को distort कर सकता है और फिर भी layout hilने दे सकता है। दोनों set कीजिए, या दोनों छोड़कर CSS को handle करने दीजिए।
Theory
अगला: images जो ख़ुद resize हों
Fixed width="600" एक laptop पर बढ़िया दिखता है पर एक phone पर overflow हो जाता है। Unit 2 में, Bootstrap की img-fluid class एक image को किसी भी screen में automatically fit होने के लिए shrink कर देती है। यही है plain <img> का responsive upgrade जो आपने अभी सीखा; आपको फिर भी exactly यहाँ जैसे src और alt चाहिए।
Summary
Key takeaways
- <img> एक picture रखता है और self-closing है: कोई </img> नहीं।
- src file path है (अपनी files के लिए relative, दूसरों के लिए absolute), links जैसा ही rule।
- alt image fail होने पर दिखता है और screen readers पढ़ते हैं: हर meaningful image को असली alt text दीजिए।
- width और height (सादे pixel numbers) size set करते हैं; दोनों set करना space reserve करता है और layout jump रोकता है।
- style rounded corners जैसे inline CSS extras जोड़ता है।
- Memory hook: पहले frame reserve कीजिए, फिर photo अंदर slide होती है।