When embedding images using HTML <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175224985484801.jpeg" class="lazy" alt="Embedding Images Using the HTML img Tag" > tags, you need to pay attention to path settings, alt descriptions and responsive processing. 1. The path settings must be accurate, distinguishing between relative paths, subdirectory paths and absolute URLs; 2. Clear and concise alt alternative text must be filled in to improve accessibility and SEO; 3. It is recommended to use CSS to control width and height to avoid layout jitter, and you can also set width or height to achieve similar scaling; 4. Optional properties such as loading="lazy" delay loading, decoding="async" asynchronous decoding, and srcset multi-resolution adaptation can improve performance and responsive effects.

In web development, the most common method of embedding images is to use HTML <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175224985484801.jpeg" class="lazy" alt="Embedding Images Using the HTML img Tag" > tags. It is simple and direct, but if you want to use it well, you have to pay attention to some details.

Basic syntax: src and alt are the key

The <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175224985748977.jpeg" class="lazy" alt="Embedding Images Using the HTML img Tag" > tag has no closed tag, it is a self-closed tag. The most basic way to write it is as follows:

 <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="descriptive text">

• src attribute specifies the path to the image, which can be a relative path or an absolute URL.
• alt attribute is an alternative text, which will be displayed when the image cannot be loaded, and is also important for SEO and accessibility.

It is recommended to fill in a clear and concise alt description for each picture, not only for aesthetics, but also for accessibility and search engine optimization.

Image path settings FAQ

Path errors are common problems encountered when embedding images. Here are some common situations and suggestions:

• If the picture is in the same directory, just write the file name: src="photo.jpg"
• If the image is in a subdirectory (such as images/ ), write it as: src="images/photo.jpg"
• If you reference an image on an external website, you need to use the full address: src="https://example.com/images/photo.jpg"

A path error will cause the image to not be displayed. Usually the browser will not report an error. It can only check the network request or element status through the developer tool.

Control image size: width and height usage

You can set the width and height of the image through HTML:

 <img src="/static/imghw/default1.png"  data-src="photo.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Scenery Photo">

• The unit is pixel by default, and no px is required
• Setting width and height at the same time can avoid page layout jitter (Layout Shift)

However, it is more recommended to use CSS to control the size, which makes it easier to manage and adapt responsively. If you set only one of width or height, the browser scales the other side.

Other practical properties (not very commonly used but useful)

Although the above attributes are sufficient in most cases, there are several options to improve the experience:

• loading="lazy" : delay loading of pictures, speed up the first screen, suitable for long pages
• decoding="async" : Tells the browser to decode pictures asynchronously to improve performance
• srcset : Provides multiple resolution versions in conjunction with responsive design

For example:

 <img src="/static/imghw/default1.png"  data-src="small.jpg"  class="lazy" srcset="medium.jpg 1024w, large.jpg 1920w" alt="City Night View">

These attributes can be selected and used according to project needs, especially for high-traffic websites or mobile-first projects, with more obvious results.

Basically that's it. Inserting images with <img alt="Embedding Images Using the HTML img Tag" > tags seems simple, but in actual development, path settings, alternative text and responsive processing are the most likely to cause problems, so you need to pay more attention.

The above is the detailed content of Embedding Images Using the HTML img Tag. For more information, please follow other related articles on the PHP Chinese website!