`<img>` - image embedding

The <img> tag is the core element in HTML for embedding images in web pages. It renders images by specifying their URL or path and supports various attributes to control display methods, dimensions, alternative text, and more.

Basic Syntax of the <img> Tag

<img> is a self-closing tag with the following basic syntax:

<img src="image.jpg" alt="Descriptive text">

• src: Specifies the image path (required). Can be a relative path, absolute path, or full URL.
• alt: Provides alternative text (strongly recommended). Displayed when the image fails to load and is essential for screen readers and SEO.

Detailed Explanation of Common Attributes

src and alt

src is the core attribute defining the image source, while alt ensures accessibility and SEO optimization:

<img src="https://example.com/pic.png" alt="An orange cat sunbathing">

If the src path is incorrect or the image is corrupted, the browser displays the alt text.

width and height

Control the display dimensions of the image (default unit is pixels):

<img src="logo.png" alt="Company Logo" width="200" height="100">

Note: If only width or height is set, the browser scales the image proportionally. Modern development prefers using CSS for sizing.

loading

Controls lazy-loading behavior:

<img src="large-banner.jpg" alt="Ad Banner" loading="lazy">

• lazy: Delays loading until the image is near the viewport.
• eager (default): Loads immediately.

srcset and sizes

Key attributes for responsive images, adapting to different screen resolutions:

<img src="default.jpg" 
     srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1600w"
     sizes="(max-width: 600px) 480px, (max-width: 1200px) 1024px, 1600px"
     alt="Responsive image example">

• srcset: Defines image sources of different sizes with their actual widths (e.g., 480w means the image is 480 pixels wide).
• sizes: Specifies the display dimensions for different viewport widths.

Advanced Usage Examples

Combining with <picture> for Art Direction

Display cropped images for different devices:

<picture>
  <source media="(min-width: 1200px)" srcset="desktop-view.jpg">
  <source media="(min-width: 768px)" srcset="tablet-view.jpg">
  <img src="mobile-view.jpg" alt="Landscape view for different devices">
</picture>

Using crossorigin for Cross-Origin Images

Required when loading images from another domain for Canvas operations:

<img src="https://cdn.example.com/user-avatar.jpg" 
     alt="User avatar" 
     crossorigin="anonymous">

Image Map Example

Define clickable areas with <map> and <area>:

<img src="world-map.png" alt="World map" usemap="#map">

<map name="map">
  <area shape="rect" coords="50,50,150,150" href="europe.html" alt="Europe">
  <area shape="circle" coords="300,200,50" href="asia.html" alt="Asia">
</map>

Performance Optimization Practices

Format Recommendations

• Use WebP instead of traditional JPEG/PNG (check compatibility):

  <picture>
    <source type="image/webp" srcset="image.webp">
    <img src="image.jpg" alt="High-performance image">
  </picture>
  

Preloading Critical Images

Load above-the-fold images early with <link rel="preload">:

<link rel="preload" as="image" href="hero-banner.jpg">

Common Issue Troubleshooting

Possible Reasons for Images Not Displaying

1. Incorrect src path:

   <!-- Bad example -->
   <img src="/wrong/path/image.png" alt="">
   

2. Incorrect MIME type configuration on the server:
   • Ensure the server returns the correct Content-Type header (e.g., image/jpeg).
3. Cross-origin restrictions:
   • Configure CORS or use a proxy.

Image Stretching or Distortion

Avoid distortion by maintaining aspect ratio:

<!-- Not recommended: Forced stretching -->
<img src="portrait.jpg" width="300" height="200">

<!-- Recommended: CSS control -->
<img src="portrait.jpg" style="width: 300px; height: auto;">

Accessibility Requirements

alt Text Guidelines

• Decorative images use empty alt:

  <img src="divider.png" alt="">
  

• Informative images require accurate descriptions:

  <img src="chart.png" alt="2023 quarterly sales: Q1 20%, Q2 35%, Q3 25%, Q4 20%">
  

Avoid Text-Only Images

Important text should not be conveyed solely through images:

<!-- Not recommended -->
<img src="promo-text.png" alt="Limited-time 50% off">

<!-- Recommended approach -->
<div class="promo-banner">
  <span class="visually-hidden">Limited-time 50% off</span>
</div>