如何使用html，css，jquery等下载更少的相同图片？

我有一个由64个正方形组成的棋盘。在所有这些正方形中，都是一块木板的图片，就像在浅色或深色正方形图片中一样。同样为格式化问题，放置了一个清除骑士。我在div背景图片（浅色或深色木板）中使用img，在div中使用各种骑士图片。在下面的图片中，有64个局面照片上方有1个过去移动之夜，1个当前移动骑士和61个通关骑士照片。

我如何下载许多相同的图片而不下载许多相同的图片？

例子：

呈现此内容的html片段为：

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

我有css渲染板照片：

.LightBoard{background-image: url(http://freethecube.com/kt/pics/LightBoard.png);}
.DarkBoard{background-image: url(http://freethecube.com/kt/pics/DarkBoard.png);}

和清除骑士间隔符的html：

<img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80">

我如何下载许多相同的图片而不下载许多相同的图片？

我不确定浏览器是否将下载图片的第一个实例，然后将相同的图片分配给相同的元素，或者是否所有这些图片都被下载了很多次。我本质上是在问是否有一种显然更有效的方法，还是我担心带宽一无是处。如果我每次刷新都不下载129张图片，我将完全不用担心。

在您投反对票之前，请让我重新说明或详细说明问题的某个方面。