我应该将这些图像变成精灵吗？如果是这样，我该怎么做？ （包括图片）

Question

我有一个带有客户页面的asp.net（vb）网站。在该页面上，我们为一些较大的客户提供了超链接徽标。每个徽标大小相同（w 207 h 119）。有3列和5行图像，总共15个徽标。

目前，图像是这样编码的 - 但我想我需要删除asp图像并只使用常规图像：

<td>
<asp:HyperLink ID="HyperLink15" runat="server" ImageUrl="~/images/clgm.jpg" 
NavigateUrl="http://www.gm.com" Target="_blank"    
itemprop="url">HyperLink</asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="HyperLink16" runat="server" ImageUrl="~/images/clford.jpg" 
NavigateUrl="http://www.ford.com" Target="_blank" 
itemprop="url">HyperLink</asp:HyperLink>
</td> 

依此类推，适用于所有15个客户。速度和性能会更好吗（通过减少http请求，如果我将这些图像分成一个图像？假设是这样的话，我应该将这些asp：超链接和asp：图像更改为常规的HTML链接和图像？那么我怎么能用它们精灵？我对css不太好，所以我真的很感激任何人都可以提供这方面的帮助。

如果需要，下面是它们的样子 - 再次，3列和5行（这是我更加困惑的地方）：

Answer 1

  

速度和性能会更好吗（通过减少http   请求我将这些图像分成一个图像吗？

是的，这将是一般的性能提升。加载一个图像对十五个是一个很大的整体HTTP请求节省。

  

假设是这样，我应该更改这些asp：超链接和   asp：图像只是常规的HTML链接和图像？

那个ASP代码是有原因的吗？它是在开发/生产服务器之间转换HTML吗？如果没有，我真的不太需要处理一个简单的HTML链接，因此它可以节省几毫秒的处理时间，将其转换为HTML。

  

然后我将如何精灵呢？

CSS-Tricks.com has a good sprite tutorial。
A List Apart also has a good sprite article

一般来说，你会做这样的事情：

1. 为每个IMG代码指定一个ID，例如id="logo-gm"
2. 在CSS中，给每个精灵一个宽度/高度（通过在容器级别应用它可以使这更容易）
3. 为每个唯一ID提供精灵图像和位置的背景，以便显示正确的徽标。

您的CSS可能如下所示，但您的实际CSS需求将取决于您自己的网站设计：

.logo-sprites img { 
  width: 207px, 
  height: 119px; 
}
#logo-gm{ 
  background: url(/path/to/img/logo-sprite.png) no-repeat 0 0; 
}
#logo-ford{ 
  background: url(/path/to/img/logo-sprite.png) no-repeat -207px 0; 
}

您的HTML可能如下所示：

<ul class="logo-sprites">
    <li><img id="logo-gm" alt="GM Logo" /></li>
    <li><img id="logo-ford" alt="Ford Logo" /></li>
    ...
</ul>

对于后台CSS：

background: url(/path/to/img/logo-sprite.png) no-repeat -207px 0; 

-207px表示'x'值，您减去宽度以将图像移动到下一个虚拟列。 0表示2D平面的“y”值，并减去移动到下一行的高度。从左上角开始是点（0,0）。

我希望有所帮助！

Answer 2

是的，精灵很好。 在我看来，拥有精灵图像是大部分工作。

您现在可以使用一点css访问您的精灵。 请看这里的工作示例。 http://jsfiddle.net/DWy2W/

<style>
.sponsor{
    width:80px;
    height:50px;
    background-image: url(http://i.stack.imgur.com/m93cd.jpg);
}
.gm{
    background-position: 0px 0px;
}
.ford{
    background-position: -80px 0px;
}
.osi{
    background-position: -80px -50px;
}​
</style>
<a href="http://www.ford.com">
    <div class="sponsor ford"></div>
</a>
<a href="http://www.gm.com">
    <div class="sponsor gm"></div>
</a>
<a href="http://www.osi.com">
    <div class="sponsor osi"></div>
</a>​

Answer 3

是的，减少http请求的数量绝对是个好主意。在您的情况下，如果您使用精灵，您基本上将15 http请求减少到1.您不必为此使用任何图像标记，您可以使用一些div或li并使用background-image css属性来指定图像。所有元素都需要具有不同的css类名称，并且每个类都需要具有特定的背景位置。查看此文章http://css-tricks.com/css-sprites/

Answer 4

Sprites绝对是有用的，因为它们的数量和图像的标准尺寸。正如其他答案所述，它肯定不会伤到你！

要生成精灵，有许多在线选项可供选择，例如http://spritegen.website-performance.org/

在VS.NET中，您可以使用CssSpriteGenreator或Talifun.web.CssSprite NuGet