← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 10 of 26

HTML Images

कल्पना कीजिए एक art gallery में घूमना जहां सारे frames खाली हैं, और दीवार पर सिर्फ छोटे text descriptions हैं। यह एक बेहद boring experience होगा। HTML images आपकी gallery का artwork हैं। वे visual energy लाती हैं, complex guides को स्पष्ट करती हैं, और अपने readers को engaged रखने के लिए लंबे text blocks को तोड़ती हैं। images को सही तरीके से embed और optimize करना सीखकर, आप high-definition graphics display कर सकते हैं जो अपने webpage की loading speed को धीमा किए बिना mobile screens के लिए perfectly adapt हो जाती हैं।

In this page:

  1. img Tag से Images Embed करना
  2. Dimensions से Layout Shifts रोकना
  3. सबसे अच्छे Web Image Formats चुनना
  4. Figure के साथ Semantic Image Grouping
  5. Offscreen Images को Lazy Load करना
  6. srcset से Responsive Images
  7. Image Maps (map और area)
  8. Background बनाम Content Images
Syntax
markup 
<img src="image-url" alt="Alternative text" width="width" height="height">

img Tag से Images Embed करना

किसी webpage पर images display करने के लिए, आप img tag का उपयोग करते हैं। यह एक self-closing element है, यानी यह content को नहीं लपेटता और इसे closing tag की ज़रूरत नहीं होती।

यह file path की ओर इशारा करने के लिए src (source) attribute और accessibility के लिए graphic का वर्णन करने वाले alt (alternative text) attribute पर निर्भर करता है।

Note:
  • हर image के लिए स्पष्ट, contextual alt text लिखें ताकि screen readers और search bots आपके graphics को समझ सकें।
  • Accepted attributes:
  • src — image file का URL
  • alt — image लोड न होने पर या screen readers द्वारा पढ़े जाने के लिए text alternative
  • width / height — pixels में intrinsic size (integers, बिना units के)
  • loading — lazy | eager
Warning: alt attribute को छोड़ना एक accessibility violation है जो screen readers को raw image filename पढ़ने पर मजबूर करता है।

उदाहरण: Embedding Images with the img Tag

markup 
<img src="photo.jpg" alt="A photo description">

Dimensions से Layout Shifts रोकना

जब कोई image लोड होती है, तो उसे download होने में कुछ seconds लगते हैं। अगर आप HTML में इसकी width और height specify नहीं करते, तो ब्राउज़र को पता नहीं चलेगा कि कितनी जगह reserve करनी है, जिससे page layout इधर-उधर उछलने लगता है।

ये dimensions explicitly सेट करने से ब्राउज़र को पहले से ठीक-ठीक पता चल जाता है कि कितनी जगह lock करनी है।

Note:
  • HTML tags के अंदर हमेशा native aspect ratio वाली width और height integers के रूप में specify करें, और image को dynamically scale करने के लिए CSS का उपयोग करें।
  • Accepted attributes:
  • width — pixels में integer
  • height — pixels में integer
  • aspect ratio के ज़रिए ब्राउज़र को जगह reserve करने देने के लिए दोनों सेट करें
Warning: किसी विशाल file को छोटा करने के लिए HTML attributes का कभी उपयोग न करें; page load speeds तेज रखने के लिए पहले से ही अपनी images resize और optimize करें।

उदाहरण: Preventing Layout Shifts with Dimensions

markup 
<img src="photo.jpg" alt="Photo" width="600" height="400">

सबसे अच्छे Web Image Formats चुनना

Web performance काफी हद तक सही image format चुनने पर निर्भर करती है।

Photographic content के लिए JPEG, transparent logos के लिए PNG, scalable vector icons के लिए SVG, और file sizes छोटा व load speeds तेज़ रखने वाले rich compression के लिए WebP या AVIF जैसे modern formats का उपयोग करें।

Note: server bandwidth बचाने और अपने core web vital metrics सुधारने के लिए अपनी standard legacy files को WebP format में convert करें।
Warning: TIFF या BMP जैसे heavy print formats का उपयोग करने से बचें क्योंकि कई modern browsers इन्हें natively render नहीं कर सकते।

उदाहरण: Choosing the Best Web Image Formats

markup 
<img src="photo.jpg" alt="Photo">
<img src="logo.png" alt="Logo">
<img src="icon.svg" alt="Icon">
<img src="banner.webp" alt="Banner">

Figure के साथ Semantic Image Grouping

किसी image को visible text caption के साथ bundle करने के लिए, आपको semantic figure और figcaption elements का उपयोग करना चाहिए।

यह image और उसके text को एक single, self-contained unit में लपेटता है, जो search engines और assistive devices को बताता है कि text सीधे image का वर्णन करता है।

