HTML Images: img Tag, src, alt और साइज़
4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
तस्वीरें पेज को जीवंत बना देती हैं। <img> tag पेज में तस्वीर जोड़ता है। यह एक empty element है — कोई closing tag नहीं — और इसके अच्छे से काम करने के लिए दो attributes चाहिए: src (तस्वीर की file) और alt (text में विवरण)।
src और alt
src तस्वीर की file का path है: <img src="photo.jpg" alt="Students in a class">। Path relative हो सकता है (images/photo.jpg) या पूरा URL। alt तब दिखता है जब तस्वीर load नहीं होती, और screen reader उसे ज़ोर से पढ़ते हैं और Google उसे पढ़ता है। किसी अर्थपूर्ण तस्वीर पर alt कभी खाली न छोड़ें — तस्वीर में क्या दिख रहा है, इसका छोटा और सच्चा विवरण लिखें।
Width और height
हमेशा width और height तय करें। तस्वीर load होने से पहले ही वे जगह बचा लेते हैं, ताकि load होते समय पेज इधर-उधर न हिले। आप आकार CSS में भी तय कर सकते हैं — यह आधुनिक तरीका है — लेकिन attributes browser को layout की योजना बनाने में अब भी मदद करते हैं।
कौन सा image format?
- JPG — photos के लिए। छोटी file size, अच्छी quality।
- PNG — graphics, logos और transparency वाली चीज़ों के लिए।
- WebP — आधुनिक चुनाव: उसी quality पर JPG और PNG से छोटा।
- GIF — सिर्फ साधारण animations के लिए।
- SVG — icons और logos के लिए जो किसी भी आकार पर साफ़ रहें।
तस्वीरों को जितना हो सके छोटा रखें — उन्हें उसी आकार में resize करें जिस आकार में वे दिखेंगी, और compress करें। 5 MB की photo पूरे पेज को धीमा कर देती है, और mobile data वाले visitor उसके load होने से पहले ही चले जाएँगे।
loading="lazy" जोड़ें। Browser उन्हें तभी load करता है जब visitor उनके पास scroll करता है, इसलिए पेज तेज़ी से खुलता है।img tag क्या होता है
<img> tag पेज पर तस्वीर लगाता है। यह एक empty element है — इसका कोई end tag नहीं होता और कोई content नहीं होता। जो कुछ उसे चाहिए, वह उसके attributes से मिलता है: src बताता है कि कौन सी image file load करनी है, और alt बताता है कि तस्वीर में क्या है। अगर इनमें से कोई एक भी गायब हो, तो तस्वीर टूटी हुई होती है या कई उपयोगकर्ताओं को दिखती ही नहीं।
याद रखने की तरकीब: src बताता है तस्वीर कहाँ है, alt बताता है तस्वीर क्या है।
Image के attributes
| Attribute | मान | विवरण |
|---|---|---|
src | a file path | तस्वीर की file कहाँ है। ज़रूरी है। |
alt | text | तस्वीर का विवरण। load न होने पर दिखता है; screen reader पढ़ते हैं। ज़रूरी है। |
width | pixels | पेज पर तस्वीर की चौड़ाई। |
height | pixels | पेज पर तस्वीर की ऊँचाई। |
title | text | Hover करने पर दिखने वाला tooltip। |
loading | lazy | तस्वीर तभी load होती है जब उपयोगकर्ता उसके पास scroll करता है — तेज़ पेज। |
हमेशा width और height तय करें। उनके बिना browser को पता नहीं होता कि कितनी जगह छोड़नी है, और तस्वीरें load होते समय पेज इधर-उधर हिलता है:
<img src="lotus.jpg" alt="Orange lotus logo" width="300" height="200"> <img src="lotus.jpg" alt="Orange lotus logo" loading="lazy">
alt text में तस्वीर का विवरण होना चाहिए, "image of" नहीं कहना चाहिए। alt="Students in a computer lab" लिखें, alt="image of students in a computer lab" नहीं। अगर कोई तस्वीर सिर्फ सजावट के लिए है, तो खाली alt="" इस्तेमाल करें ताकि screen reader उसे छोड़ दें।आम गलतियाँ
altछोड़ देना — तब अंधे उपयोगकर्ताओं और search engines को पता ही नहीं चलता कि तस्वीर क्या है।- HTML में सिर्फ
widthतय करना और तस्वीर को आकार से बाहर खींच देना — दोनों तय करें, या आकार CSS को सँभालने दें। - बड़ी तस्वीर इस्तेमाल करके उसे width और height से छोटा करना — browser फिर भी बड़ी file download करता है।
- File का नाम गलत capital letters से लिखना — server पर
Photo.jpgऔरphoto.jpgअलग-अलग files हैं।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<img src="classroom.jpg" alt="Students learning in a KAMALDNP classroom" width="600" height="400">
<p><img src="logo.png" alt="KAMALDNP logo" width="120" height="120"></p>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. img टैग के लिए कौन-से एट्रिब्यूट ज़रूरी हैं?
src से इमेज फ़ाइल मिलती है और alt से उसका विवरण; महत्वपूर्ण इमेज का alt कभी खाली न छोड़ें।
2. इमेज पर width और height क्यों लगाते हैं?
ये लोड होने से पहले जगह सुरक्षित रखते हैं, जिससे पेज लोड होते समय ऊपर-नीचे नहीं हिलता।
3. किस काम के लिए कौन-सा इमेज फ़ॉर्मेट चुनें?
फ़ोटो के लिए JPG, ग्राफ़िक्स और ट्रांसपेरेंसी के लिए PNG, आधुनिक छोटे फ़ॉर्मेट के लिए WebP और आइकन के लिए SVG चुनें।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
