• <img> ట్యాగ్ అనాటమీ: Void Element స్వభావం మరియు src, alt ఆట్రిబ్యూట్ల ప్రాథమిక నిర్మాణం.
• alt ఆట్రిబ్యూట్ ప్రాముఖ్యత: Accessibility (స్క్రీన్ రీడర్స్), బ్రోకెన్ ఇమేజ్ ఫాల్‌బ్యాక్ మరియు Google Image SEO.
• width, height మరియు CLS: లేఅవుట్ జంపింగ్ (Cumulative Layout Shift) బగ్‌ను నివారించే శాస్త్రీయ సూత్రాలు.
• loading="lazy" మ్యాజిక్: జీరో జావాస్క్రిప్ట్ తో వెబ్‌సైట్ లోడింగ్ స్పీడ్‌ను 3 రెట్లు పెంచే నేటివ్ లేజీ లోడింగ్.
• ఆధునిక ఇమేజ్ ఫార్మాట్ల పోలిక: JPEG vs PNG vs WebP vs SVG వెక్టార్ గ్రాఫిక్స్.
• రెస్పాన్సివ్ ఇమేజెస్ (srcset & sizes): మొబైల్, టాబ్లెట్, డెస్క్‌టాప్ స్క్రీన్లకు వేర్వేరు సైజుల ఇమేజెస్ అందించే పద్ధతి.
• <picture> ట్యాగ్ & ఆర్ట్ డైరెక్షన్: స్క్రీన్ ఓరియంటేషన్ మార్చినప్పుడు వేర్వేరు ఫోటోలను చూపించడం మరియు ఫార్మాట్ ఫాల్‌బ్యాక్స్.

HTML లో చిత్రాన్ని పేజీలో చేర్చడానికి <img> ట్యాగ్‌ను ఉపయోగిస్తాం. ఇది కంటెంట్ లేని Void Element (స్వీయ-ముగింపు ట్యాగ్). కాబట్టి దీనికి </img> అనే ముగింపు ట్యాగ్ రాయకూడదు:

బ్రౌజర్ ఇమేజ్‌ను ఎలా లోడ్ చేస్తుంది? (How Browsers Fetch Images):

ఇమేజ్ అనేది HTML ఫైల్ లోపల నేరుగా ఉండదు! src (Source) ఆట్రిబ్యూట్ లో ఆ ఇమేజ్ ఎక్కడ భద్రపరచబడి ఉందో పాత్ (చిరునామా) ఇస్తాం. బ్రౌజర్ HTML కోడ్‌ను చదువుతున్నప్పుడు <img> ట్యాగ్ కనిపించగానే, ఆ సర్వర్‌కు ప్రత్యేకంగా ఒక నెట్‌వర్క్ రిక్వెస్ట్ పంపి, చిత్రాన్ని డౌన్‌లోడ్ చేసుకుని పేజీలో అమర్చుతుంది.

చాలామంది బిగినర్స్ alt ఆట్రిబ్యూట్‌ను ఖాళీగా వదిలేస్తారు లేదా అస్సలు రాయరు. కానీ ప్రొఫెషనల్ వెబ్ డెవలప్‌మెంట్‌లో alt లేకుండా ఇమేజ్ రాయడం తీవ్రమైన తప్పు!

మీరు ఎప్పుడైనా మొబైల్‌లో ఒక వార్తా కథనం చదువుతున్నప్పుడు, అకస్మాత్తుగా పైన ఒక యాడ్ లేదా ఫోటో లోడ్ అయి, మీరు చదువుతున్న టెక్స్ట్ అమాంతం కిందకు జారిపోయిందా? మీరు పొరపాటున వేరే లింక్‌పై క్లిక్ చేసి విసుక్కున్నారా?

దీనినే గూగుల్ CLS (Cumulative Layout Shift - లేఅవుట్ జంపింగ్ బగ్) అంటారు. దీనివల్ల వెబ్‌సైట్ Core Web Vitals స్కోరు దెబ్బతింటుంది.

