何时使用 IMG 与何时使用 IMGCSS 背景图像?
-
20-08-2019 - |
题
什么情况下使用HTML比较合适 IMG
标签来显示图像,而不是 CSS background-image
, ,反之亦然?
因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。
解决方案
IMG 的正确使用
- 使用
IMG
如果您打算有人 打印您的页面 并且您希望默认包含图像。—周杰伦 - 使用
IMG
(和alt
文本)当图像具有重要语义时,例如 警告图标. 。这确保了图像的含义可以在所有用户代理(包括屏幕阅读器)中传达。
IMG 的实用用途
- 使用
IMG
加上alt属性如果图像是 部分内容 例如徽标、图表或人物(真人,而非库存照片人物)。—桑乔泰法特 - 使用
IMG
如果您依靠浏览器缩放来按与文本大小成比例的方式呈现图像。 - 使用
IMG
为了 IE6 中的多个叠加图像. 使用IMG
与一个z-index
为了 拉伸背景图像 填满整个窗口。
请注意,CSS3 背景大小不再如此;请参阅下面的#6。- 使用
img
代替background-image
可以显着提高背景动画的性能。
何时使用 CSS 背景图像
其他提示
这是一个黑色和白色的决定给我。如果图像是内容的一部分,例如标志或图或人(真实的人,而不是股票的照片的人),然后使用<img />
标签加上alt属性。对于一切有CSS背景图像。
在其它时间使用CSS背景图像是做图像替换文本例如时。段/报头。
我很惊讶没有提到一个人的这个尚未: CSS转换
可以本地过渡div
的背景图片:
#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);
}
此节省了任何种类的JavaScript或jQuery的动画的褪色的<img/>
的src
。
约跃迁上 MDN 的更多信息。
以上答案仅考虑设计方面。我把它列在SEO方面。
何时使用 <img />
- 当您的形象需要 被搜索引擎索引
- 如果与内容有关,则不与设计相关。
- 如果您的图像不太小(不是标志性图像)。
- 您可以添加的图像
alt
和title
属性。 - 您想要使用打印媒体 CSS 打印的网页中的图像
何时使用 CSS background-image
- 图像纯粹用于设计。
- 与内容无关。
- 我们可以用 CSS3 来玩的小图像。
- 重复图像(在博客作者图标中,每篇文章都会重复日期图标等)。
因为我将基于这些原因使用它们。这些是图像搜索引擎优化的良好实践。
浏览器并不总是默认设置为打印背景图像;如果你打算让人们打印页:)
如果你有你的CSS在外部文件中,那么它很方便的显示公司经常使用的整个网站(如标题图片)作为背景的图片,因为这样你可以灵活后来改变形象
例如,假定有如下的HTML:
<div id="headerImage"></div>
...和CSS:
#headerImage {
width: 200px;
height: 100px;
background: url(Images/headerImage.png) no-repeat;
}
几天后,你改变图像的位置。所有你所要做的就是更新的CSS:
#headerImage {
width: 200px;
height: 100px;
background: url(../resources/images/headerImage.png) no-repeat;
}
否则,你就必须更新每一个HTML文件中的相应src
标签的<img>
属性(假设你没有使用服务器端脚本语言或的 CMS 以自动化的过程)。
此外,如果你不希望用户能够保存图像(虽然我还没有过需要做这个)背景图像是有用的。
关于一样 sanchothefat的答案,但是从不同的方面。我总是问自己:我是否会完全从网站上删除的样式表,就剩余的元素的只有的属于内容?如果是这样,我做我的工作。
有些答案使这里的情况过于复杂。这是一个非常简单的情况。
每次您想要放置图像时只需回答这个问题:
这是内容的一部分还是设计的一部分?
如果您不能回答这个问题,您可能不知道自己在做什么或想做什么!
另外,不要仅仅因为您希望“打印机友好”与否而考虑这两种技术。另外,不要从 SEO 的角度使用 CSS 隐藏内容。如果您发现自己在 CSS 文件中管理内容,那么您就是在搬起石头砸自己的腿。这只是一个关于什么是内容或什么不是内容的微不足道的决定。其他所有方面都应该被忽略。
我想添加另外两个参数:
一个 图像 如果您需要的话,标签很好 调整大小 图片。例如。如果原始图像是 100px x 100px,而您希望它是 80px x 80px,则可以设置 img 标签的 CSS 宽度和高度。
我不知道有什么好方法可以使用背景图像来做到这一点。编辑:现在也可以使用背景图像来完成此操作background-size
CSS3 属性。使用 背景图 当您需要动态时很好 在精灵之间切换. 。例如。如果您有一个按钮图像,并且希望当光标悬停在该元素上时显示单独的图像,则可以使用包含普通精灵和悬停精灵的背景图像,并动态更改背景位置。
从使用标签还有一个好处是关系到搜索引擎优化 - 即你可以提供有关图像标签的ALT属性的图像的附加信息,而没有办法提供指定通过CSS的图像时,这些信息而在这种情况下只有图像文件名可能被搜索引擎收录。 ALT属性肯定给在标签SEO优势CSS的方法。这是根据我为什么最好是指定要在图片搜索结果中的排名以及图像(如谷歌图片搜索)使用标记。
前景= IMG。
背景= CSS背景
仅在必要时使用例如背景图像容器与该图像瓷砖。
其中主要的利弊,通过使用图片强>是,它是作为SEO 强>
更好使用背景图片,你需要绝对指定尺寸。这可能是一个显著问题,如果你真的不知道他们提前或不能确定他们。
与<img />
一个大问题是覆盖。如果我想我的图像(box-shadow:inset 0 0 5px rgb(0,0,0,.5)
)上的CSS内阴影?在这种情况下,由于<img />
不能有子元素,你需要使用的定位,并添加这等同于无用的标记空元素。
总之,这是相当情景。
其他几个场景 background-image
应该使用:
- 当您希望鼠标悬停在图像上时图像发生变化。
当您想为图像添加圆角时。如果你使用img
, ,图像从圆角漏出。
在多个皮肤或设计的版本的情况下使用CSS背景图像。 JavaScript可以动态地改变的一类的元件,这将迫使它以呈现不同的图像。与IMG标记,它可以是更复杂。
这里的一个技术考虑:将图像动态地生成?它往往是一个更容易生成HTML的标签<img>
比尝试动态编辑CSS属性。
关于图像的尺寸是什么?如果我使用img标签,浏览器缩放图像。如果我使用CSS背景,浏览器只切割从所述较大图像的组块。
在使用CSS平移X关于动画影像/ Y(动画HTML的正确方法) - 如果你做的CSS背景图像的浏览器时间轴记录进行动画VS IMG标记进行动画,你会看到油漆时间大大缩短对于CSS背景图像。
有另一个原因!如果你有一个负责任的设计,希望通过媒体查询拆分低,中使用率和高清晰度图像的设备,你应该使用的背景为好。
另外,我有具有不一致的图像画廊截面尺寸,从而即使这些图像被明显地考虑内容,我使用的背景图像,并用一组尺寸居中它们的div。这类似于Facebook并在他们的专辑..
<强> IMG 强>为原因一个HTML标记,因此其应该被使用。对于引用或说明的东西,人们e.g:在文章
此外,如果在图像的 具有意义 或必须是可点击的一个的 IMG 强>比的 CSS背景更好强>。对于所有其他情况,我想,一个的 CSS背景强>可以使用。
虽然,它是需要被反复讨论的主题。
来自法国巴黎的Web学生
只是一个小的补充,你应该如果你希望用户能够“右击”和“保存图像”使用img标签/“保存图片”,所以如果你打算提供的图像为他人的资源。
使用背景图片(据我所知大多数浏览器)禁用选项直接保存图像。
一个小的输入, 我曾与响应图像放慢iPhone上的渲染长达一分钟,即使有小的图像问题:
<!-- Was super slow -->
<div class="stuff">
<img src=".." width="100%" />
</div>
但切换到使用背景图像问题消失时,这是如果定位新的浏览器唯一可行的。
IMG
负荷第一因为src
处于background-image
的情况下,HTML文件本身,而源在样式表中提到这样样式表加载后的图像的负荷,延缓了网页的加载。
HTML是用于内容和CSS是设计。是图像必要的,它需要通过屏幕阅读器拾起?如果答案是肯定的,然后把图像中的HTML。如果是单纯的造型,那么你可以使用background-image属性在CSS注入图像。正如很多人在这里已经提到,你就可以使用伪元素的图像,如果你喜欢。
另外请注意,大多数搜索引擎蜘蛛不索引CSS背景图片,因此背景图像将被忽略,你将无法获得来自搜索引擎的任何流量(总之没有SEO的好处)。
其中与标签定义的所有图像被索引(除非手动除外)和来自搜索引擎的流量可以带来,如果他们的标题/ ALT属性和文件名被适当优化(w.r.t一些关键字)。
如果你想要的图像,其将流体和规模不同的屏幕尺寸,您可以使用IMG标记。对我来说,这些图片大多是内容的一部分。对于不属于内容的一部分大多数元素,我使用CSS精灵保持下载量最小,除非我真的想动画图标等。
我用图像,而不是背景图像时,我想使它们100%拉伸的其中支持在大多数浏览器。
如果您要添加的图像只显示在网页上的特殊内容或只有一个页面,你应该使用IMG标记,如果你想要把图像在一个以上的页面,那么你应该使用CSS背景图像。
<强>另一个背景图像PRO:背景图像用于<ul>
/ <ol>
列表强>
使用背景图像,如果它们是整体的设计的一部分,并且重复在多个页面上。优选地,在背景子画面形式进行优化。
使用标签不属于整体设计的一部分,并且最有可能放置一次,喜欢的文章,人们特定的图像,而重要的图像,值得加入到 Google图片的所有图像。 强>
**我在一个<img>
标签包围的唯一重复的图像是网站/公司徽标。因为人们往往会点击它转到主页,这样你用<a>
标签包装它。