在 HTML 文件中添加图片的常用方法

本文详解HTML图片插入方法：1）通过<img>标签实现，必须含src和alt属性；2）路径支持绝对/相对引用；3）建议设置width/height保持比例；4）响应式方案用srcset适配不同设备；5）性能优化推荐懒加载和WebP格式；6）语义化推荐结合<figure>标签。注意事项包括保持宽高比、移动端适配和CDN加速等，需根据场景选择JPEG/PNG/SVG等合适格式。

在HTML中添加图片主要通过<img>标签实现，以下是核心要点：

一、基础语法

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

二、属性详解

1. src（必需）

• 绝对路径：

  <img src="https://example.com/images/photo.jpg" alt="示例图片">
  

• 相对路径：

  <!-- 同级目录 -->
  <img src="photo.jpg" alt="本地图片">
  
  <!-- 子目录 -->
  <img src="images/photo.jpg" alt="子文件夹图片">
  

2. alt（必需）

<img src="logo.png" alt="公司标志 - 红色圆形图案">

3. 尺寸控制

<img src="banner.jpg" alt="活动横幅" width="800" height="400">

三、进阶用法

1. 响应式图片

<img srcset="small.jpg 480w,
             medium.jpg 768w,
             large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="fallback.jpg"
     alt="自适应图片">

2. CSS样式整合

<img src="avatar.jpg" 
     alt="用户头像"
     style="border-radius: 50%; 
            box-shadow: 2px 2px 5px rgba(0,0,0,0.3);">

四、最佳实践

1. 文件格式选择：

   • JPEG：照片类图像
   • PNG：需要透明背景
   • WebP：现代浏览器优先
   • SVG：矢量图标

2. 性能优化：

<img src="optimized.jpg" 
     alt="优化图片"
     loading="lazy"
     decoding="async">

3. 语义化组合

<figure>
  <img src="chart.png" alt="销售趋势图">
  <figcaption>2023年季度销售数据可视化</figcaption>
</figure>

注意事项：

• 始终保持宽高比比例
• 移动端优先考虑图片尺寸
• 使用CDN加速图片加载
• 为装饰性图片设置空alt值：alt=""