我有箭头图像，我需要在不同的角度上，左，下，右
我在猜什么可能会更好 1：通过css改变图像方向并加载主图像
<img src="a.png">
<img src="a.png" style="transform: rotate(90deg);">
<img src="a.png" style="transform: rotate(180deg);">
<img src="a.png" style="transform: rotate(270deg);">
2：使用该角度制作新图像并调用
<img src="a.png">
<img src="b.png">
<img src="c.png">
<img src="d.png">
或任何其他方式??
最重要的是我将在android html app中使用那个html，所以非常微小的事情。 整个html将从andorid
的assest文件夹中调用答案 0 :(得分：0)
只要您确定所有目标浏览器都支持它，通常会更快地使用CSS转换。
这是有道理的，如果您考虑一下：在本地CPU上进行一些计算比加载4个单独的图像更快，因为网络速度几乎总是比CPU速度慢。
但是，您也可以考虑缓存：使用4个单独的图像，浏览器可以缓存这些图像，以便每页加载时不再从Internet加载它们。
尽管如此，除非我们在这里谈论数百张图片或者网络服务器非常慢，否则性能速度极其微不足道。
答案 1 :(得分：0)
如果你必须在不支持CSS转换的浏览器上使用它，那么你别无选择，你必须使用第二个。
那就是说你可以将四个箭头组合成一个图像然后使用CSS spite位置从较大的图像中拉出正确的方向。
<img src="arrow.png" class="direction-up">
<img src="arrow.png" class="direction-right">
<img src="arrow.png" class="direction-down">
<img src="arrow.png" class="direction-left">
定义了适当的CSS类，并根据图像大小计算位置。
图像首次下载并点击本地浏览器缓存后，差别很小，40ms以下的任何内容都比人眼实际看到的更快。
通常小图像只需1-2毫秒即可下载（但每个图像的请求/响应开销要长得多），因此将它们组合成单个图像精灵实际上会使其更有效。
下载单箭头图像与下载4个箭头组合的恶意代码可能会花费相同的时间（根据您的浏览器将其报告到最接近的.1ms的能力），因为大部分时间实际上都是网络开销请求。