<!-- ఇమేజ్ డౌన్‌లోడ్ కాకముందే బ్రౌజర్ ఖాళీ స్థలాన్ని రిజర్వ్ చేస్తుంది -->
<img src="hero-banner.webp" alt="హీరో బ్యానర్" width="1200" height="600" />

ఒక సుదీర్ఘమైన బ్లాగ్ పోస్ట్‌లో 25 ఇమేజెస్ ఉన్నాయనుకోండి. యూజర్ పేజీ ఓపెన్ చేయగానే స్క్రీన్ పైభాగంలో మొదటి 2 ఫోటోలు మాత్రమే కనిపిస్తాయి. మిగిలిన 23 చిత్రాలు పేజీ అట్టడుగున ఉంటాయి. అయినా సరే బ్రౌజర్ ఆ 25 చిత్రాలను ఒకేసారి డౌన్‌లోడ్ చేయడం ప్రారంభిస్తే వెబ్‌సైట్ విపరీతమైన లాగ్ అవుతుంది!

దీనికి పరిష్కారంగా ఆధునిక HTML5 లో Native Lazy Loading ప్రవేశపెట్టబడింది:

<!-- స్క్రీన్ కింద ఉండే ఇమేజెస్‌కు loading="lazy" వాడాలి -->
<img src="footer-photo.webp" alt="క్యాంపస్ ఫోటో" width="800" height="400" loading="lazy" />

• loading="lazy": వినియోగదారుడు స్క్రోల్ చేస్తూ ఆ ఇమేజ్ దగ్గరకు వచ్చే వరకు బ్రౌజర్ దానిని డౌన్‌లోడ్ చేయదు! దీనివల్ల మొబైల్ డేటా ఆదా అవుతుంది, పేజీ తక్షణమే లోడ్ అవుతుంది.
• loading="eager": పేజీ ఓపెన్ కాగానే వెంటనే డౌన్‌లోడ్ చేస్తుంది (పేజీ పైభాగంలో ఉండే Hero Banner కి ఇది వాడతారు).

వెబ్ డెవలప్‌మెంట్‌లో సరైన ఇమేజ్ ఫార్మాట్‌ను ఎంచుకోవడం సైట్ వేగాన్ని నిర్ణయిస్తుంది:

డెస్క్‌టాప్ కంప్యూటర్‌లో 27 అంగుళాల మానిటర్ ఉంటుంది, కానీ మొబైల్ ఫోన్‌లో కేవలం 6 అంగుళాల స్క్రీన్ ఉంటుంది. డెస్క్‌టాప్ కోసం తయారుచేసిన 2MB భారీ ఫోటోను చిన్న మొబైల్‌కు పంపడం అన్యాయం కదా!

దీనిని పరిష్కరించడానికి srcset ఆట్రిబ్యూట్ ద్వారా మనం బ్రౌజర్‌కు వేర్వేరు పరిమాణాల చిత్రాల మెనూను అందిస్తాం:

<img src="hero-medium.jpg"
     srcset="hero-small.jpg 480w,
             hero-medium.jpg 800w,
             hero-large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1000px) 800px,
            1200px"
     alt="రెస్పాన్సివ్ ల్యాండ్‌స్కేప్ ఫోటో"
     loading="lazy" />

ఇది ఎలా పని చేస్తుంది? బ్రౌజర్ యూజర్ యొక్క మొబైల్ స్క్రీన్ వెడల్పును మరియు ఇంటర్నెట్ స్పీడ్‌ను స్వయంగా లెక్కించి, మొబైల్ అయితే hero-small.jpg ని, పెద్ద కంప్యూటర్ అయితే hero-large.jpg ని ఆటోమేటిక్‌గా డౌన్‌లోడ్ చేసుకుంటుంది!

srcset కేవలం ఒకే ఫోటో యొక్క వేర్వేరు సైజులను మాత్రమే ఎంచుకుంటుంది. కానీ మొబైల్ ఫోన్ నిలువుగా (Portrait) ఉంటుంది, ల్యాప్‌టాప్ అడ్డంగా (Landscape) ఉంటుంది. ల్యాప్‌టాప్‌లో అందంగా కనిపించే వైడ్ యాంగిల్ ఫోటోను మొబైల్‌లో చూపిస్తే అందులోని మనుషులు చీమలంత చిన్నగా కనిపిస్తారు!

