<img>-图像嵌入

<img> 是 HTML 中最基础的图像嵌入标签，用于在网页中直接显示图片。它的属性和用法直接影响图片的加载、显示和用户体验。

<img> 标签的基本语法

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

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

• src：指定图片的路径，可以是相对路径、绝对路径或完整的 URL。
• alt：提供替代文本，当图片无法加载时显示，同时也是屏幕阅读器的重要信息源。

示例：嵌入本地图片

<img src="images/logo.png" alt="公司Logo">

示例：嵌入网络图片

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

关键属性详解

src 和 alt 的必要性

src 是必须的，否则图片无法加载。alt 虽然技术上可以省略，但强烈建议始终提供，尤其是对于内容性图片。如果图片纯粹是装饰性的，可以使用空 alt=""，但不要完全省略。

<!-- 内容性图片 -->
<img src="chart.png" alt="2023年销售增长趋势图">

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

控制图片尺寸：width 和 height

通过 width 和 height 可以指定图片的显示尺寸（单位默认为像素）。建议同时设置这两个属性以避免布局偏移（CLS），但最好通过 CSS 控制响应式布局。

<img src="photo.jpg" alt="风景照" width="800" height="600">

响应式图片：srcset 和 sizes

现代网页需要适配不同设备，srcset 允许提供多张不同分辨率的图片，浏览器会自动选择最合适的：

<img src="default.jpg" 
     srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
     sizes="(max-width: 600px) 480px, 800px"
     alt="响应式图片示例">

懒加载：loading="lazy"

延迟加载视口外的图片，显著提升页面加载性能：

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

解码方式：decoding

控制图片解码行为，async 可提升性能但可能引发布局跳动：

<img src="high-res.jpg" alt="高清图" decoding="async">

高级用法示例

结合 <picture> 实现艺术指导

根据不同设备条件（如屏幕宽度、DPI）显示完全不同的图片：

<picture>
  <source media="(min-width: 1200px)" srcset="desktop.jpg">
  <source media="(min-width: 768px)" srcset="tablet.jpg">
  <img src="mobile.jpg" alt="自适应图片">
</picture>

使用 crossorigin 处理跨域图片

当需要对图片进行 Canvas 操作时，可能需要此属性：

<img src="https://another-domain.com/image.jpg" 
     alt="跨域图片" 
     crossorigin="anonymous">

常见问题与解决方案

图片加载失败处理

通过 onerror 事件可以设置备用图片：

<img src="primary.jpg" 
     alt="产品图" 
     onerror="this.src='fallback.jpg';this.alt='图片加载失败'">

图片格式选择建议

• JPEG：适合照片类图像
• PNG：需要透明度或无损压缩时使用
• WebP：现代格式，通常最优
• AVIF：新兴高效格式

<!-- 优先使用 WebP，不支持时回退到 JPEG -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="格式优化示例">
</picture>

性能优化技巧

预加载关键图片

使用 <link rel="preload"> 提前加载首屏重要图片：

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

渐进式图片加载

JPEG 可以保存为渐进式格式，逐步显示：

<img src="progressive.jpg" alt="渐进式加载示例">

可访问性实践

为复杂图片添加详细描述

当 alt 不足以描述时，使用 longdesc 或 ARIA：

<img src="infographic.png" 
     alt="市场占有率图表"
     aria-describedby="chart-desc">
<p id="chart-desc">2023年Q1市场占有率：A公司占35%...</p>

避免图片中的文字

如果必须使用图片文字，确保 alt 包含完整文本内容：

<img src="promo-banner.png" 
     alt="限时优惠：全场5折，仅限今日">

与其他技术的结合

在 CSS 中作为背景图的替代

当图片是内容的一部分时，优先使用 <img> 而非 CSS 背景：

<!-- 正确：Logo 作为内容 -->
<img src="logo.png" alt="公司Logo" class="header-logo">

<!-- 避免：Logo 作为背景 -->
<div class="header-logo" aria-label="公司Logo"></div>

与 JavaScript 交互示例

通过 JS 动态修改图片源：

<img id="dynamic-image" src="default.jpg" alt="动态图片">
<script>
  document.getElementById('dynamic-image').src = 
    window.innerWidth > 768 ? 'large.jpg' : 'small.jpg';
</script>

浏览器兼容性注意事项

虽然 <img> 标签本身所有浏览器都支持，但某些特性需要注意：

• loading="lazy"：不支持 IE 和 Safari 14 之前版本
• srcset：IE 完全不支持
• decoding：仅较新浏览器支持

<!-- 兼容性处理示例 -->
<img src="legacy.jpg" 
     srcset="modern.jpg 1x" 
     alt="兼容性处理"
     class="legacy-image">