Note: figcaption tag को parent figure tag के अंदर सबसे ऊपर या सबसे नीचे रखें।
Warning: अपनी images के नीचे captions के रूप में standard, disconnected paragraphs का उपयोग न करें, क्योंकि browsers उन्हें semantically link नहीं कर सकते।

उदाहरण: Semantic Image Grouping with Figure

markup 
<figure>
  <img src="chart.jpg" alt="Sales chart">
  <figcaption>Quarterly sales chart</figcaption>
</figure>

Offscreen Images को Lazy Load करना

अगर किसी page में कई images हैं, तो उन सभी को एक साथ download करना initial load speed को धीमा कर सकता है। loading="lazy" attribute जोड़कर, आप ब्राउज़र को निर्देश देते हैं कि जब तक user scroll करके पास न आए, तब तक image लोड करने में देर करे।

Note:
  • fold के नीचे स्थित सभी images के लिए lazy loading का उपयोग करें, लेकिन इसे page के बिल्कुल ऊपर वाली hero images पर apply न करें।
  • Accepted values:
  • loading — lazy | eager (default)
  • iframe पर भी valid
  • fetchpriority — high | low | auto
Warning: viewport में दिखने वाली images पर lazy loading apply करने से initial rendering times बढ़ सकते हैं और आपका web vitals score कम हो सकता है।

उदाहरण: Lazy Loading Offscreen Images

markup 
<img src="offscreen.jpg" alt="Offscreen image" loading="lazy">

srcset से Responsive Images

srcset attribute आपको अलग-अलग screen resolutions के लिए अलग-अलग image sizes देने देता है। ब्राउज़र स्वचालित रूप से सबसे उपयुक्त size चुनता है और mobile devices पर bandwidth बचाता है।

Note:
  • important images के लिए हमेशा कम से कम 1x और 2x version दें ताकि retina screens पर वे ठीक दिखें।
  • Accepted attributes:
  • srcset — w या x descriptors वाले comma-separated URLs
  • sizes — slot widths वाली media conditions, जैसे (max-width: 600px) 100vw, 50vw
  • src — fallback image URL
Warning: srcset के बिना, mobile users पूरे desktop-sized images download करते हैं जिससे उनका data बर्बाद होता है।

उदाहरण: Responsive Images with srcset

markup 
<img src="photo.jpg" srcset="photo.jpg 1x, [email protected] 2x" alt="Photo">

Image Maps (map और area)

एक image map आपको map element को हर clickable shape define करने वाले area tags के साथ मिलाकर, किसी single image के अलग-अलग regions को अलग-अलग clickable links में बदलने देता है।

यह किसी diagram जैसी चीज़ के लिए उपयोगी है जहां अलग-अलग हिस्से अलग-अलग pages से link हों।

Note:
  • हर area element में हमेशा एक alt attribute जोड़ें ताकि screen reader users को समझ आए कि हर clickable region क्या करता है।
  • Accepted attributes:
  • map name — usemap="#name" द्वारा referenced identifier
  • area shape — rect | circle | poly | default
  • area coords — shape के अनुसार comma-separated numbers
  • area href / alt — link target और आवश्यक alt text
Warning: Image maps fixed pixel coordinates का उपयोग करते हैं, इसलिए जब तक सावधानी से handle न किया जाए, वे responsive layouts पर अच्छी तरह resize नहीं होते।

उदाहरण: Image Maps (map and area)

markup 
<img src="diagram.jpg" alt="Diagram" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="0,0,100,100" href="part1.html" alt="Part 1">
</map>

Background बनाम Content Images

img tag से जोड़ी गई एक content image page के असल अर्थ का हिस्सा होती है और उसके पास हमेशा descriptive alt text होना चाहिए — जैसे product photos या diagrams।

CSS background-image से जोड़ी गई एक background image विशुद्ध decorative styling है और screen readers के लिए invisible होती है, जो subtle patterns या hero section backdrops जैसी चीज़ों के लिए बिल्कुल सही है।

Note: खुद से पूछें कि क्या image हटाने से meaningful जानकारी खो जाएगी — अगर हां, तो यह CSS में नहीं, img tag में होनी चाहिए।
Warning: CSS backgrounds में meaningful content-carrying images डालने से वे screen readers और search engines से पूरी तरह छिप जाती हैं।

उदाहरण: Background vs Content Images

markup 
<img src="product.jpg" alt="Red running shoe">
<div style="background-image: url('pattern.png');"></div>
Live Example
Related Topics

HTML रिस्पॉन्सिव इमेजेस · HTML Links · HTML RGB Colors · HTML CSS

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Link Bookmarks Next Lesson → HTML Background Images

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.