图片

<img> 标签是 HTML 中用于在网页上嵌入图像的核心元素。

基本语法:

<img src="图像路径" alt="替代文本">

主要属性详解

1. src (必需)

指定图像的 URL 或文件路径。

<!-- 绝对路径 -->
<img src="https://example.com/image.jpg" alt="示例图片">
<img src="D:/imgs/image.jpg" alt="示例图片">

<!-- 相对路径 -->
<img src="images/photo.jpg" alt="我的照片">

<!-- 同级目录 -->
<img src="logo.png" alt="网站标志">

2. alt (强烈推荐)

提供图像的文本描述，用于：

• 图像无法显示时的替代文本
• 屏幕阅读器为视障用户朗读
• SEO 优化

<!-- 好的示例 -->
<img src="cat.jpg" alt="一只橘色猫咪在玩耍">

<!-- 装饰性图像 -->
<img src="divider.png" alt="">

3. width 和 height

设置图像的显示尺寸（单位：像素）。

<!-- 固定尺寸 -->
<img src="photo.jpg" alt="照片" width="300" height="200">

<!-- 只设置宽度，高度自动调整 -->
<img src="photo.jpg" alt="照片" width="300">

4. loading

控制图像加载行为：

• eager：立即加载（默认）
• lazy：延迟加载（进入视口时加载）

<img src="large-image.jpg" alt="大图" loading="lazy">

5. srcset 和 sizes

提供响应式图像，适应不同屏幕和分辨率。

<img src="image-800w.jpg" 
     srcset="image-400w.jpg 400w,
             image-800w.jpg 800w,
             image-1200w.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1200px) 800px,
            1200px"
     alt="响应式图像">

实际应用示例

基本使用

<img src="avatar.png" 
    alt="用户头像" 
    width="150" 
    height="150"
    class="profile-image">

带标题的图片

<figure>
  <img src="landscape.jpg" 
       alt="美丽的山景" 
       loading="lazy">
  <figcaption>黄山日出美景</figcaption>
</figure>

链接图片

<a href="large-view.html">
  <img src="thumbnail.jpg" 
       alt="点击查看大图"
       width="200">
</a>

最佳实践

• 始终使用 alt 属性 - 提高可访问性
• 指定尺寸 - 防止布局偏移，提高性能
• 优化图像 - 使用适当格式和压缩
• 考虑使用 loading="lazy" - 提高页面加载性能
• 提供响应式图像 - 适应不同设备

支持的图像格式

• JPEG - 照片类图像
• PNG - 需要透明背景时
• GIF - 简单动画
• SVG - 矢量图形
• WebP - 现代格式，更好的压缩