<img>-图像嵌入

<img> 标签是 HTML 中用于在网页中嵌入图像的核心元素。它通过指定图像的 URL 或路径，将图片渲染到页面上，支持多种属性来控制图像的显示方式、尺寸、替代文本等。

<img> 标签的基本语法

<img> 是一个空标签，不需要闭合，基本语法如下：

<img src="image.jpg" alt="描述文本">

• src：指定图像的路径（必填），可以是相对路径、绝对路径或完整的 URL。
• alt：提供图像的替代文本（强烈建议填写），当图像无法加载时显示，同时对屏幕阅读器友好。

常用属性详解

src 和 alt

src 是核心属性，决定图像的来源。alt 则用于无障碍访问和 SEO 优化：

<img src="https://example.com/pic.png" alt="一只橘猫晒太阳">

如果 src 路径错误或图像损坏，浏览器会显示 alt 文本。

width 和 height

控制图像的显示尺寸（单位默认为像素）：

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

注意：仅设置宽度或高度时，浏览器会按比例缩放图像。现代开发中更推荐使用 CSS 控制尺寸。

loading

控制图像的懒加载行为：

<img src="large-banner.jpg" alt="广告横幅" loading="lazy">

• lazy：延迟加载，直到图像接近视口。
• eager（默认）：立即加载。

srcset 和 sizes

响应式图像的关键属性，适配不同屏幕分辨率：

<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="响应式图像示例">

• srcset：定义不同尺寸的图像源及对应的宽度描述（如 480w 表示图像实际宽度为 480 像素）。
• sizes：指定不同视口宽度下图像的显示尺寸。

高级用法示例

结合 <picture> 实现艺术方向切换

针对不同设备显示裁剪后的图像：

<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="不同设备下的景观图">
</picture>

使用 crossorigin 处理跨域图像

当从其他域名加载图像并需要 Canvas 操作时：

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

图像映射示例

通过 <map> 和 <area> 定义可点击区域：

<img src="world-map.png" alt="世界地图" usemap="#map">

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

性能优化实践

格式选择建议

• 使用 WebP 格式替代传统 JPEG/PNG（兼容性需检查）：

  <picture>
    <source type="image/webp" srcset="image.webp">
    <img src="image.jpg" alt="高性能图像">
  </picture>
  

预加载关键图像

通过 <link rel="preload"> 提前加载首屏图像：

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

常见问题排查

图像不显示的可能原因

1. src 路径错误：

   <!-- 错误示例 -->
   <img src="/错误的/路径/image.png" alt="">
   

2. 服务器未正确配置 MIME 类型：
   • 确保服务器返回 Content-Type: image/jpeg 等正确的响应头。
3. 跨域限制：
   • 需配置 CORS 或使用代理。

图像拉伸变形

未保持宽高比导致的失真：

<!-- 不推荐：强制拉伸 -->
<img src="portrait.jpg" width="300" height="200">

<!-- 推荐：CSS 控制 -->
<img src="portrait.jpg" style="width: 300px; height: auto;">

无障碍访问要求

alt 文本编写规范

• 装饰性图像使用空 alt：

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

• 信息性图像需准确描述：

  <img src="chart.png" alt="2023年季度销售额：Q1 20%, Q2 35%, Q3 25%, Q4 20%">
  

避免纯图像文本

重要文本不应仅通过图像呈现：

<!-- 不推荐 -->
<img src="promo-text.png" alt="限时五折优惠">

<!-- 推荐方案 -->
<div class="promo-banner">
  <span class="visually-hidden">限时五折优惠</span>
</div>