编辑“︁HTML图像属性”︁

{{DISPLAYTITLE:HTML图像属性}}

'''HTML图像属性'''是用于控制HTML文档中图像（通过{{tag|img}}标签嵌入）的显示方式、行为及元数据的特性集合。这些属性在网页设计中至关重要，直接影响图像的加载、可访问性、响应式布局及用户体验。本文将系统讲解核心属性及其实际应用。

== 核心属性 ==
=== src ===
'''src'''（source）是{{tag|img}}标签的必需属性，用于指定图像资源的URL（相对路径或绝对路径）。

<syntaxhighlight lang="html">
<img src="logo.png" alt="Company Logo">
</syntaxhighlight>

* '''输入'''：浏览器加载`logo.png`文件。
* '''输出'''：在页面显示该图像。

=== alt ===
'''alt'''（alternate text）提供图像的文本描述，用于以下场景：
* 图像无法加载时显示替代文本
* 屏幕阅读器为视障用户朗读内容
* SEO优化

<syntaxhighlight lang="html">
<img src="chart.jpg" alt="年度销售增长柱状图：2020-2023">
</syntaxhighlight>

=== width 与 height ===
控制图像的显示尺寸（单位：像素或百分比）。建议同时指定以避免布局偏移（CLS问题）。

<syntaxhighlight lang="html">
<img src="photo.jpg" width="300" height="200" alt="风景照">
</syntaxhighlight>

'''注意'''：仅设置其中一个属性时，浏览器会按原比例缩放。

=== loading ===
控制图像的懒加载行为（Lazy Loading）：
* '''auto'''：默认行为
* '''lazy'''：延迟加载直到图像进入视口
* '''eager'''：立即加载

<syntaxhighlight lang="html">
<img src="banner.jpg" loading="lazy" alt="促销广告">
</syntaxhighlight>

== 高级属性 ==
=== srcset 与 sizes ===
实现响应式图像，根据设备分辨率/视口宽度选择最优图像源。

<mermaid>
graph TD
    A[浏览器检测] -->|高DPI屏幕| B(加载 2x图像)
    A -->|窄视口| C(加载 小尺寸图像)
    A -->|默认| D(加载 常规图像)
</mermaid>

<syntaxhighlight lang="html">
<img srcset="
    small.jpg 480w,
    medium.jpg 1024w,
    large.jpg 1600w
" 
sizes="(max-width: 600px) 480px, 1024px" 
src="medium.jpg" 
alt="响应式图像示例">
</syntaxhighlight>

=== decoding ===
控制图像解码方式：
* '''sync'''：同步解码（可能阻塞渲染）
* '''async'''：异步解码
* '''auto'''：浏览器决定（默认）

<syntaxhighlight lang="html">
<img src="highres.jpg" decoding="async" alt="高清图片">
</syntaxhighlight>

== 样式控制属性 ==
=== style ===
内联CSS样式（优先级最高）：

<syntaxhighlight lang="html">
<img src="icon.png" style="border: 2px solid blue; border-radius: 8px;" alt="图标">
</syntaxhighlight>

=== class 与 id ===
用于CSS/JavaScript选择器：

<syntaxhighlight lang="html">
<img src="avatar.jpg" class="profile-image" id="user-avatar" alt="用户头像">
</syntaxhighlight>

== 可访问性属性 ==
=== aria-* ===
增强屏幕阅读器支持：

<syntaxhighlight lang="html">
<img src="infographic.png" alt="" aria-describedby="chart-desc">
<div id="chart-desc">此图表显示各季度营收对比...</div>
</syntaxhighlight>

== 数学公式示例 ==
当需要标注图像尺寸比例时，可使用数学公式：
<math>
\text{宽高比} = \frac{\text{width}}{\text{height}}
</math>

== 实际案例 ==
=== 电商产品图 ===
<syntaxhighlight lang="html">
<img 
    srcset="
        product-320.jpg 320w,
        product-640.jpg 640w,
        product-1280.jpg 1280w
    "
    sizes="(max-width: 768px) 320px, 640px"
    src="product-640.jpg"
    alt="黑色皮革钱包，带RFID防护"
    loading="lazy"
    class="product-image"
>
</syntaxhighlight>

=== 社交媒体头像 ===
<syntaxhighlight lang="html">
<img 
    src="user-avatar.jpg" 
    alt="张三的个人头像" 
    width="150" 
    height="150"
    style="clip-path: circle(50%)"
    aria-label="用户头像"
>
</syntaxhighlight>

== 最佳实践 ==
* 始终提供有意义的`alt`文本
* 优先使用`srcset`+`sizes`实现响应式图像
* 对非关键图像启用`loading="lazy"`
* 通过`width`/`height`防止布局偏移
* 使用现代格式（WebP/AVIF）时配合`<picture>`标签

== 参见 ==
* [[HTML图像映射]]
* [[响应式图像设计]]
* [[Web可访问性指南]]

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML图像与多媒体]]