Question

I have an asp.net (vb) website with a clients page. On that page, there are hyperlinked logos to some of our larger clients. Each logo is identical in size (w 207 h 119). There are 3 columns and 5 rows of images, so 15 logos in total.

Currently, the images are coded like this — but I’m thinking I need to remove the asp images and just use regular images:

<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> 

And so on, for all 15 clients. Would it be better for speed and performance (by reducing http requests if I sprited these images into one image? Assuming that’s the case, should I change these asp:hyperlinks and asp:images to just regular html links and images? And then how would I sprite them? I’m not too good with css, so I’d truly appreciate any help anybody can offer in this regard.

If needed, below is what they look like — again, 3 columns and 5 rows (that’s where I get even more confused):

Answer 1

Yes sprites are good.
Having your sprite image is most of the work in my opinion.

You can now access your sprite with a bit of css.
See here for working example.
http://jsfiddle.net/DWy2W/

<style>
.sponsor{
    width:80px;
    height:50px;
    background-image: url(https://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>​