loading the same image repeatedly

I have a page in the cms part of my website (javascript is enabled and can force a browser choice), it is a calendar with lots of images:

<img src='1.gif' />
<img src='1.gif' />
<img src='1.gif' />
<img src='1.gif' />

<img src='2.gif' />
<img src='2.gif' />
<img src='2.gif' />
<img src='2.gif' />

the same image can be used o开发者_如何学运维ver 250 times, with about 1000-1500 images on the page.

Is the browser smart enough to figure out that these are all the same image, or is there some JavaScript/jQuery trickery that I can use to improve performance?

I think there is a subtlety to the question that has not been addressed. It's the same image on the same page. @Alex's answer is more appropriate for case of the same image across multiple pages.

When you are loading multiple copies of the same image within one page, the browser shouldn't care about cache/expiry headers. It should just re-use the image it loaded.

For this DOM fragment:

<img src='1.gif' />
<img src='1.gif' />

Looking at the network tab in Chrome, Firefox or IE9, you can see that there is only one call to the server by the browser. If the image has expired then the image is returned otherwise you'll get a 304 Not modified.

In short there should be no overhead from having a hundred copies of the same image on the same page, and the expiry headers don't matter.

If they have the same real path, then the browser will cache them, unless you have aggressive anti cache headers, such as expiry headers in the past.