HTML टैग: संपूर्ण गाइड

on

HTML <IMG> टैग: संपूर्ण गाइड

मुख्य बातें

HTML <IMG> टैग वेबपेज पर images को display करने के लिए उपयोग किया जाता है। यह एक self-closing या empty tag है, जिसका मतलब यह है कि इसका closing tag नहीं होता है। यह tag images को technically insert नहीं करता, बल्कि images को web pages से link करता है।

Adding an image in HTML using the <img> tag with src, alt, and width attributes in Visual Studio Code

HTML <IMG> टैग की Syntax

बुनियादी Syntax

xml

<img src="image.png" alt="image description">

Complete Syntax with Attributes

xml

<img src="image.png" alt="image description" width="200" height="100">

मुख्य Attributes

1. SRC Attribute (आवश्यक)

  • Purpose: Image की location या path specify करता है

  • Types:

    • Relative URL: src="images/photo.jpg" (local files के लिए)

    • Absolute URL: src="https://example.com/image.jpg" (external images के लिए)

Example:

xml

<img src="photos/sunset.jpg" alt="Sunset"> <img src="https://example.com/logo.png" alt="Company Logo">

2. ALT Attribute (आवश्यक)

  • Purpose: Alternative text provide करता है जो image load नहीं होने पर दिखाई देता है

  • Uses:

    • Screen readers के लिए accessibility

    • SEO के लिए helpful

    • Network failure की स्थिति में backup text

Comparison of screen reader output for images without alt text (reads file name) versus with alt text (reads descriptive text)

3. WIDTH और HEIGHT Attributes

  • Purpose: Image का size control करते हैं

  • Units: Pixels में specify करते हैं

  • Benefits:

    • Page loading के दौरान space reserve करता है

    • Aspect ratio maintain करने में helpful

Example:

xml

<img src="photo.jpg" alt="Photo" width="300" height="200">

कैसे काम करता है <IMG> Tag?

Working Process:

  1. Placeholder Creation: <IMG> tag webpage में एक placeholder space बनाता है

  2. Image Loading: जब webpage load होता है, browser उस moment image को web server से fetch करता है

  3. Display: Browser image को placeholder space में insert करके display करता है

  4. Fallback: यदि image load नहीं हो सकती, तो ALT text display होता है

Image Loading States:

StateDisplaySuccessful LoadingImage properly displayedLoading FailedALT text या broken link iconNetwork IssuesALT text with placeholder

Advanced Attributes

Modern HTML5 Attributes:

AttributePurposeExampleloadingLazy loading enable करता हैloading="lazy"srcsetHigh-resolution devices के लिएsrcset="image-2x.jpg 2x"crossoriginCORS control के लिएcrossorigin="anonymous"referrerpolicySecurity के लिएreferrerpolicy="no-referrer"

Legacy Attributes (अब deprecated):

  • ALIGN: CSS के साथ replace करें

  • BORDER: CSS border property use करें

  • HSPACE/VSPACE: CSS margin/padding use करें

Supported Image Formats

FormatFull NameBest Use CaseJPG/JPEGJoint Photographic Expert GroupPhotos, bannersPNGPortable Network GraphicsTransparency वाले imagesGIFGraphics Interchange FormatAnimated imagesSVGScalable Vector GraphicsLogos, iconsWebPWeb PictureModern format, better compression

Best Practices

1. हमेशा ALT Text Use करें

xml

<!-- सही तरीका --> <img src="product.jpg" alt="Red sports car"> <!-- गलत तरीका --> <img src="product.jpg">

2. Width और Height Specify करें

यह page loading के दौरान layout shifts को prevent करता है:

xml

<img src="banner.jpg" alt="Website Banner" width="800" height="200">

3. Lazy Loading Use करें

xml

<img src="image.jpg" alt="Description" loading="lazy">

4. Responsive Images के लिए

xml

<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" alt="Responsive image">

CSS के साथ Styling

Basic Styling:

css

img { width: 200px; height: auto; border: 2px solid #333; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }

Responsive Images:

css

img { max-width: 100%; height: auto; }

Common Issues और Solutions

1. Broken Images

  • Problem: Image display नहीं हो रही

  • Solution: Correct path check करें और ALT text add करें

2. Slow Loading

  • Problem: Large images slow करती हैं page को

  • Solution: Optimize image size और lazy loading use करें

3. Layout Shifts

  • Problem: Images load होने पर layout jump करता है

  • Solution: Width और height attributes specify करें

HTML <IMG> tag web development का एक fundamental element है जो websites को visually appealing और informative बनाता है। Proper attributes के साथ इसका सही उपयोग करके आप user experience और website performance दोनों को improve कर सकते हैं।

HTML <IMG> टैग: संपूर्ण गाइड

  1. https://www.geeksforgeeks.org/html/html-img-tag/

  2. https://www.freecodecamp.org/news/img-html-image-tag-tutorial/

  3. https://www.ionos.com/digitalguide/websites/web-development/img-tag-in-html/

  4. https://www.w3schools.com/tags/tag_img.asp

  5. https://www.w3schools.com/html/html_images.asp

  6. https://www.w3schools.com/tags/att_img_src.asp

  7. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img

  8. https://cloudinary.com/guides/image-effects/html-image-tag

  9. https://tutorial.techaltum.com/html-image.html

  10. https://www.homeandlearn.co.uk/WD/wds4p4.html

  11. https://mimo.org/glossary/html/images

  1. https://www.wufoo.com/html5/heightwidth-attributes/

Comments

Post a Comment