It struck me the other day that not caching image files would be an easy way to speed up Magento but am I missing something?
I resize all my images Thumbnails 65x65, Small 161x161, Main 250x250 before I upload them so they are a known quantity.
It seems that responsive websites will resize them in the html/css anyway (including cached images).
I store my images and skin files on a CDN and it seems like one huge overhead to resize the images and copy them to the CDN for every image view when I already know the size of the images. Surely it would be far quicker to render a page if it just points to the same image file on the CDN without all the caching overhead.
So I guess I'm asking, am I missing something obvious (or unobvious) here, as I feel I must be given the seemingly non-existent posts about it anywhere on Google or the Forums?
Has anyone tried it?
I'm not sure exactacly what you are suggesting? Do you want to always servce the full size image for your customers, and relying on them having it in there local cache?
The only place you need to show your end users the full size image would be on the product page. And even there you can resize it.
I picked a random client who don't do anything really to optimize there images, just be be as close to the average site as possible.
So they have images comming in at 1800x1800 pixels. They are around 220KB's in size, meaning if they had to serve these on the product listing showing around 40 products, it would be 10MB, that is one heavy load right there ;-). Doing this for each product listing would be to say the least stupid.
Now we could say compress these down to 1000x1000 like we do for the product view pages, that turns the images to around 56KB, but thats still 2.25MB's per page just in raw images, and thats still a lot for in just image resources.
However we do scale it them down to 168x168 and that results in in about 6 KB which is 240KB's which is just as about as much as one of the bigger images, and if you are already offloading these to a CDN service you have imporved your load as much as you can right there :-).
Your customers will experience more product listings then product views and these listings will most likely have different products on them (depending ofc on how big you product assortment is). Saving the load a tiny bit on the product page and in checkout again assume your end users have a big enough cache on there machine to hold all your images in them. I don't think this is woth it.
I hope this makes sence :-)
I think maybe I need to explain my thinking a little more.
As I have already resized all my images before they are uploaded, I can't see any benefit in copying those files into their own cached directories.
For instance, If the customer looks at a category and they view 30 products at a time in their grid view on the screen, as that screen will always use the small image and I have already resized it before uploading it, why bother copying the image into the cache on the server.
ie why serve them
Serving the cached version requires making a copy of the image file, saving it to the server and serving the copy, whereas just serving http://media.addaballoon.com.au/media/catalog/product/s/2/s2253801.jpg requires no copying of files.
I can completly agree with you on the matter of upscaling images, in terms of size of the files it wont matter when Magento upscales the images, since its still the same content of the files.
The image processor will keep the original version of the image, so it can modify the image to your desires, there is a few options you can set on it depending on what result you want.
There is a few benifits of upscaling the images, eg. making sure that templates that haven't specified a height and width of all there images dont break with smaller images.
In the end the great thing about Magento is that you can choose what fits you. If you don't have high ress images for your site, and don't want to modify the images in any way you can choose not to use it :-).
Caching images is something we do a lot of and massively increases your peformance. Its really advisable.
There are a lot of ways to do it, based on how your site and content is targeted.
Just cacheing is really only a portion of the problem, there are a lot of elements that can help improve speed of images eg, using browser based optimization.
If you want to test it out on your site, we have a free plugin that we built that automatically does the caching and will also do things like allow you to adjust quality of images, and even optimize based on browser. ( eg you can automatically serve your images as JPEG-XR to internet explorer users or WebP for android and Chrome users)
Feel free to try it out and let me know if it improves things for you!