我们有一个网站，我们向我们的供应商展示各种产品。提供商向我们提供其CDN的图像。问题是我们的图像帧比原始图像尺寸小（图像尺寸也因提供商而异），因此我们像这样设置图像尺寸（所有图像都是200像素×200像素）：
<img src="image1_Provider1.jpg" width="200" height="200" />
<img src="image2_Provider1.jpg" width="200" height="200" />
...
<img src="image37_Provider8.jpg" width="200" height="200" />
我们有来自8家提供商的大约300种产品，这意味着我们网站上有300张图片，这是该网站加载速度缓慢的主要原因（更不用说它在移动设备上的速度有多慢）。现在，我已经阅读了Steve Souders（High Performance Web Sites和Even Faster Web Sites）的两本书，我已经实施了The Rules他说会提高网页速度（实际上我已经管理过了）为了增加初始页面加载速度并且重新加载确实发生得非常快，因为我们缓存了图像），但仍然存在主要问题 - 由于图像的初始加载速度。
所以，最后说到这一点;我有一个想法，将所有图像拉到我们的服务器并操纵它们（我们有权这样做），我会这样做：
width和height放入HTML img标记provider1.oursite.com，provider2.oursite.com等等 - 这些子域实际上是机架空间CDN的别名，因此我会{{3因为主机名不同，根据6 parallel downloads in Chrome 考虑到所有这些 - 图像的大小显然会更小，因此我的结论是网站最初加载速度更快，我们应该在this或YSlow等工具中获得更好的结果。 我看到的可能的缺点是，由于使用我们的CDN与Rackspace，我们将不得不支付增加的带宽，但事实证明这对管理层来说不是问题。
我的问题是上述说明是否有意义？我是否可能忽略了一些明显的“聪明”解决方案的陷阱？所以我没有花费相当多的时间在这上面，然后最终弄清楚我错了，所以请问有类似情况的人能发表他的想法吗？
答案 0 :(得分：2)
将图像大小调整为所需大小非常棒。继续并保留HTML维度，因为这有助于渲染。要小心过度分数 - 你应该只对2-4个域进行分析 - 大多数研究表明2是最好的。但是，您可能做的＃1修复只是在用户滚动时仅加载图像上方的图像，以及延迟加载（使用JavaScript）其他图像。 （Y