调整大小和优化图像并将它们加载到CDN中，而通常情况下将它们与具有默认图像大小的原始CDN链接起来 [英] Resizing and optimizing images and loading them into CDN vs normaly linking them from the original CDN with default image size

问题描述

我们有一个网站，向我们展示供应商提供的各种产品。供应商向我们提供其CDN的图像。问题是我们的图像帧比原始图像小（图像大小在提供程序中也有所不同），因此我们在HTML中设置图像的大小是这样的（所有图像均为200px x 200px）：

We have a site on which we show various products from our providers. Providers provide us with images from their CDN's. The problem is that we have a smaller image frame than the original image sizes (image sizes also vary among providers), so we set the image sizes in HTML like this (all images are 200px by 200px):

<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）（高性能网站和甚至更快的网站），我ve实施了规则，他说这会提高页面速度（实际上，我已经设法提高了初始速度页面加载速度和重新加载确实发生得非常快，因为我们缓存了图像），但是仍然存在主要问题-由于图像的初始加载速度。

We have roughly around 300 products from 8 providers, which means we have 300 images on our site which is the main reason the site loads slow (not to mention how slow it is on mobile). Now, I've read both books from Steve Souders (High Performance Web Sites and Even Faster Web Sites) and I've implemented The Rules he says would increase page speed (and actually I've managed to increase the initial page load speed and the reload does happen quite fast because we cache the images), but still the main problem remains - the initial load speed because of the images.

所以，终于到了重点；我有个主意，可以将所有图像拉到我们的服务器上并对其进行操作（我们有权这样做）：

So, finally getting to the point; I have an idea to pull all the images to our server and manipulate them (we have a permission to do so) in a way that I would:

• 调整图像的大小以适合我们的图像帧中的完美像素-因此不必在其中放置宽度和高度 HTML img 标记


• 使用 jpegtran


• 将每个提供者映像放置到其自己的子域中，例如： provider1.oursite.com ， provider2.oursite.com ，等等...-这些子域实际上是机架CDN的别名，因此，我会有在Chrome浏览器中进行6次并行下载，因为根据此

• resize the images to fit pixel perfect in our image frame - thus not having to put width and height in the HTML img tags
• optimize the images with jpegtran
• put each provider image to its own subdomain like so: provider1.oursite.com, provider2.oursite.com, etc... - these subdomains would actually be an alias for a rackspace CDN's and thus I would have 6 parallel downloads in Chrome because the hostnames differ, according to this

给出所有这些-尺寸图片中的e显然会更小，因此，我的结论是，该网站最初应加载得更快，并且使用 YSlow 或 Google Page Insights 。
我看到的可能的缺点是，由于将我们的CDN与Rackspace一起使用，我们将不得不为增加的带宽付费，但是事实证明，这对管理层来说并不是问题。

Given all this - the size of the images will clearly be smaller and thus my conclusion is that the site should initially load faster and we should get a better result in tools like YSlow or Google Page Insights. Possible downside that I see is that we would have to pay for increased bandwidth because of using our CDN's with Rackspace, but as it turns out that's not a problem to the management.

我的问题是上述说法有意义吗？我是否可能忽略了如此聪明的可能解决方案的一些明显陷阱？只是为了避免在此上花费大量时间，然后最后弄清我错了，所以请遇到类似情况的人发表他的想法吗？

My question is does the above stated make sense or not? Did I maybe overlook some obvious pitfall of my "so clever" possible solution? Just so I don't spend considerable amount of time on this and then in the end figure out that I was wrong, so please can someone who had a similar situation post his thoughts?

推荐答案

将图像调整为所需大小非常好。继续并保留HTML尺寸，因为这有助于呈现。注意过度分片-您只能跨2-4个域分片-大多数研究表明2是最好的。但是，您可能可以做的＃1修复方法是仅将图像加载到首屏之上，然后在用户滚动时延迟加载（使用JavaScript）其他图像。 （是

Resizing the images to the desired size is fantastic. Go ahead and leave the HTML dimensions as that helps rendering. Be careful about oversharding - you should only shard across 2-4 domains - most studies show that 2 is the best. But the #1 fix you can probably do is to only load the images above the fold, and lazy load (using JavaScript) the other images when the user scrolls. (Y

这篇关于调整大小和优化图像并将它们加载到CDN中，而通常情况下将它们与具有默认图像大小的原始CDN链接起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！