Image Tags: img and Image Attributes

In web development, the <img> tag is the primary tool for embedding and displaying image resources. Unlike text content, images require external file support to render; therefore, the <img> tag is primarily used to reference local or network-based image resources rather than containing image data directly (the latter typically uses <picture> or SVG). A correct understanding and usage of this tag constitute the first step in building high-quality web visual experiences.

The basic structure of the <img> tag is concise and clear; it does not require a closing tag and must include a src attribute to specify the image path:

<img src="image.png" alt="Friendly welcome message">

In this context, the src attribute determines which image the browser loads, while the alt attribute provides alternative text displayed when the image fails to load. This is crucial not only for screen reader accessibility but also serves as a key factor in improving page SEO (Search Engine Optimization).
Beyond the basic src and alt, the <img> tag possesses a series of important attributes used to control image display behavior, size layout, and interactive effects.

1. Size Control Attributes

Webpage images often need to adapt to container sizes, but browsers default to attempting to load images at their original resolution. This can lead to a "Flash of Unstyled Image" (FOUI) phenomenon during initial page rendering, where a large placeholder image displays first before being replaced by the thumbnail.

  • width and height: Used to set the width and height of the image.
    • Best Practice: Explicitly specify these two attributes within the <img> tag, even if the final dimensions are altered via CSS. This helps the browser calculate layout (Layout) in advance, preventing blank spaces or jitter effects on the page.
  • loading attribute: A modern HTML5 optimization attribute used to control image loading strategies.
    • lazy: Lazy loading. When an image is outside the viewport, the browser will not download it until the user scrolls to that area. This significantly reduces first-paint load time and bandwidth consumption.
    • eager: Eager loading. Suitable for critical images within the viewport (such as a Hero Banner), ensuring they render first.

2. Visual and Interactive Attributes

  • alt (Alternative Text): This is the most important semantic attribute. It describes the content of the image, allowing visually impaired users to understand it via screen readers, and serves as the basis for search engines to index images. If the image itself is purely decorative (such as a background image), set alt="" as an empty string; otherwise, provide a meaningful description.
  • srcset and sizes: Optimization solutions for high-definition screens (Retina) or devices with different resolutions. By providing multiple image sources of varying resolutions, the browser automatically selects the most suitable image to load based on the device pixel ratio, thereby enhancing clarity and saving bandwidth.

3. Practical Code Examples

Below is a complete <img> tag example incorporating the aforementioned best practices:

<!-- 
   srcset: Provides three sizes of images for different screen choices
   sizes: Defines which image size should be used based on device width
   loading="lazy": Enables lazy loading to optimize performance
   width/height: Pre-allocate space to prevent layout shifts
-->
<img 
    src="image-400.jpg" 
    srcset="image-800.jpg 800w, image-1200.jpg 1200w, image-2000.jpg 2000w"
    sizes="(max-width: 600px) 50vw, (max-width: 900px) 70vw, 800px"
    alt="Show a scene of the company team working in the office"
    width="800" 
    height="450" 
    loading="lazy">

Common Troubleshooting and Precautions

In actual development, developers often encounter image display anomalies due to ignoring certain details.

First, missing alt attributes is a frequent issue. If the alt attribute is omitted, although some browsers may display the filename (e.g., "index.jpg"), this negatively impacts accessibility and loses SEO optimization opportunities. Secondly, if width and height are not specified, large blank areas will appear on the page before the image loads, disrupting the overall layout stability.

Additionally, pay attention to cross-origin issues. If images are hosted on a third-party server (such as a CDN) while the webpage runs under a different domain, ensure that the image server enables CORS (Cross-Origin Resource Sharing) header information; otherwise, the browser will refuse to load the image due to security policies. Finally, for oversized icons or decorative images, they can sometimes be cropped using the CSS object-fit property to adapt to container shapes while maintaining the original aspect ratio.

By mastering these core attributes and usage techniques of the <img> tag, developers can build modern webpages that are both aesthetically pleasing and efficient, balancing accessibility with performance optimization.