问题
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" />
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:
- resize the images to fit pixel perfect in our image frame - thus not having to put
widthandheightin the HTMLimgtags - 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
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?
回答1:
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
来源：https://stackoverflow.com/questions/14808953/resizing-and-optimizing-images-and-loading-them-into-cdn-vs-normaly-linking-them