I am porting an old eCommerce site to MVC 3 and would like to take advantage of design improvements. The site currently has product images stored in 3 sizes: thumbnail, medium (for display in a list) and expanded for a zoomed look. Right now we are having to upload 3 separate images that are sized exactly right, provide 3 different names that match what the site expects, etc., it is a pain.
I'd like to upload just 1 file, the large one, then let the site reduce it to needed sizes, and I'd like the flexibility to change the thumbnail and list sizes depending on user preferences, form factor (e.g. mobile, iPad, desktop), etc. so might need many copies of the same image. My question is should the image be reduced then saved several times upon upload and if so what is a good storage/naming convention?
The other idea is to store just the single image but resize it programmatically before serving it to the client. Has anybody done this and what are the tradeoffs besides a few more machine cycles? How do you pass a temporary image in memory to the client (there is no URL)?
Best Answer
I am lead developer for a UK-based travel company. One of the projects I implemented was a web version of our image library which can be queried automatically to provide photography for our site. It contains about 150k images, of which about 60-70k are available to the website (the highest rated).
We started off by defining about 5 sizes, creating these size versions on the fly and storing them in Amazon S3. Price was minimal but Amazon is built to fail gracefully, so we'd often see missing images. The more we developed our site, the more we hated only having five sizes of image available.
We moved to a dynamic resize model, in that we can add width and/or height parameters to the URI of any image to have it render in that size on the fly. We cache the resized image (using an MD5 hash of the request URI as filename).
To get image #12345 (our images are fetched via a db, but you could replace this with a file path) at width 200 and jpg quality 80%, the URI format would be:
http://images.domain.com/?imageid=12345&w=200&q=80This solution was easy to implement and works seamlessly - there is no discernable delay to the website visitor, even on pages with 20-30 images.
We're doing this all with .net, although I've also written a PHP image resize script which does the same thing.
Hope that helps, Adam