Adding images with img Html In Hindi
एचटीएमएल5 वेब पेज में इमेज टैग का उपयोग वेब पेज वेबसाइट में डिजायर इमेज, ग्राफ़िक, पिक्चर, को इन्सर्ट या एम्बेड करने के लिए किया जाता है। वेब पेज में इमेज एक ग्राफिकल बैकग्राउंड या इमेज ऑब्जेक्ट है, जो रिलेटेड वेब पेज ऑब्जेक्ट को इंडीकेट करते है, सामान्यता, एचटीएमएल5 में इमेज टैग इनलाइन टैग की तरह उपयोग होता है. जो एचटीएमएल5 डेवलपर को मौजूदा वेबपेज में इमेज, ग्राफ़िक्स और अन्य किसी भी प्रकार के ग्राफिकल इमेज ऑब्जेक्ट को डायरेक्ट एम्बेड और इंसर्शन फीचर्स प्रदान करता है।
So let’s know the process of inserting image in HTML5 web page.
Image insert basic syntax in HTML5.
<img src=”URL” alt=”image text description”>
HTML5 Image Tag Attributes.
- Image src attribute – एचटीएमएल5 वेब पेज में इन्सर्ट इमेज का यूआरएल एड्रेस को इंडीकेट किया जाता है, इमेज src ऐट्रिब्यूट्स में आप उस वेबसाइट इमेज यूआरएल लोकेशन को ऐड करते है, जहा से इमेज वेब पेज में डिस्प्ले होगी।
- Image alt attribute – इमेज ऑल्ट ऐट्रिब्यूट्स वेब डेवलपर को मौजूदा वेब पेज में इमेज के बार में ऑल्ट टेक्स्ट इनफार्मेशन डिस्प्ले करता है, यह तब काम करता है, जब इमेज किसी कारण वेब पेज में डिस्प्ले नहीं होती है, इमेज ऑल्ट टेक्स्ट seo के लिए एक बेस्ट प्रैक्टिस है, यह वेब पेज को इमेज ऑल्ट के अकॉर्डिंग seo से सर्च इंजन में रैंक करती है।
Attributes for HTML5 <img> tag.
Image src (source).
जैसा की पूर्व में इमेज src सोर्स ऑनलाइन या ऑफलाइन वेब पेज एड्रेस लोकेशन है, जहा वेब पेज में इन्सर्ट होने वाले इमेज की डिटेल लोकेशन या पथ इंडीकेट की जाती है , यहाँ इमेज सोर्स लोकेशन अब्सोलुट या रिलेटिव आर्डर में हो सकती है।
Image src attributes example.
<img src=”graphics/logo.jpg” alt=”Company Logo”>
Image alt (alternative text) description.
मौजूदा वेब पेज में उपयोग होने वाले इमेज के ऑल्ट डिस्क्रिप्शन इनफार्मेशन को डिस्प्ले किया जाता है, इमेज ऑल्ट डिस्क्रिप्शन सामान्यता वेब पेज में स्क्रीन रीडर सॉफ्टवेयर के द्वारा रीड किया जाता है। इसके अलावा ऑनलाइन seo में इमेज को सर्च इंजन रैंकिंग में सहायता करता है।
Image alt description example.
<img src=”map.jpg” alt=”Contact Map”>
Image width and height.
मौजूदा वेब पेज में इन्सर्ट की जाने वाली इमेज के डिफ़ॉल्ट पिक्सेल साइज में इमेज को कस्टम हाइट और विड्थ के अनुसार एडजस्ट कर वेब पेज में एम्बेड किया जाता है। इमेज हाइट एंड विड्थ ऐट्रिब्यूट्स वेब डेवलपर को पर्टिकुलर में डिजायर आकार में इमेज को बड़े से छोटे आकार में प्रीव्यू करने में हेल्प करते है।
Image height and width attributes example.
<img src=”india.jpg” alt=”india map” width=”400″ height=”270″>
Image title.
मौजूदा एचटीएमएल5 वेब पेज में इन्सर्ट होने वाली इमेज के बारे में इमेज टाइटल इनफार्मेशन डिस्प्ले करता है, जहा इमेज टाइटल को वेब पेज में टूलटिप के रूप में डिस्प्ले किया जाता है, और यह तब काम करता है, जब इंटरनेट यूजर वेब पेज पर इमेज को माउस पॉइंटर से होवर करता है।
Image title attributes Example.
<img src=”logo.jpg” alt=”Vcanhelpsu logo” title=”Company Logo Image”>
Image loading attributes.
मौजूदा एचटीएमएल5 वेब पेज में इन्सर्ट होने वाले इमेज के टाइम को कण्ट्रोल कर सकते है कि एम्बेड इमेज कब और कैसे लोड होनी चाहिए।
Image loading attributes.
- Image eager (default) attributes – यह ऐट्रिब्यूट्स वेब पेज में इमेज को इमीडियेट लोड कर देगा।
- Image lazy attributes – यह ऐट्रिब्यूट्स मौजूदा वेब पेज में इमेज को तब लोड करता है, जब इमेज व्यूपोर्ट मोड में होती है।
Image loading tag example.
<img src=”logo.jpg” alt=”Logo Image” loading=”lazy”>
Image srcset and size attributes.
मौजूदा एचटीएमएल5 वेब पेज में रेस्पॉन्सिव इमेज एम्बेड करने के लिए उपयोग करे। इमेज srcset ऐट्रिब्यूट्स वेब डेवलपर को अलग-अलग इमेज डिस्प्ले कंडीशन जैसे, स्क्रीन आकार लैपटॉप, डेस्कटॉप, टेबलेट, मोबाइल के लिए अलग-अलग इमेज को रेस्पॉन्सिव इन्सर्ट फीचर्स प्रदान करता है।
Image srcset attributes example.
<img src=”small.jpg”
srcset=”large.jpg 980w, medium.jpg 700w, small.jpg 240w”
sizes=”(max-width: 1000px) 120vw, 70vw”
alt=”Responsive Image”>
Know all the above image attributes or properties.
Basic Image Embed Example.
<img src=”graphics/computer.jpg” alt=”desktop image” title=”nice desktop image”>
Image height and width properties.
<img src=”graphics/city.jpg” alt=”A City Image” width=”800″ height=”700″>
Image tooltip properties.
<img src=”graphics/computer.jpg” alt=”desktop image” title=”nice desktop image”>
Responsive Image Properties.
<img src=”graphics/html.jpg”
srcset=”graphics/html-large.jpg 1400w, graphics/html-medium.jpg 900w, graphics/html-small.jpg 400w”
sizes=”(max-width: 800px) 200vw, 100vw”
alt=”full responsive image”>
Image lazy-loading properties.
<img src=”graphics/image.jpg” alt=”nice image” loading=”lazy”>
Html5 image attributes example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML5 Image Tag</title>
</head>
<body>
<h1>Let Tray Some Image Attributes</h1>
<img
src=”https://cdn.pixabay.com/photo/2022/10/23/13/43/canoe-7541311_1280.jpg”
alt=”Nice Boat Image”
width=”700″
height=”500″
loading=”lazy”>
<p>Basic Image Embed Example. </p>
<img src=”graphics/computer.jpg” alt=”desktop image” title=”nice desktop image”>
<p>Image height and width properties. </p>
<img src=”graphics/city.jpg” alt=”A City Image” width=”800″ height=”700″>
<p>Image tooltip properties. </p>
<img src=”graphics/computer.jpg” alt=”desktop image” title=”nice desktop image”>
</body>
</html>
