I want to build a website with a lot of images and hence image manipulations like amazon, ebay, flipkart,etc. I have been suggested to use services like Cloudinary, Imgix, etc to resize my images since it would be better to store one version of each image although I'd need several versions with different sizes. I'd like to know how efficient these services are. Are there any issues? I'd like my website to be very fast and responsive. I have heard concerns like "Take into account that you're at least doubling the transfer latency involved, which will frequently dominate the time required to complete an image operation.
Normal: end_user->your_user->end_user
Through these services: end_user->your_user->you->your_user->end_user"
(Disclaimer: I handle developer relations at imgix, and will be answering this post as it applies to our stack)
You're absolutely correct that for a completely uncached image, there are more "hops" involved to serve an image. For the first user to view an image, this can result in a slightly increased latency. After that, however, the image is cached by both our rendering cluster and global CDN, which makes subsequent requests for any image based off of the original much faster. Either way, the byte savings from serving correctly-sized images to the browser will almost always outweigh any additional latency from initial requests for an image.
Here's a simple diagram that shows the flow when an image has not yet been cached:
Once the image has been cached (after a single user requests it), the loop becomes much tighter:
After an original image is cached at our rendering cluster, generating derivatives is also much faster (in this case, a 600px wide version), since they don't require an additional trip to your origin server: