My chess board features 64 squares, each with a picture of a board piece on either a light or dark square. To ensure proper formatting, a Clear knight is placed on the board. The design utilizes a div element with a background image (representing light or dark board pieces) and an img tag within the div displaying various knight pictures. In the illustration below, there are 1 past move knight, 1 current move knight, and 61 clear knight images layered over the 64 board pictures.
How can I avoid downloading duplicates of the same images?
For instance:
An excerpt from the corresponding html code is shown below:
<table id="game" class="gametable">
<tbody>
<tr>
<td class="tdcls" id="0"><div class="DarkBoard 0"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>
<td class="tdcls" id="1"><div class="LightBoard 1"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>
<td class="tdcls" id="2"><div class="DarkBoard 2"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>
<td class="tdcls" id="3"><div class="LightBoard 3"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>
<td class="tdcls" id="4"><div class="DarkBoard 4"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>
<td class="tdcls" id="5"><div class="LightBoard 5"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>
<td class="tdcls" id="6"><div class="DarkBoard 6"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>
<td class="tdcls" id="7"><div class="LightBoard 7"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>
</tr>
I utilize CSS to style the board pictures:
.LightBoard{background-image: url(http://freethecube.com/kt/pics/LightBoard.png);}
.DarkBoard{background-image: url(http://freethecube.com/kt/pics/DarkBoard.png);}
And here's the HTML for the Clear knight spacers:
<img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80">
How do I prevent redundant downloads of the same images?
I'm unsure if the browser will fetch the first instance of an image and then reuse it for similar elements, or if each identical image is downloaded separately multiple times. Essentially, my concern is whether there is a more efficient approach or if I am worrying unnecessarily about bandwidth usage. Downloading 129 images with every page refresh makes me cautious.
If you're considering downvoting, please request additional clarification or rephrasing on any specific aspect of the issue.