Php 评级系统图像效率

我正在我的网站上建立一个五星评级系统，有两个选项来显示星星的图像。这些代表评级的图像将显示在一个列表中，每个记录显示一个，该列表的长度将增加到大约200-300条记录

选项一：每个可能评级的完整图像，包括半星。所以我需要11张图片，从00000（还没有评级）到11111（5星）。这种方式意味着网页将加载9个图像，但列表中每行仅显示一个图像

选项二：三幅图像0（无星）、1/2（半星）、1（一星）。因此，页面仅加载3个图像，但对于列表的每一行，显示5个图像的组合，以获得5星级评级。例如1,1,1/2.0.0（2.5颗星）

所以问题是什么更有效？加载的图像越少，网页上显示的图像就越多5倍；加载的图像越多，每条记录显示的图像就越少5倍。我想要的方法，将加载页面最快的200项列表

---

谢谢。

这是最有效的方法

把这11张不同评级可能性的图片放到一个大的图片文件中，不同的可能性叠加在一起。然后，您可以使用CSS设置用于表示星星的元素的背景。每当用户将鼠标悬停或单击包含此精灵的元素时，您可以使用CSS更改元素的背景位置，以显示评级的不同表示形式

#ratings {
   background-image: url('myratingssprite.png');
   background-position: 0 0;
}
  #ratings:hover {
    background-position: 0 150px; /* Change the background's position to a more suitable area of the ratings sprite */
  }
  #ratings.four_stars {
    background-position: 0 200px; /* Move around the sprite to show the area with the 4 stars representation */
  }

---

无论哪种方式，你都应该使用CSS精灵，并且只加载一个图像。10分评级系统从0到9，正如Paulpro所说，使用CSS精灵。只需设置不同的类来显示不同的图像集。你知道一个好的教程来解释这一点吗？我从未使用过CSS精灵。Thanksher是一个不使用图像的版本：