CSS图像精灵

我在我的网站中使用4个独立的图像，现在如果我使用图像精灵来显示这4个图像，它会减少http请求，如果是这样，我想知道。CSS图像精灵

考虑下面实例1：（这里是2 HTTP请求发送）

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
#home { 
width: 46px; 
height: 44px; 
background: url(sevenwonders.gif) 0 0;//first http request 
} 

#next { 
width: 43px; 
height: 44px; 
background: url(sevenwonders.gif) -91px 0; //second http request 
} 
</style> 
</head> 
<body> 

<img id="home" src="something.gif"> 
<img id="next" src="something.gif"> 

</body> 
</html>

考虑例如2以下（2个HTTP请求发送）

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 

<img id="home" src="tajmahal.gif">//first http request 
<img id="next" src="pisatower.gif">//second http request 

</body> 
</html>

谢谢你这么多宝贵的时间。

来源

2016-02-28 Mari Selvan

你的问题到底是什么？在第一个示例中，您只有一个HTTP请求，因为它只有一个图像，但使用了两次背景偏移量。 –

谢谢你@ johnny kutnowski .anyhow我做了两个http请求的单个图像。这是我的疑问 –

可以请你详细解答@johnny kutnowski –

按照您的代码并使用示例图像进行说明，以下证明您无论是否重复执行每个图像都只会执行一次HTTP请求。

考虑以下几点：

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
#home { 
width: 46px; 
height: 44px; 
background: url(http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg) 0 0;//first http request 
} 

#next { 
width: 43px; 
height: 44px; 
background: url(http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg) -91px 0; //second http request 
} 
</style> 
</head> 
<body> 

<img id="home" src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Aurora_as_seen_by_IMAGE.PNG"> 
<img id="next" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"> 

</body> 
</html>

这仅返回3个请求：1％的图像中的主体和1的CSS背景图像，使用了两次。

有一个在你的代码标记和CSS的滥用然而问题。您不应将image-background属性设置为img标记，该标记本身就是一个图像。

选择一种方法，并坚持下去：要么在你的身体使用的图像（这将导致在多个图像，并且因此多个请求），或使用中性元素，如一个div与指定background-image性能，使用background-position抵消子画面图像。

来源

2016-02-28 11:52:57

很好解释。 @Mari Selvan它取决于设计的要求来选择方法。但目标应该是尽快加载页面并尽可能减少请求。所以使用精灵无论是可以的都是好事。 +1 – CodeRomeos

@MariSelvan乐于帮忙！如果您认为这解决了您的问题，请考虑接受我的回答，以便未来的用户也可以从中受益。 –

首先，我不知道为什么你选择使用<img>标签并附背景图像呢？
其次，每个图像src是一个HTTP请求（CSS和HTML标签），因此使用精灵无疑是一个好主意，当你选择显示的图像作为背景图像。
您可能会考虑将1px x 1px透明gif加载到img标记的src中，以最大程度地减少http加载。（可以将其拉伸至所希望的宽度和高度）

希望它帮助。

来源

2016-02-28 11:44:10

不错的柜台..谢谢男人真的很有帮助@ shay Zalman –

当然.. 我刚刚注意到我没有准确回复关于http请求...如果你加载两次相同的图像，只有一个http请求可以确认。 @ mari-selvan –

没关系..它是我可怜的英语。@ shay Zalman –

CSS图像精灵

回答

相关问题