正确使用IMG

如果您打算使用IMG 人们打印您的页面，您希望在默认情况下包含图像。 -JayTee 当图像具有重要的语义含义时，例如警告图标，使用IMG(带有alt文本)。这确保了图像的含义可以在所有用户代理(包括屏幕阅读器)中传达。

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 Use IMG if you rely on browser scaling to render an image in proportion to text size. Use IMG for multiple overlay images in IE6. Use IMG with a z-index in order to stretch a background image to fill its entire window.Note, this is no longer true with CSS3 background-size; see #6 below. Using img instead of background-image can dramatically improve performance of animations over a background.

何时使用CSS背景图像

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. Use background-image if you need for only a portion of the image to be visible, as with CSS sprites. Use background-image with background-size:cover in order to stretch a background image to fill its entire window.

这里有一个技术上的考虑:图像是动态生成的吗?在HTML中生成<img>标记往往比尝试动态编辑CSS属性容易得多。

另一个背景-图像PRO: <ul>/<ol>列表的背景-图像。

如果背景图像是整体设计的一部分，并且在多个页面上重复使用，则使用背景图像。最好以背景精灵的形式进行优化。

对所有不属于整体设计的图像使用标签，并且很可能只放置一次，比如文章、人物的特定图像，以及值得添加到谷歌图像中的重要图像。

**我在<img>标签中唯一重复的图像是网站/公司标志。因为人们倾向于点击它进入主页，所以你用<a>标签来包装它。

前景= img。

Background = CSS背景。

One more benefit from using the <IMG> tag is related to SEO - i.e. you can provide additional information about the image in the ALT attribute of the image tag, while there's no way to provide such information when specifying the image through CSS and in that case only the image file name may be indexed by search engines. The ALT attribute definitely gives the <IMG> tag SEO advantage over the CSS approach. That's why according to me it is better to specify the images you want to rank well in the image search results (e.g. Google Image Search) using the <IMG> tag.

还有一个原因!如果你有一个响应式的设计，并且想通过媒体查询来划分低分辨率、中分辨率和高分辨率图像的使用，那么你也应该使用背景。