How to insert image in html

इस HTML Tutorial in Hindi में आप सीखेंगे की HTML में images को कैसे insert किया जाता है | ( How to insert image in HTML )

Images web pages को colorful और interesting बनाकर उनके visual appearance को बढाती है |

HTML Document में images को insert करने के लिए <img> tag का use किया जाता है | यह एक empty element है और इसमें only attributes ही होते है | निचे image tag का syntex दिया गया है |

<img src="image path" alt="some text for an image">

निचे दिया गया example web page पर two images को insert करेगा |

<img src="https://techsamundra.com/wp-content/uploads/2022/02/Title-Attribute.jpg" alt="Tech Samundra Logo">
<img src="thumbnail.jpg" alt="Image tag thumbnail">

एक img tag में कम से कम यह दो attributes होने ही चाहिए : src attribute और alt alt attribute.

src attribute web browser को बताता है की हमें image file को कहा से लेनी है | src attribute की value, image file का url path होता है |

जबकि, alt attribute image के लिए एक वैकल्पिक ( alternative ) text प्रदान करता है | जब किसी कारन की वजह से image web page पेज पर proper तरीके से load नहीं हो पाती है तब alt tag उस image के जगह alternative text को display करवाता है | alt tag में लिखा जाने वाला alternative text उस image के लिए meaningful होना चाहिए ताकि visitors को पता चले की जो image proper load नहीं हो पाई है वह image किसके बारे मे थी |

Note : Image web page पर load नहीं होने के बहुत से कारण हो सकते है, जैसे की internet connection slow होना, image tag में जो url दिय है उस url path पर वह image available नहीं होना etc. इन सारी condition में alt tag alternative text को उस image के option में display करता है |

HTML me Image ki Width aur Hight set kaise karen

HTML में image की width और height set करने के लिए width attribute और height attribute का use किया जाता है | width attribute and height attribute की value by default pixels में define होती है | लेकिन आप इसे percentage (%) , Points (pt) और इसके आलावा कई अन्य units है जिन का use करके भी width और height define कर सकते है |

हम इसे निचे दिए गए examples की help से अधिक बहेतर तरीके से समझने की कोशिश करते हैं |

<img src="images/example1.jpg" alt="This is image 1" width="300" height="200">
<img src="images/example2.jpg" alt="This is image 2" width="300px" height="200px">
<img src="images/example3.jpg" alt="This is image 3" width="15%" height="10%">
<img src="images/example4.jpg" alt="This is image 4" width="25pt" height="20pt">
<img src="images/example5.jpg" alt="This is image 5" width="25em" height="20em">

आप image के लिए width और height – inline styles , internal styles , या external stylesheet के जरिये भी define कर सकते है |

How to insert images in HTML5 using <picture> Tag

कभी कबार image को up या down scale करना अपेक्षा मुजब difrent devices या screen size के viewport में fit नहीं होता है | साथ ही, कई बार width attribute और height attribute का use करके image की dimention कम करने से web browser original file की size कम नहीं कर पता है | जिसकी वजह से image web page पर अपने original width और height के साथ display होता है, जो हमारे HTML page layout को ख़राब कर सकता है |

इसी problem को दूर करने के लिए HTML5 ने <picture> tag को introduce किया | <picture> tag का use responsive website में किया जाता है, जहा different images को devices के screen sizes के आधार पर load करवाई जाती है | <picture> tag में zero या उससे अधिक <source> tag और एक <img> tag होता है |

Viewport के अनुसार अलग-अलग <source> tag से matching image को load किया जाएगा और यदि कसी भी <source> tag में matching image नहीं होगी तो <img> tag से image web browser पर display होगी |

<picture>
   <source media="(min-width: 700px)" srcset= "logo1.png"> 
   <source media="(min-width: 450px)" srcset= "logo2.png">
   <img src= "default-logo.png" alt="Default Logo">
</picture>

ऊपर दिए गए example में <picture> tag में two <source> tag use में लिए है , जिसमे सबसे पहले <source> tag में media attribute में min-width 700 pixels define की है और srcset में logo1.png file का path set किया है | इसका मतलब यह है की यदि किसी device की screen size कमसे कम 7000 pixels या उससे अधिक है तो उस device में logo1.png file को load की जायेगी | उसी तरह second <source> tag के अनुसार यदि किसी device की screen size 450 pixels या उससे अधिक है तो logo2.png file को load की जायेगी | last में यदि कोई device की size यह दोनों <source> tag की condition को fulfill नहीं करता है तो <img> tag में set किये गए path से default-logo.png image को web browser में load करवाई जायेगी |

Image map in HTML in Hindi

HTML image map का use image पर clickable area बनाने के लिए किया जाता है | Image map image को separate image file में convert किये बिना image के various parts पर link set करने का easy way प्रदान करता है |

Example of Image Map

<img src="computer-parts.png" usemap="#items" alt="Computer Parts">
<map name="items">
    <area shape="rect" coords="130,231,71" href="monitor.html" alt="Monitor">
    <area shape="circle" coords="363,146,273,302,452,300" href="mouse.html" alt="Mouse">
    <area shape="rect" coords="520,160,641,302" href="keyboard.html" alt="Keyboard">
</map>

Output

<map> tag का name attribute का use <img> tag के usemap attribute का use करके image map को reference करना है | Image पर clickable area को define करने के लिए <map> element के अंदर <area> tag का use किया जाता है | आप image पर आवश्यकता के अनुसार numbers of clickable area define कर सकते है |