img एलिमेंट: src, alt, width, height

<!-- Informative image: describe the content -->
<img src="chart.png" alt="Bar chart showing 30% revenue growth Q1-Q4 2024">

<!-- Decorative image: empty alt -->
<img src="divider.png" alt="">
<!-- Empty alt tells screen readers to skip this image -->

<!-- Functional image (button/link): describe the action -->
<a href="/">
  <img src="logo.png" alt="Go to homepage">
</a>

<img src="photo.jpg" alt="Landscape" width="800" height="600">
<!-- Values are in pixels (no units needed) -->
<!-- Why? The browser can reserve space before the image loads
     This prevents layout shift (CLS) — a Core Web Vital metric -->

<!-- HTML sets intrinsic dimensions -->
<img src="photo.jpg" alt="Photo" width="1600" height="900">

<!-- CSS can make it responsive while preserving ratio -->
<!--
img {
  width: 100%;
  height: auto;  /* auto preserves the aspect ratio -->
}
-->

<!-- Lazy load: only load when near viewport -->
<img src="photo.jpg" alt="" loading="lazy" width="800" height="600">

<!-- Eager load (default): load immediately -->
<img src="hero.jpg" alt="" loading="eager" width="1920" height="1080">

<!-- Always eager-load above-the-fold images -->
<!-- Lazy-load everything below the fold -->

<img src="large.jpg" alt="" decoding="async" width="800" height="600">
<!-- async: decode in parallel with rendering (good for most images) -->
<!-- sync: decode before rendering (for critical above-fold images) -->
<!-- auto: browser decides (default) -->

<!-- Hero image: fetch with high priority -->
<img src="hero.jpg" alt="Hero" fetchpriority="high" width="1920" height="600">

<!-- Below-fold images: low priority -->
<img src="gallery-item.jpg" alt="" fetchpriority="low"
     loading="lazy" width="400" height="300">

<img
  src="/images/team-photo.jpg"
  alt="The Coddy team gathered at a conference table in 2024"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>