Html 何时使用 IMG 与 CSS 背景图像？

When to use IMG vs. CSS background-image?

提问by system PAUSE

In what situations is it more appropriate to use an HTML IMGtag to display an image, as opposed to a CSS background-image, and vice-versa?

在什么情况下使用 HTMLIMG标签来显示图像比使用 CSS更合适，background-image反之亦然？

Factors may include accessibility, browser support, dynamic content, or any kind of technical limits or usability principles.

因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。

回答by system PAUSE

Proper uses of IMG

IMG的正确使用

1. Use IMGif you intend to have people print your pageand you want the image to be included by default. —JayTee
2. Use IMG(with alttext) 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.

1. 使用IMG，如果你打算让人们打印您的网页，你想被默认包含在图像。—杰伊
2. 当图像具有重要语义时使用IMG（与alt文本一起），例如警告图标。这确保了图像的含义可以在所有用户代理中传达，包括屏幕阅读器。

Pragmatic uses of IMG

IMG 的实际用途

1. Use IMGplus alt attribute if the image is part of the contentsuch as a logo or diagram or person (real person, not stock photo people). —sanchothefat
2. Use IMGif you rely on browser scaling to render an image in proportion to text size.
3. Use IMGfor multiple overlay images in IE6.
4. Use IMGwith a z-indexin order to stretch a background imageto fill its entire window.
   Note, this is no longer true with CSS3 background-size; see #6 below.
5. Using imginstead of background-imagecan dramatically improve performance of animations over a background.

1. IMG如果图像是内容的一部分，例如徽标或图表或人物（真实人物，而不是库存照片人物），则使用加 alt 属性。—桑乔法特
2. 使用IMG，如果你依赖于浏览器的缩放比例，以文字的大小呈现图像。
3. 使用IMG了在IE6多的重叠影像。
4. IMG与 az-index一起使用以拉伸背景图像以填充其整个窗口。
   请注意，对于 CSS3 background-size 不再如此；见下面的#6。
5. 使用img代替background-image可以显着提高背景动画的性能。

When to use CSS background-image

何时使用 CSS background-image

1. Use CSS background images if the image is not part of the content. —sanchothefat
2. Use CSS background images when doing image-replacement of texteg. paragraphs/headers. —sanchothefat
3. Use background-imageif you intend to have people print your pageand you do not want the image to be included by default. —JayTee
4. Use background-imageif you need to improve download times, as with CSS sprites.
5. Use background-imageif you need for only a portion of the image to be visible, as with CSS sprites.
6. Use background-imagewith background-size:coverin order to stretch a background image to fill its entire window.

1. 如果图像不是内容的一部分，请使用 CSS 背景图像。—桑乔法特
2. 在对文本进行图像替换时使用 CSS 背景图像，例如。段落/标题。—桑乔法特
3. 使用background-image，如果你打算让人们打印您的网页，你不想被默认包含的图像。—杰伊
4. 使用background-image，如果你需要提高下载时间，与CSS的精灵。
5. 使用background-image，如果你需要对图像的仅一部分是可见的，与CSS的精灵。
6. 使用background-imagewithbackground-size:cover来拉伸背景图像以填充其整个窗口。

回答by roborourke

It's a black and white decision to me. If the image is part of the content such as a logo or diagram or person (real person, not stock photo people) then use the <img />tag plus alt attribute. For everything else there's CSS background images.

对我来说，这是一个非黑即白的决定。如果图像是内容的一部分，例如徽标或图表或人物（真实人物，而不是库存照片人物），则使用<img />标签加 alt 属性。对于其他所有内容，都有 CSS 背景图像。

The other time to use CSS background images is when doing image-replacement of text eg. paragraphs/headers.

另一个使用 CSS 背景图像的时间是在对文本进行图像替换时，例如。段落/标题。

回答by Robbie JW

I'm surprised no one's mentioned this yet: CSS transitions.

我很惊讶还没有人提到这个：CSS transitions。

You can natively transition a div's background image:

您可以本机转换 adiv的背景图像：

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

This saves any kind of JavaScript or jQuery animation to fade an <img/>'s src.

这将保存任何类型的 JavaScript 或 jQuery 动画以淡出<img/>'s src。

More information about transitions on MDN.

有关MDN转换的更多信息。

回答by subhash

Above answers considers only Design aspect . I am listing it in SEO aspects.

以上答案仅考虑设计方面。我在 SEO 方面列出它。

When to use <img />

何时使用 <img />

1. When Your Image need to be indexed by search engine
2. If it has relation to content not to design.
3. If your image is not too small ( not iconic images ).
4. Images where you can add altand titleattribute.
5. Images from a webpage which you want to print using print media css

1. 当您的图片需要被搜索引擎索引时
2. 如果它与内容有关，则不要设计。
3. 如果您的图像不是太小（不是标志性图像）。
4. 您可以在其中添加alt和title属性的图像。
5. 您想使用打印媒体 css 打印的网页中的图像

When to use CSS background-image

何时使用 CSS background-image

