यदि आप अपने मौजूदा एचटीएमएल वेब पेज में इमेज या ग्राफ़िक्स इन्सर्ट करना चाहते है. तो आप <img> टैग का उपयोग कर एचटीएमएल वेबपेज में इमेज, ग्राफ़िक्स, पिक्चर, आदि को मैन्युअल रूप से इन्सर्ट या एम्बेड कर सकते है। एचटीएमएल वेब पेज में img टैग एक आटोमेटिक क्लोजिंग टैग है, इसका मतलब है कि आपको इमेज टैग स्टार्ट करने के बाद इसे मैन्युअल रूप से क्लोज करने की आवश्यकता नहीं है।
So, let’s understand the usage of <img> tag in HTML web page in a better way.
- HTML <img> Basic Syntax.
<img src=”URL” alt=”Description” width=”Width” height=”Height”>
<img> Tag Attributes.
src (source) Image source.
इमेज src में मौजूदा वेब पेज में इन्सर्ट होने वाले इमेज सोर्स लोकेशन को मैन्युअल रूप से ऐड किया जाता है. यहाँ ये एड्रेस ऑनलाइन यूआरएल या आपके कंप्यूटर का ऑफलाइन लोकल ssd हार्ड ड्राइव एड्रेस सकता है.
- <img> Tag src Example.
<img src=”images/nature.jpg” alt=”A nature image”>
<img> Tag alt (alternative text) attributes.
मौजूदा वेब पेज में इन्सर्ट होने वाले इमेज के बारे में अल्टरनेटिव टेक्स्ट इनफार्मेशन जानकारी को ऐड या इंटरनेट यूजर को प्रदर्शित की जाती है. कई बार यदि ऐड वेबपेज इमेज रिमूव हो जाती है. तो ये अल्टरनेटिव टेक्स्ट इंटरनेट यूजर को इमेज के बारे में जानकरी प्रदर्शित करता है.
- <img> Tag alt text Example.
<img src=”images/logo.jpg” alt=”Company logo”>
Image width and height.
मौजूदा एचटीएमएल वेब पेज में इन्सर्ट या एम्बेड होने वाली इमेज पिक्सल में इमेज के डिफ़ॉल्ट हाइट और विड्थ डायमेंशन हाइट एंड विड्थ को ऐड किया जाता है। वेब डेवलपर वेबसाइट की जरूरत के अनुसार इमेज हाइट और विड्थ को एडजस्ट या css का उपयोग कर रेस्पॉन्सिव वेब पेज बना सकता है.
- <img> Tag width and height Example.
<img src=”images/map.jpg” alt=”Country Map” width=”500″ height=”500″>
Image title.
मौजूदा वेब पेज में इन्सर्टेड इमेज के बारे में एक एडिशनल टूलटिप जानकारी प्रदर्शित करता है. ये इमेज प्रॉपर्टीज तब डिस्प्ले होती है, जब वेबसाइट यूजर इमेज पर माउस को होवर करने पर टूलटिप की तरह ये इनफार्मेशन प्रदर्शित होती है।
- Image title Example.
<img src=”images/animal.jpg” alt=”A animal image” title=”group of animal image”>
Image loading attributes.
मौजूदा एचटीएमएल वेब पेज में आप इन्सर्ट या एम्बेड वेब पेज इमेज प्रॉपर्टीज को कस्टमाइज कर सकते है. डिफ़ॉल्ट इमेज आटोमेटिक बिहैवियर के साथ लोड होती है, आप अपनी जरूरत के अनुसार इमेज लोड प्रॉपर्टीज को लेज़ी या आटोमेटिक सेट कर सकते है.
Image loading values.
- Automatic – इस ऐट्रिब्यूट्स में आटोमेटिक इमेज डिफ़ॉल्ट बिहैवियर में लोड होती है।
- Lazy – या प्रॉपर्टीज मौजूदा एचटीएमएल वेब पेज में इमेज को लोड करने में समय लेता है, जब तक कि एम्बेड इमेज प्रॉपर्ली लोड न हो, जिससे की इमेज वेब पेज लैडिंग टाइम इम्प्रूव हो जाता है।
Image loading example.
<img src=”images/computer.jpg” alt=” desktop computer image” loading=”lazy”>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Image Tag Example</title>
<style>
.responsive-img {
max-width: 170%;
height: auto;
}
</style>
</head>
<body>
<h2>Let Try Multiple Image Tag Attributes</h2>
<img
src=”https://cdn.pixabay.com/photo/2022/10/11/12/38/dog-7514202_960_720.jpg”
alt=”Nice Black Dog Image”
width=”500″
height=”500″
title=”Black Dog Picture With Background”
loading=”lazy”
class=”responsive-img”
>
<h3>Nice Black Dog With Stunning Background</h3>
</body>
</html>
Use of <img> tag in HTML web page.
- Use descriptive alternative image text – एचटीएमएल वेब पेज में एम्बेड इमेज यूजर एक्सेस के लिए ऑल्ट टेक्स्ट इम्पोर्टेन्ट फीचर्स है। कई बार वेब पेज में इमेज प्रदर्शित नहीं होने पर मौजूदा इमेज के बारे में वेब यूजर को अल्टरनेटिव टेक्स्ट जानकारी प्रदर्शित करता है।
- Optimize images in seo – यह इन्सर्टेड या एम्बेड वेब पेज इमेज के लोडिंग समय को फ़ास्ट कर सर्च इंजन ऑप्टिमाइजेशन में इमेजेज को ऑप्टिमाइज़ करता है.
- Responsive web page images – इन्सर्टेड या एम्बेडेड एचटीएमएल वेब पेज इमेज साइज को रेस्पॉन्सिव कर अलग अलग स्क्रीन आकारों में समायोजित किया जाता है।
Image responsive example.
css
.responsive-img {
max-width: 100%;
height: auto;
}
- HTML Image Formats – आप अपने मौजूदा वेब पेज में कई इमेज फॉर्मेट को इन्सर्ट या एम्बेड करते समय में bmp, jpeg, gif, png, और वेक्टर इमेज में svg इमेज फॉर्मेट को मैन्युअल चुन सकते है.
