调整并优化图像并将它们加载到CDN中，并将它们从原始CDN与原始图像大小进行正常链接

我们有一个网站，其中显示了我们提供商提供的各种产品。提供商向我们提供来自其CDN的图像。的问题是，我们具有比原始图像尺寸（图像尺寸也提供者之间的变化）较小的图像帧，所以我们在HTML这样设定的图像尺寸（所有图像由200像素是200像素）：调整并优化图像并将它们加载到CDN中，并将它们从原始CDN与原始图像大小进行正常链接

<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标签
优化图像与jpegtran
把每个供应商形象自己的子域，像这样：provider1.oursite.com，provider2.oursite.com，等等 - 这些子域名实际上是一个别名对于rackspace CDN的，因此我会有6 parallel downloads in Chrome，因为主机名称不同，根据到this

考虑到这一切 - 图像的大小，显然是更小的，因此我的结论是，该网站应首先加载速度更快，我们应该得到更好的结果的工具，如YSlow或Google Page Insights。我看到的可能的缺点是我们不得不支付增加的带宽，因为我们的CDN与Rackspace一起使用，但事实证明这对管理并不是问题。

我的问题是上述说明是否有意义？我是否可以忽略我的“如此聪明”的可能解决方案的一些明显的缺陷？就这样，我不会在这上面花费大量时间，然后最终发现我错了，所以请有一个类似情况的人发表他的想法？

来源

2013-02-11 Nikola

将图像调整到所需的大小非常棒。继续，并保留HTML尺寸，因为这有助于渲染。小心过度使用 - 你只能在2-4个区域分割 - 大多数研究表明2是最好的。但是，你可能做的＃1修复的方法是只加载折叠图像上方的图像，并在用户滚动时延迟加载（使用JavaScript）其他图像。（Y

来源

2013-02-11 19:47:20

感谢您花时间回答！所以，基本上我应该在2-4个域名中按比例分配我们的300张图片，而且应该比6个域名（甚至每个提供商（8）的每个域名）更快？我认为，因为Chrome现在支持每个域6个并行下载，所以“每个提供商的域”可以给我带来最大的好处。就像我看到的那样 - 现在我从他们自己的CDN的8个不同域加载，方式我也将有8个域名，但与优化图像，所以这应该会更快。请你可以对此发表评论？ – Nikola 2013-02-12 10:24:25

调整并优化图像并将它们加载到CDN中，并将它们从原始CDN与原始图像大小进行正常链接

回答

相关问题