performance - Resizing and optimizing images and loading them into CDN vs normaly linking them from the original CDN with default image size -

performance - Resizing and optimizing images and loading them into CDN vs normaly linking them from the original CDN with default image size -

we have site on show various products our providers. providers provide images cdn's. problem have smaller image frame original image sizes (image sizes vary among providers), set image sizes in html (all images 200px 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 around 300 products 8 providers, means have 300 images on our site main reason site loads slow (not mention how slow on mobile). now, i've read both books steve souders (high performance web sites , even faster web sites) , i've implemented the rules says increment page speed (and i've managed increment initial page load speed , reload happen quite fast because cache images), still main problem remains - initial load speed because of images.

so, getting point; have thought pull images our server , manipulate them (we have permission so) in way would:

resize images fit pixel perfect in our image frame - not having set width , height in html img tags optimize images jpegtran put each provider image own subdomain so: provider1.oursite.com, provider2.oursite.com, etc... - these subdomains alias rackspace cdn's , have 6 parallel downloads in chrome because hostnames differ, according this

given - size of images smaller , conclusion site should load faster , should improve result in tools yslow or google page insights. possible downside see have pay increased bandwidth because of using our cdn's rackspace, turns out that's not problem management.

my question above stated create sense or not? did maybe overlook obvious pitfall of "so clever" possible solution? don't spend considerable amount of time on , in end figure out wrong, please can had similar situation post thoughts?

resizing images desired size fantastic. go ahead , leave html dimensions helps rendering. careful oversharding - should shard across 2-4 domains - studies show 2 best. #1 prepare can load images above fold, , lazy load (using javascript) other images when user scrolls. (y

performance cdn