Div背景图片或使用IMG标签 [英] Div Background Image or Using IMG Tag

问题描述

我不知道，使用图像与IMG标记或使用作为DIV背景之间有什么区别吗？

I wonder that, is there any differences between using image with IMG tag or using as DIV Background? Does it effect website performance, Google Search or etc.?

推荐答案

没有真正的性能差异或SEO差异指定的 img 元素与 alt 属性可能比背景图片更适合SEO，要爬行的文本）。

There is no real performance difference or SEO difference (although I suppose an img element with alt attribute specified may be ever so slightly better for SEO than a background image, only because it's more text to crawl).

区别主要在于语义。 IMG 元素应用于图片/照片等（例如，如果你把照片放在博客帖子或新闻稿或任何东西，以及通常的图标等这不是严格的可视布局元素），而 background-image 是用于那些是，很好，背景的东西。这个想法是，背景图像对理解页面的内容和图像并不重要。抓取工具不关心背景图片或其他纯视觉元素（他们关心其中的内容），但他们关心的图像添加内容的意义，无论是链接图形，内容补充，无论如何。

The difference is mainly semantic. IMG elements should be used for images / photos etc (like if you put photos in a blog post, or news post, or whatever, as well as usually things like icons, etc that are not strictly visual layout elements) whereas background-image is for things that are, well, backgrounds. The idea is that background-images are not important to understanding the content of the page, and images are. Crawlers don't care about background images or other purely visual elements (they care about the content inside them), but they do care about images that add meaning to the content, whether as a link graphic, content supplement, whatever.

还有一些使用注意事项 - 例如，您可以通过设置它们的百分比宽度来轻松缩放 IMG 父容器元素，这在响应设计和144 dpi替代视网膜显示器（其中你有一个媒体查询，例如，在视网膜显示器上放置一个300像素的方形容器在一个150像素的方形容器内）的重要性，这不是那么简单或由于依赖于许多较新的CSS3功能而广泛支持 background-image 。

There are also some usage considerations - for example, you can scale IMG elements easily by setting them at a percentage width of their parent container element, which is important in responsive design and 144 dpi alternatives for retina displays (in which you have a media query that, for example, puts a 300px square image inside a 150px square container on retina displays), which is not as simple or widely supported on background-image due to reliance on a lot of newer CSS3 features.

有一个功能关注，支持使用一个或另一个，去与最语义的选择。附带的是，一般来说，您的网站越具有语义，它的可访问性越高，抓取工具和索引器就越能够准确地解释您的内容。

In general though unless there is a functional concern that supports using one or the other, go with the choice that is the most semantic. Tying in with that is the fact that in general the more semantic your site is, the more accessible it is and the more readily crawlers and indexers will be able to interpret your content accurately.

这篇关于Div背景图片或使用IMG标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！