我们有一个网站，在该网站上我们展示了来自我们供应商的各种产品。提供商向我们提供来自其 CDN 的图像。问题是我们有一个比原始图像尺寸更小的图像框架（图像尺寸也因提供者而异），所以我们在 HTML 中设置图像尺寸是这样的（所有图像都是 200 像素 x 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的两本书（高性能网站甚至更快的网站），并且我已经实施了他所说的可以提高页面速度的规则（实际上我已经设法提高了初始页面加载速度和重新加载确实发生得很快，因为我们缓存了图像），但仍然存在主要问题 - 由于图像而导致的初始加载速度。
所以，终于进入正题了；我有一个想法将所有图像拉到我们的服务器并以我会的方式操作它们（我们有权这样做）：
- 调整图像大小以在我们的图像框架中完美匹配像素 - 因此不必在 HTML标记中放置
width和heightimg - 使用jpegtran优化图像
- 将每个提供程序图像放到它自己的子域中，如下所示：
provider1.oursite.com,provider2.oursite.com, 等等... - 这些子域实际上是机架空间 CDN 的别名，因此我将在 Chrome 中进行 6 次并行下载，因为主机名不同，根据这个
考虑到这一切——图像的大小显然会更小，因此我的结论是网站最初应该加载得更快，我们应该在YSlow或Google Page Insights等工具中获得更好的结果。我看到的可能的缺点是，由于将 CDN 与 Rackspace 一起使用，我们必须为增加的带宽付费，但事实证明这对管理来说不是问题。
我的问题是上面所说的是否有意义？我是否可能忽略了我“如此聪明”的可能解决方案的一些明显缺陷？只是这样我就不会在这上面花费大量时间，然后最终发现我错了，所以请有类似情况的人发表他的想法吗？