1. Images Purely Used to Design.
2. No Relation With Content.
3. Small Images which we can play with CSS3.
4. Repeating Images ( In blog author icon , date icon will be repeated for each article etc.,).

1. 图像纯粹用于设计。
2. 与内容无关。
3. 我们可以使用 CSS3 播放的小图片。
4. 重复图像（在博客作者图标中，每篇文章都会重复日期图标等，）。

As i will use them based on these reasons. These are Good practices of Search Engine Optimization of Images.

因为我将基于这些原因使用它们。这些是图像搜索引擎优化的良好做法。

回答by JayTee

Browsers aren't always set to print background images by default; if you intend to have people print your page :)

默认情况下，浏览器并不总是设置为打印背景图像；如果您打算让人们打印您的页面:)

回答by Steve Harrison

If you have your CSS in an external file, then it's often convenient to display an image that's used frequently across the site (such as a header image) as a background image, because then you have the flexibility to change the image later.

如果您的 CSS 位于外部文件中，那么将网站上经常使用的图像（例如标题图像）显示为背景图像通常会很方便，因为这样您以后就可以灵活地更改图像。

For example, say you have the following HTML:

例如，假设您有以下 HTML：

<div id="headerImage"></div>

...and CSS:

...和CSS：

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

A few days later, you change the location of the image. All you have to do is update the CSS:

几天后，您更改了图像的位置。您所要做的就是更新 CSS：

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

Otherwise, you'd have to update the srcattribute of the appropriate <img>tag in every HTML file (assuming you're not using a server-side scripting language or CMSto automate the process).

否则，您必须在每个 HTML 文件中更新src相应<img>标记的属性（假设您没有使用服务器端脚本语言或CMS来自动化该过程）。

Also background images are useful if you don't want the user to be able to save the image (although I haven't ever needed to do this).

如果您不希望用户能够保存图像，背景图像也很有用（尽管我从来不需要这样做）。

回答by viam0Zah

About the same as sanchothefat's answer, but from a different aspect. I always ask myself: if I would completely remove the stylesheets from the website, do the remaining elements onlybelong to the content? If so, I did my job well.

与sanchothefat 的回答大致相同，但从不同的方面。我总是问自己：如果我从网站上完全删除样式表，剩下的元素是否只属于内容？如果是这样，我的工作做得很好。

回答by Dyin

Some answers overcomplicate the scenario here. This is a dead simple situation.

一些答案使这里的场景过于复杂。这是一个非常简单的情况。

Just answer to this question every time you'd like to place an image:

每次您想放置图像时，只需回答这个问题：

Is this part of the content or part of the design?

这是内容的一部分还是设计的一部分？

If you can't answer this, you probably don't know what you're doing or what you want to do!

如果你不能回答这个问题，你可能不知道你在做什么或你想做什么！

Also, DO NOT consider beside the two technique, just because you'd wish to be "printer friendly" or not. Also DO NOT hide content from a SEO point of view with CSS. If you find yourself managing your content in CSS files, you shot yourself in the leg. This is just a trivial decision of what is content or not. Every other aspect should be ignored.

另外，不要考虑这两种技术，仅仅因为您希望“打印机友好”与否。也不要使用 CSS 从 SEO 的角度隐藏内容。如果您发现自己在 CSS 文件中管理您的内容，那么您就中了自己的腿。这只是关于内容与否的一个微不足道的决定。所有其他方面都应该被忽略。

回答by Anders Rabo Thorbeck

I would add another two arguments:

我要添加另外两个参数：

• An imgtag is good if you need to resizethe image. E.g. if the original image is 100px by 100 px, and you want it to be 80px by 80px, you can set the CSS width and height of the img tag. I don't know of any good way to do this using background-image.EDIT: This can now also be done with a background-image, using the background-sizeCSS3 attribute.

• Using background-imageis good when you need to dynamically switch between sprites. E.g. if you have a button image, and you want a separate image displayed when the cursor is hovering over the element, you can use a background image containing both the normal and hover sprites, and dynamically change the background-position.

• 一个IMG如果你需要标记好调整图像。例如，如果原始图像是 100 像素 x 100 像素，而您希望它是 80 像素 x 80 像素，则可以设置 img 标签的 CSS 宽度和高度。我不知道使用背景图像有什么好方法可以做到这一点。编辑：这现在也可以通过使用background-sizeCSS3 属性的背景图像来完成。

• 当您需要在 sprite 之间动态切换时，使用background-image很好。例如，如果您有一个按钮图像，并且希望在光标悬停在元素上时显示一个单独的图像，则可以使用包含普通和悬停精灵的背景图像，并动态更改背景位置。

回答by Pavel Vladov

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.

使用 <IMG> 标签的另一个好处与 SEO 相关 - 即您可以在图像标签的 ALT 属性中提供有关图像的附加信息，而在通过 CSS 指定图像时无法提供此类信息，并且如果只有图像文件名可以被搜索引擎索引。ALT 属性绝对使 <IMG> 标签在 SEO 上优于 CSS 方法。这就是为什么我认为最好使用 <IMG> 标签指定要在图像搜索结果（例如 Google 图像搜索）中排名靠前的图像。