మొబైల్ కోసం క్లోజప్ క్రాప్ చేసిన ఫోటో, డెస్క్‌టాప్ కోసం వైడ్ ఫోటో చూపించడాన్ని Art Direction అంటారు. దీనిని <picture> ట్యాగ్ ద్వారా సాధిస్తాం:

<picture>
  <!-- మొబైల్ స్క్రీన్‌లలో నిలువు క్లోజప్ ఫోటో చూపించు -->
  <source media="(max-width: 600px)" srcset="person-close-crop.webp" />

  <!-- డెస్క్‌టాప్ స్క్రీన్‌లలో వైడ్ ల్యాండ్‌స్కేప్ ఫోటో చూపించు -->
  <source media="(min-width: 601px)" srcset="person-wide-landscape.webp" />

  <!-- పాత బ్రౌజర్ల కోసం ఫాల్‌బ్యాక్ ఇమేజ్ -->
  <img src="person-fallback.jpg" alt="వ్యక్తి ప్రొఫైల్ ఫోటో" width="800" height="500" />
</picture>

పుస్తకాల్లో లేదా వార్తా పత్రికల్లో బొమ్మల కింద "చిత్రం 1.2: ఇస్రో రాకెట్ ప్రయోగం" అని వివరణాత్మక క్యాప్షన్ రాస్తారు కదా. HTML5 లో దీనికోసం ప్రత్యేకమైన సెమాంటిక్ ట్యాగ్స్ ఉన్నాయి:

<figure style="margin:20px 0; text-align:center;">
  <img src="rocket-launch.webp" alt="శ్రీహరికోట నుండి రాకెట్ నింగిలోకి దూసుకుపోతున్న దృశ్యం" width="600" height="350" style="border-radius:8px;" />
  <figcaption style="font-size:13.5px; color:#64748b; margin-top:8px;">
    చిత్రం 1.1: శ్రీహరికోట సతీష్ ధావన్ స్పేస్ సెంటర్ నుండి విజయవంతంగా నింగిలోకి దూసుకెళ్లిన PSLV రాకెట్.
  </figcaption>
</figure>

<figure> మొత్తం ఇమేజ్ బ్లాక్‌ను సూచిస్తే, <figcaption> ఆ చిత్రానికి సంబంధించిన అధికారిక క్యాప్షన్‌ను సెమాంటిక్‌గా బ్రౌజర్‌కు తెలుపుతుంది.

ఈ అధ్యాయంలో మనం నేర్చుకున్న img, loading="lazy", figure, మరియు ఇన్‌లైన్ SVG వెక్టార్ ఐకాన్‌లను కలిపి ఒక పరిపూర్ణ కోడ్‌ను పరిశీలిద్దాం:

<!DOCTYPE html>
<html lang="te">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML5 ఇమేజెస్ & SVG మాస్టర్ డెమో</title>
  </head>
  <body style="font-family:sans-serif; padding:20px; color:#0f172a;">
    <h1>ఆధునిక ఇమేజెస్ & వెక్టార్ గ్రాఫిక్స్</h1>

    <!-- 1. ఇన్-లైన్ SVG వెక్టార్ ఐకాన్ (ఎంత జూమ్ చేసినా పగలదు) -->
    <div style="display:flex; align-items:center; gap:10px; margin-bottom:20px;">
      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
      </svg>
      <strong style="font-size:18px; color:#059669;">ప్రీమియం వెబ్ డెవలప్‌మెంట్ ట్యుటోరియల్</strong>
    </div>

    <!-- 2. Semantic Figure with Captions & Lazy Loading -->
    <figure style="margin:0; background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:16px; max-width:640px;">
      <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600&auto=format&fit=crop&q=80" 
           alt="కోడింగ్ చేస్తున్న వెబ్ డెవలపర్ ల్యాప్‌టాప్ దృశ్యం" 
           width="600" 
           height="380" 
           loading="lazy" 
           style="width:100%; height:auto; border-radius:8px; display:block;" />
      <figcaption style="margin-top:12px; font-size:13.5px; color:#64748b; text-align:center;">
        చిత్రం 1.1: ఆధునిక వెబ్ ప్రమాణాలతో HTML5, CSS3 కోడింగ్ ప్రాక్టీస్.
      </figcaption>
    </figure>
  </body>
