HtmlNinja-用img标签还是background-image?

以下内容为Stackoverflow上整理的，仅供参考

PRO 用IMG标签

Use

IMG

plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people). —sanchothefat
如果图片是内容的重要部分例如logo，人员信息的头像等，用img标签，别忘了alt属性

Use

IMG

if you intend to have people print your page and you want the image to be included by default. —JayTee
如果你想别人打印你的页面时连图片一起打印，那末用img

Use

IMG

(with

alt

text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.
如果图片有很重要的语义，例如表示警告的图标，为了保证被别的客户端设备例如屏幕阅读器所识别，那末使用IMG标签，别忘了alt属性

Use

IMG

if you rely on browser scaling to render an image in proportion to text size.
当用户改变文本尺寸比例时（通过浏览器如ctr+），使用IMG标签可以使图片正常按比例缩放

Use

IMG

for multiple overlay images in IE6.
IE6下面多张图片交叠效果需要用IMG标签（具体用处不明）

Use

IMG

with a

z-index

in order to stretch a background image to fill its entire window.
使用img标签以及z-index可以撑开整个窗口的背景图。（具体不知道啥意思）

Using

img

instead of

background-image

can dramatically improve performance of animations over a background.
针对图片进行动画交互时使用img标签可显著提升性能

CON 用背景图

Use CSS background images if the image is not part of the content. —sanchothefat
图片不是内容的主体组成部分时，考虑用背景图

Use CSS background images when doing image-replacement of text eg. paragraphs/headers. —sanchothefat
需要使用图片替代文字的时候考虑用背景图，比如标题内容、段落内容，有时候需要用更有质感的图片替代部分内容

Use

background-image

if you intend to have people print your page and you do not want the image to be included by default. —JayTee
别人打印你的网页，你不想让他打印到图片时考虑用背景图

Use

background-image

if you need to improve download times, as with CSS sprites.
合图即css sprite可减少服务器请求次数，用背景图

Use

background-image

if you need for only a portion of the image to be visible, as with CSS sprites.
用背景图可以利用css的background-position控制图片的可见范围