How to optimize multiple repetitive images in HTML table

Question

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"&gt;&lt;/a&gt;

so it seems like I am going to the server 200 times to get the same image and also 100 times 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?

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

I would use css in this situation.

Answer 5

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>