HTML中的图片集与高DPI环境下的可访问性-html教程-PHP中文网

srcset 与 sizes 必须配对使用，否则即使 alt 规范也无法避免模糊图；sizes 是浏览器选择响应式图像的唯一依据，漏写或错写将导致 srcset 失效。

html中的图片集与高dpi环境下的可访问性

srcset + sizes 必须配对，否则 `alt` 再规范也救不了模糊图

很多人以为只要写了 alt、用了 <picture></picture> 就算“可访问+高清”双达标，其实不然。如果 srcset 没配 sizes，浏览器根本不知道该在什么宽度下选哪张图——结果就是小屏加载 2x 图、大屏 fallback 到 1x 图，alt 描述再准确，用户看到的仍是发虚的像素块。

关键点：

sizes 不是可选参数，它是浏览器做资源决策的唯一上下文依据；漏写或写错（比如 sizes="50vw" 但容器实际只占 300px），srcset 就形同虚设
srcset 中必须统一用 w 描述符（如 img-640.jpg 640w），混用 x（如 img@2x.jpg 2x）会导致部分 Android WebView 忽略整个属性
<picture></picture> 里的 <source></source> 标签不能带 alt——这个属性只属于最外层的 <img>，重复写会触发校验警告，且辅助技术只会读取外层那个

高 DPI 下 `alt` 要描述“视觉结论”，不是“文件名”或“图片”

在 Retina 屏或 4K 医疗屏上，用户放大看图时，alt 是 AT（辅助技术）唯一能传达信息的通道。此时堆砌关键词（如 alt="dog animal pet"）或照抄文件名（alt="pug_2025_v3.jpg"）等于没写——AT 读出来毫无意义，搜索引擎也直接忽略。

实操建议：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

功能性图（如删除按钮图标）：写动作，alt="删除当前相册"
信息性图（如动物体重趋势图）：写结论，alt="金毛犬平均体重近五年上升8%，达32.5kg"
复杂图（如多品种血统树）：保留简洁 alt（如 alt="犬种遗传关系图"），再用 <figure><figcaption></figcaption></figure> 补充细节
纯装饰图：明确写 alt=""，不要留空或删掉属性——留空属性会被某些 AT 当作“缺失”，alt="" 才是标准忽略信号

`<picture></picture>` 在高 DPI 环境下失效的三个硬伤

<picture></picture> 不是 <img> 的升级版，它是独立的资源选择器，任何一环断开，高清适配就崩。尤其在多屏/高 DPR 场景下，以下三类错误最常导致 fallback 到低清图：

<source></source> 的 media 属性和真实布局宽度不匹配：比如写 media="(max-width: 768px)"，但页面用 flex 布局把图片容器压到 320px 宽，浏览器仍按 768px 查找资源，错过 320w 图
格式声明缺失或顺序错乱：type="image/webp" 的 <source></source> 必须放在 type="image/jpeg" 之前，否则 WebP 支持浏览器也会跳过它去加载 JPEG
没有为 DPR ≥ 2 设备提供专用资源：仅靠 width 断点无法区分同宽度不同 DPR 的屏幕（如 1920px 宽的 4K 屏 vs 普通 1080p 屏），必须加一层 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) 的 <source></source>

Canvas 背景图模拟时，`alt` 和 DPR 必须同步处理

当用 <picture></picture> + position: absolute 的 <img> 模拟背景图时，容易忽略两个耦合问题：一是 alt 仍需存在（即使视觉上是背景），二是 DPR 缩放必须作用于 canvas.width/canvas.height，而非仅 CSS 尺寸。

常见坑：

忘记给模拟背景的 <img> 写 alt=""——它虽是背景，但 DOM 中仍是可聚焦元素，缺 alt 会被 AT 当作内容图读出，干扰语义流
只调了 canvas.style.width 和 style.height，没同步改 canvas.width 和 canvas.height：DPR=2 时，若 CSS 设为 800×600，但 canvas.width 仍是 800，则内部只有 800 物理像素，被拉伸成 1600 显示，必然模糊
用 ctx.scale(dpr, dpr) 后没重算坐标：缩放后所有绘图坐标要除以 dpr，否则文字、线条位置全偏移

高 DPI 下的图像适配从来不是单点优化。srcset 错了，alt 写得再好也没人看清图；alt 漏了，再高清的图对 AT 用户也是盲区。真正卡住落地的，往往是 sizes 里一个没对齐的 vw，或是 <picture></picture> 中一条 media 查询没覆盖到外接 4K 屏的真实 DPR。