</html>

బ్రౌజర్‌లో ఇది ఎలా కనిపిస్తుంది? (Visual Preview):

ఇమేజెస్‌తో పనిచేసేటప్పుడు బిగినర్స్ తరచుగా చేసే 5 పెద్ద తప్పులు మరియు వాటి నివారణలు:

❌ తప్పు 1: alt ఆట్రిబ్యూట్ రాయకపోవడం లేదా ఖాళీగా వదిలేయడం

ఇది Accessibility లోపం. స్క్రీన్ రీడర్స్ వాడే అంధులకు చిత్రం గురించి ఏమీ తెలియదు, మరియు గూగుల్ ఇమేజ్ సెర్చ్ లో మీ సైట్ ర్యాంక్ కాదు.

❌ తప్పు 2: width మరియు height ఇవ్వకపోవడం వల్ల వచ్చే CLS జంపింగ్ ఎర్రర్

సైజులు ఇవ్వకపోతే ఇమేజ్ డౌన్‌లోడ్ అయ్యే వరకు బ్రౌజర్ ఖాళీ బాక్స్ ఉంచదు. ఇమేజ్ రాగానే మొత్తం టెక్స్ట్ అమాంతం కిందకు దూకి యూజర్ అనుభవాన్ని దెబ్బతీస్తుంది.

❌ తప్పు 3: అధిక బరువున్న రా ఫోటోలను (5MB, 10MB) నేరుగా వెబ్‌సైట్‌లో వాడటం

కెమెరా నుండి నేరుగా వచ్చిన భారీ ఫైల్స్ సైట్ స్పీడ్‌ను చంపేస్తాయి. ఫోటోలను ఎల్లప్పుడూ WebP లోకి కన్వర్ట్ చేసి, 100KB నుండి 200KB లోపలే ఉండేలా ఆప్టిమైజ్ చేయాలి.

❌ తప్పు 4: ఫైల్ పాత్ మరియు ఎక్స్‌టెన్షన్ స్పెల్లింగ్ లోపాలు

ఫైల్ పేరు photo.JPG (క్యాపిటల్స్) అని ఉంటే, కోడ్‌లో photo.jpg (స్మాల్ లెటర్స్) అని రాస్తే లైనక్స్ వెబ్ సర్వర్లలో ఇమేజ్ లోడ్ కాదు (404 Error)!

❌ తప్పు 5: <img> కి ముగింపు ట్యాగ్ </img> రాయడం

ఇమేజ్ అనేది Void Element. దానికి ముగింపు ట్యాగ్ ఉండదు.

ఈ క్రింది ప్రశ్నలకు స్వయంగా సమాధానాలు ఆలోచించండి, ఆపై డ్రాప్‌డౌన్ తెరిచి పరిశీలించండి:

1. <img> ట్యాగ్‌లో alt ఆట్రిబ్యూట్ యొక్క 3 ప్రధాన ఉపయోగాలు ఏమిటి?
2. వెబ్‌సైట్లలో CLS (Cumulative Layout Shift) బగ్‌ను నివారించడానికి ఇమేజ్ ట్యాగ్‌లో ఏ ఆట్రిబ్యూట్లు తప్పక రాయాలి?
3. loading="lazy" వెబ్‌సైట్ పనితీరును (Performance) ఎలా మెరుగుపరుస్తుంది?
4. సాధారణ JPEG లేదా PNG ల కంటే WebP మరియు SVG ఫార్మాట్లకు డెవలపర్లు ఎందుకు అధిక ప్రాధాన్యత ఇస్తారు?
5. <picture> ఎలిమెంట్ ద్వారా సాధించే "Art Direction" అంటే ఏమిటి?