वेब पेज के लिए HTML फ़ाइल खोलें जिसे आप टेक्स्ट एडिटर जैसे नोटपैड या वेब डेवलपमेंट सॉफ़्टवेयर में एक छवि जोड़ना चाहते हैं।
फ़ाइल में एक टैग जोड़ें। टैग को उस तत्व के बाद रखें जिसे आप चाहते हैं कि एक छवि ब्राउज़र में HTML फ़ाइल खोले जाने पर दिखाई दे। टैग में एक अलग क्लोजिंग टैग नहीं है। टैग के भीतर, आपको उस छवि के स्रोत को निर्दिष्ट करना होगा जिसे आप इंटरनेट पर छवि का स्थान टाइप करके प्रदर्शित करना चाहते हैं एसआरसी गुण। यदि छवि HTML फ़ाइल के समान फ़ोल्डर में संग्रहीत है, तो छवि का नाम और एक्सटेंशन टाइप करें। यदि छवि कहीं और संग्रहीत है, तो छवि का पूरा URL टाइप करें।
जोड़ें Alt अपने टैग के लिए विशेषता। HTML5 में, alt विशेषता की आवश्यकता होती है। छवि का वर्णन करने के लिए इस विशेषता का उपयोग करें यदि यह लोड नहीं हो सकती है। यदि कोई छवि लोड नहीं हो सकती है, तो ब्राउज़र आपके द्वारा दर्ज किए गए पाठ को alt विशेषता के बाद प्रदर्शित करता है। इसके अलावा, दृश्य विकलांग लोगों द्वारा उपयोग किए जाने वाले स्क्रीन रीडर सॉफ़्टवेयर के लिए ऑल्ट विशेषता महत्वपूर्ण है। सॉफ्टवेयर ऑल्ट एट्रिब्यूट में टेक्स्ट को पढ़ता है ताकि आपकी वेबसाइट को देखने वाले दृष्टिहीन व्यक्ति यह सुन सकें कि तस्वीर में क्या है, भले ही वे इसे देख न सकें।
पिक्सेल में छवि के आयामों को निर्दिष्ट करें ऊंचाई तथा चौड़ाई गुण। यदि आप आयाम निर्दिष्ट नहीं करते हैं, तो ब्राउज़र को यह नहीं पता होता है कि पृष्ठ लोड होने पर छवि के लिए कितनी जगह छोड़नी है। यह एक पृष्ठ में तेजी से लोड होता है, क्योंकि पाठ पहले लोड होता है, छवि के लिए एक छोटी सी जगह छोड़ देता है, फिर छवि लोड होने पर अलग हो जाता है और स्थान का विस्तार करता है। निर्दिष्ट आयामों के साथ, ब्राउज़र पृष्ठ पर अन्य तत्वों के बीच बिल्कुल सही जगह छोड़ता है ताकि छवि लोड होने के बाद भरने के लिए हो।
ब्राउज़र में अपनी HTML फ़ाइल खोलकर यह सुनिश्चित करने के लिए अपने कोड का परीक्षण करें कि छवि सही स्थान पर प्रदर्शित होती है।
किसी छवि को स्क्रीन के बाईं या दाईं ओर ले जाने के लिए CSS का उपयोग करें या उसके चारों ओर टेक्स्ट रैप करें। उदाहरण के लिए, आप शैली = "फ्लोट: बाएं;" का उपयोग कर सकते हैं या शैली = "फ्लोट: दाएं;" टैग के भीतर।
यदि आप किसी छवि की ऊँचाई और चौड़ाई दोनों को नहीं जानते हैं, तो केवल ऊँचाई या चौड़ाई विशेषता का उपयोग करना ही ठीक है। आप ऊंचाई और चौड़ाई निर्दिष्ट करने के लिए सीएसएस का भी उपयोग कर सकते हैं; उदाहरण के लिए, 100 गुणा 100 पिक्सेल छवि के साथ, शैली विशेषता का उपयोग करें: शैली = "ऊंचाई: 100 पीएक्स; चौड़ाई: 100px।"
टैग को "a href" टैग जोड़ी के भीतर रखकर छवि को क्लिक करने योग्य लिंक बनाएं। उदाहरण के लिए, यदि आप चाहते हैं कि कोई छवि फेसबुक से लिंक हो, तो निम्न टाइप करें।
अपने पेज के SEO को बूस्ट करने के लिए alt एट्रिब्यूट का इस्तेमाल न करें। खोज इंजन लंबे समय से जानते हैं कि कुछ वेब डिज़ाइनर ऑल्ट एट्रिब्यूट को अतिरिक्त कीवर्ड्स से भरने की कोशिश करते हैं, और इसलिए वे ऑल्ट एट्रीब्यूट में टेक्स्ट को अनदेखा कर देते हैं।
