इमेज शामिल करना (Inserting the Image) वैकल्पिक सुधार करना (Optional Adjustments)
यहाँ पर ऐसी बहुत सारी इमेज होस्टिंग सर्विस हैं, जो आपको फ्री में इमेज उपलब्ध कराती हैं, जिनमें Picasa Web Albums, Imgur, Flickr या Photobucket जैसे नाम शामिल हैं। इनकी शर्तों को सावधानी से पढ़ें। कुछ सर्विस आपकी इमेज की क्वालिटी को कम कर देती हैं या फिर यदि आपकी फोटो को बहुत सारे लोग देखते हैं, (क्योंकि ये होस्ट की बैंडविड्थ को ज्यादा इस्तेमाल कर रही होती हैं), तो उसे हटा भी सकते हैं।  कुछ ब्लॉग-होस्टिंग सर्विस, एडमिनिस्ट्रेटर टूल्स के जरिये आपको इमेज अपलोड करने की सुविधा देती हैं। यदि आप किसी भुगतान किये जाने वाले वेब होस्ट का इस्तेमाल कर रहे हैं, तो फिर FTP सर्विस का इस्तेमाल करके आपकी साईट पर इमेज अपलोड करें। आपकी फाइल्स को व्यवस्थित रखने के लिए, एक "images" डायरेक्टरी तैयार करने की सलाह दी जाती है।  यदि आप किसी और वेबसाइट पर मौजूद इमेज का इस्तेमाल करना चाह रहे हैं, तो फिर इसके निर्माता से अनुमति जरुर माँग लें। यदि वो आपको अनुमति देते हैं, तब इमेज डाउनलोड करें और फिर उस इमेज को आपकी इमेज होस्टिंग साईट पर अपलोड कर दें। आप जिस वेबपेज पर इमेज को दर्शाना चाहते हैं, उस के HTML डॉक्यूमेंट को खोलें। यदि आप किसी फोरम (forum) पर इमेज को शामिल करना चाह रहे हैं, फिर आप इसे सीधे पोस्ट में लिख सकते हैं। बहुत सारे फोरम HTML की जगह पर कस्टम सिस्टम का इस्तेमाल करते हैं। यदि आपको इस में कोई परेशानी होती है, तो किसी अन्य फोरम चलानेवाले से मदद की माँग करें। आप आपके HTML बॉडी (body) की जिस भाग पर फोटो शामिल करना चाह रहे हैं, उस भाग पर जाएँ। वहाँ पर <img> ये टैग लिखें। ये एक खाली टैग है, जिसका मतलब कि ये बिना क्लोजिंग (closing) टैग के काम करता है। अब आपकी इमेज में जो कुछ भी दिखने वाला है, वो इन दो एंगल ब्रैकेट में मौजूद होगा। <img> उस वेबपेज पर जाएँ, जहाँ पर आपकी इमेज होस्ट की गई है। इमेज पर राईट-क्लिक (मैक पर कंट्रोल-क्लिक) करें और फिर "Copy Image Location" चुनें। यदि आप पेज पर सिर्फ इमेज अकेले को देखना चाहते हैं, तो "View Image" भी क्लिक कर सकते हैं, उसके बाद उसके यूआरएल को आपके एड्रेस बार में कॉपी कर लें। यदि आपने इस इमेज को पहले ही आपकी अपनी वेबसाइट की किसी इमेज डायरेक्टरी पर अपलोड कर दिया है, तो फिर इसे /images/आपके फाइलनेम के साथ लिंक कर दें। यदि ऐसा करके भी काम नहीं होता है, तो इसका मतलब कि आपकी इमेज डायरेक्टरी और किसी फोल्डर के अंदर है। इसे रूट डायरेक्टरी पर लेकर आ जाएँ। जैसा कि आप जानते हैं, कि HTML एट्रिब्यूट, इस पर कोई बदलाव करने के लिए, टैग के अंदर इस्तेमाल होते हैं। src एट्रिब्यूट "source" के लिए लिखा जाता है, और आपकी ब्राउज़र को, इमेज की लोकेशन का पता देता है। src=" " लिखें और फिर कोटेशन मार्क्स (" ") के बीच में यूआरएल को पेस्ट कर दें। यहाँ पर एक उदाहरण दिया गया है: <img src="http://www.exampleimagehost.com/my-cute-dog.jpg"> वैसे तो तकनीकी रूप से आपके HTML के पास इमेज को दर्शाने के लिए सब कुछ मौजूद रहता है, लेकिन फिर भी साथ में एक alt एट्रिब्यूट को एड करना अच्छा माना जाता है। ये आपके ब्राउज़र को ये दर्शाता है, कि इमेज के लोड ना होने की स्थिति में ब्राउज़र पर क्या लिखा हुआ दर्शाना है। सबसे जरूरी कि ये आपके सर्च इंजन को उस इमेज के मूल कारण के बारे में बताता है और साथ ही स्क्रीन रीडर के जरिये किसी ऐसे विजिटर को इसकी जानकारी देने में मदद करता है, जिसकी आँखों की रौशनी कम हो चुकी है। इस उदाहरण में, कोटेशन मार्क्स के बीच में लिखे हुए भाग को बदलकर देखें:  <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="my dog eating a tangerine"> यदि पेज के कंटेंट के लिए वो इमेज बहुत ज्यादा जरूरी नहीं है, फिर alt एट्रिब्यूट को खाली (alt="") रहने दें। इस HTML फाइल को आपकी वेबसाइट पर सेव कर दें। आपके द्वारा एडिट किये हुए पेज पर जाएँ या यदि पेज पहले से खुला है, तो इसे रिफ्रेश कर दें। अब आप आपकी इमेज को देख सकेंगे। यदि ये इमेज गलत साइज़ में दिख रही है या फिर आपको सही नहीं लग रही है, तो फिर लेख के अगले भाग को पढ़ें। बेहतर रिजल्ट के लिए, फ्री एडिटिंग सॉफ्टवेयर की मदद से इमेज का साइज़ बदलें, फिर इस नये वर्जन को अपलोड कर दें। HTML पर width और height का इस्तेमाल, आपकी ब्राउज़र को, इमेज को छोटा या बड़ा करने की जानकारी देता है, और ये हर ब्राउज़र के लिए अलग-अलग होती है और (बहुत कम) डिस्प्ले एरर दर्शाता है। यदि आप जल्दी में सुधार करना चाह रहे हैं, तो इस फॉर्मेट का इस्तेमाल करें:   <img src="http://example.com/example.png" alt="display this" width=200 height=200> (Number of pixels, or the more phone-friendly "CSS pixels" in HTML5.)  या <img src="http://example.com/example.png" width=100% height=10%> (वेबपेज के माप का परसेंटेज या इमेज शामिल किये हुए HTML एलिमेंट का परसेंटेज।)  यदि आप सिर्फ एक एट्रिब्यूट (विड्थ ता हाइट) एंटर करते हैं, तो ब्राउज़र width:height रेश्यो को सुरक्षित रखेगा। title एट्रिब्यूट का इस्तेमाल, आपकी इमेज पर कोई अतिरिक्त कमेंट या अतिरिक्त जानकारी एड करने के लिए किया जाता है। उदाहरण के लिए, आप यहाँ पर इसके कलाकार को श्रेय दे सकते हैं। ज्यादातर मामलों में, जब भी कोई विजिटर इस इमेज के ऊपर माउस को लेकर जाता है, तो उसे यही टेक्स्ट नजर आता है। <img src="http://example.com/example.png" title="Photograph by J. Godfrey"> एक ऐसी इमेज, जो खुद ही एक लिंक का काम करती है, को तैयार करने के लिए,<a></a> हाइपरलिंक के बीच में एक इमेज टैग लिख दें। यहाँ पर एक उदाहरण मौजूद है: <a href="http://www.urloflink.com"><img src="http://urlofimage.com/image.gif"></a>
आपकी इमेज को अपलोड करें: आपकी HTML फाइल को खोलें:  img टैग से शुरुआत करें: आपकी इमेज का यूआरएल (URL) पायें: आपके यूआरएल को src एट्रिब्यूट में रखें: एक alt एट्रिब्यूट एड करें: आपके बदलावों को सेव करें: इमेज का साइज़ बदलें: एक tooltip एड करें: एक लिंक तैयार करें:
https://www.wikihow.com/Insert-Images-with-HTML https://www.wikihow.com/Insert-Images-with-HTML
Inserting the Image Optional Adjustments