android img标签属性_[译] HTML img 标签 vs CSS background-image

头图来源于原文

使用 <img> 标签

1. 如果是和内容有关——不仅仅是一个设计元素
2. 如果你需要——被搜索引擎索引到。谷歌不会自动索引到背景图片，否则图片搜索结果将充满雪碧图。
3. 图片标签可以添加描述 文字（alt）和标题属性（title），这些信息可以被屏幕阅读器和搜索引擎获取。
4. 如果你有很多图片要声明在你的 css ，浏览器将花费更长的时间去解析 css 文件并下载图片，这会延迟整个页面的加载。有了 <img> 标签，请求是在解析 HTML 时发出的，所以文档中在这个标签前面的任何内容都是用户可以开始阅读的信息，这对于性能来说是很好的一点。
5. 内联图片可以利用诸如 picturefill 和懒加载这样的工具来进行更多的性能优化。
6. 如果你计划会有用户打印你的页面并且你希望图片默认包含在打印内容中。
7. 如果你依赖浏览器缩放来呈现于文本大小成比例的图像。

什么时候使用 CSS background-image

1. 如果纯粹是用来设计。
2. 如果图片不是内容的一部分。
3. 对于小的图片，如果你需要提高下载时间，和雪碧图一样。
4. 如果你计划会有人打印你的页面并且不希望图偏默认包含在打印内容中。
5. 重复图片（比如博客作者图标，日期图标会被重复用于每一篇文章）

如果你需要使用 <img> 标签，但由于设计或其他情况而被迫使用背景图片该怎么办

根据具体情况和项目要求，你可以使用这些方法之一或者一起使用。

例子 1

使用 div 标签并结合 role 和 aria-label 属性

<div role="img" aria-label="关于图片的描述" title="为没有使用辅助技术的用户提供的工具提示" style="background-image: url(图片地址);"></div>

例子 2

使用背景图片，但也有视觉上隐藏的 <img> 标签

<div style="background-image: url(图片地址);"><img class="hidden" src="" alt=""></div>

例子 3

使用缩影图，例如：

<div itemscope itemtype="http://schema.org/Article">
    <meta itemprop="image" content="bg.jpg"></meta>
    <div style="background-image: url("bg.jpg")"></div>
</div>

结论

当 HTML <img> 标签是可访问内容的关键部分时，应该使用它。并且在决定如何处理用于增强视觉设计的图片时，应该考虑速度、性能和操作性。

如果你需要在 HTML <img> 标签和 CSS background-image 之间做选择时——仅仅问自己一个问题：这个图片能帮助用户更好地理解我的内容吗？如果答案是肯定的——使用 img 标签。如果答案是否定的——把它做成背景图。最后——如果两种方式都可以提供相同的视觉结果——你只需要定义在你的具体情况中哪个更有意义。