How to optimize multiple repetitive images in HTML table

I am generating a large HTML table, and I use images for many of the cells. For example, one column might either have a thumbs up image or a thumbs down image. If I have 300 rows and 200 of them are thumbs up, they all have

 <a href="link"><img src="http://myserver.com/thumbsup.png"></a>

so it seems like I am going to the server 200 times to get the same image and also 100 times开发者_StackOverflow for the thumbs down image.

Is there any way to make this more efficient? Do browsers recognize this and grab a cached value of the image?

What is the best practice when returning a large HTML table with lots of repeating images?

---

Every browser will cache the image and only download it once.

---

I would create a css class with a background attribute. Your html would be smaller in each page call, since the css is cached and smaller than 300 src="http://myserver.com/thumbsup.png".

Check this thread to get more information about css background images, with pros and cons.

---

As Jordan said, the browser will cache the image after the first download. But if you have a lot of images to load, then you should consider making an image sprite.

---

As mentioned above, use css sprites. Just remember to add a text in the anchor, because people with css disabled(screen readers) and search engines will just see a blank link (and then text-indent:-9999px; this text via css so that it doesn't show in front of the background image). It will also help your SEO.

For example:

<style type="text/css">
a.th-up{
    background-image:url(http://myserver.com/sprite.png);
    background-position:-10px -20px; /*or whatever the "thumbsup" image's coordinates are in your sprite*/
    text-indent:-9999px;
}
</style>
<a href="link" class="th-up">Thumbs Up!</a>

---

I would use css in this situation.