HTML छवियाँ

बुकमार्क आपको पाठ में इधर-उधर ले जाते हैं। छवियाँ पेज में फ़ोटो, आरेख और लोगो लाती हैं। बुनियादी HTML उपकरण खाली img तत्व है: सामान्य उपयोग में यह खुली और बंद टैग के बीच कोई कैप्शन नहीं लपेटता। यह src से फ़ाइल की ओर इशारा करता है और alt से पाठ्य विकल्प देता है।

img क्या करता है

img एक replaced तत्व है। ब्राउज़र src पर संसाधन लाता है और उसे लेआउट में चित्रित करता है। यदि फ़ाइल गायब या अवरुद्ध है, तो आगंतुकों को फिर भी उपयोगी alt चाहिए (या शुद्ध सजावट के लिए स्पष्ट रूप से खाली alt="")। पथ लिंक और फ़ेविकॉन के लिए आपके द्वारा पहले से उपयोग किए जाने वाले सापेक्ष और निरपेक्ष नियमों का पालन करते हैं।

सीधा उत्तर

लिखें <img src="path/to/file.jpg" alt="short description">।

• src — छवि फ़ाइल कहाँ है
• alt — जब छवि देखी न जा सके या लोड विफल हो तो पाठ्य विकल्प
  वैकल्पिक width और height स्थान आरक्षित कर सकते हैं और लेआउट कूद कम कर सकते हैं। धीमे कनेक्शन पर हर शिक्षार्थी को मल्टी-मेगाबाइट फ़ाइलें भेजने के बजाय ओवरसाइज़्ड फ़ोटो को संपीड़ित करना बेहतर है।

एक नज़र में मुख्य विशेषताएँ

एक बुनियादी जानकारीपूर्ण छवि

छवियों को images/ जैसे स्पष्ट फ़ोल्डर में रखें और alt में जो मायने रखता है उसका वर्णन करें।

बुनियादी नमूना पढ़ना

• src="images/team.jpg" HTML फ़ाइल से सापेक्ष पथ है
• alt स्क्रीन रीडर और विफल लोड के लिए फ़ोटो का अर्थ बताता है
• सामान्य HTML लेखन में अलग बंद </img> नहीं होता — विशेषताएँ एकल टैग पर रहती हैं
• यदि फ़ोल्डर या फ़ाइल नाम गलत है, तो टैग सही दिखने पर भी छवि टूट जाती है

Width और height संकेत

Width और height देने से ब्राउज़र बाइट्स आने से पहले स्थान आरक्षित करने में मदद करता है। जब संभव हो वास्तविक फ़ाइल के पहलू अनुपात से मिलाएँ, ताकि छवि खिंची न लगे। केवल HTML विशेषताओं से विशाल फ़ोटो सिकोड़ने पर भी विशाल फ़ाइल डाउनलोड होती है — वेब के लिए एसेट का आकार बदलें और संपीड़ित करें।

सजावटी छवियाँ और खाली alt

जब कोई छवि कोई जानकारी नहीं जोड़ती — आस-पास के पाठ से पहले से ढकी शुद्ध सजावट — तो alt="" उपयोग करें। विशेषता न हटाएँ। alt छोड़ना और खाली alt="" लिखना अलग हैं: खाली का अर्थ है «एक्सेसिबिलिटी ट्री के लिए मुझे अनदेखा करें», गायब अक्सर मतलब है «मार्कअप में कुछ गलत हुआ»।

अर्थ के लिए alt लिखें, स्पैम के लिए नहीं

अच्छा alt संदर्भ में छवि का छोटा विकल्प है: जो एक देखने वाले उपयोगकर्ता को पेज समझने के लिए चाहिए। बुरा alt कीवर्ड ठूँसता है, छवि के पास पहले से छपे कैप्शन को दोहराता है, या बिना सामग्री के «image» कहता है। यदि छवि चार्ट है, तो मुख्य बात सारांशित करें; यदि यह होम लिंक के रूप में भी काम करने वाला लोगो है, तो लिंक का एक्सेसिबल नाम आमतौर पर छवि alt या आस-पास के पाठ से आता है — ईमानदार रखें।

शुरुआती जिन फ़ाइल प्रारूपों से मिलते हैं

JPEG (.jpg) फ़ोटो के लिए उपयुक्त है। PNG तीखे किनारों या पारदर्शिता वाले ग्राफ़िक्स के लिए उपयुक्त है। SVG सरल आइकन और लोगो के लिए उपयुक्त है जब आप साफ़ स्केलिंग चाहते हैं (बाद में अधिक SVG पैटर्न देखेंगे)। सामग्री के अनुरूप प्रारूप चुनें, फिर फ़ाइल वजन उचित रखें।

अपने एडिटर में अभ्यास

1. images फ़ोल्डर में एक छोटी .jpg या .png रखें।
2. सही सापेक्ष src और स्पष्ट alt वाला img जोड़ें।
3. पहलू अनुपात से मेल खाते width और height जोड़ें।
4. जानबूझकर एक बार पथ तोड़ें — पुष्टि करें कि alt (या टूटी-छवि UI) आपको त्रुटि देखने में मदद करता है, फिर पथ ठीक करें।
5. alt="" वाली एक सजावटी छवि जोड़ें और पुष्टि करें कि आपने विशेषता पूरी तरह हटाई नहीं।

आसान गलतियाँ

• जानकारीपूर्ण छवियों पर alt गायब
• src में गलत फ़ोल्डर या वर्तनी
• जब छोटी वेब-आकार फ़ाइल काफी हो तो मल्टी-मेगाबाइट कैमरा फ़ोटो भेजना
• alt को कीवर्ड डंपिंग ग्राउंड समझना
• बेमेल width/height से लोगो खींचना
• src (छवियाँ) को href (लिंक) से भ्रमित करना

सारांश

• छवियाँ src और alt के साथ img उपयोग करती हैं
• पथ साइट की अन्य फ़ाइलों जैसे ही नियमों का पालन करते हैं
• alt एक्सेसिबिलिटी और विफल लोड का समर्थन करता है; alt="" केवल शुद्ध सजावट के लिए उपयोग करें
• Width और height स्थान आरक्षित कर सकते हैं; फिर भी वास्तविक फ़ाइल आकार अनुकूलित करें
• समझदार प्रारूप चुनें और डाउनलोड हल्के रखें