How Does Image Re-Sizing Work?

I sell books. If I upload an image that is 725 pixels tall and tell the cart that I want product pages to display this image at 200 pixels tall, product details pages 300 pixels tall, and a zoom image of 500 pixels tall, plus a cart image of 100 pixels tall, does it create separate image files for all those different sizes? Or does it just use the 725 version and resize it on the fly?

Also, a lot of my images are only 500 pixels tall. I'm thinking of moving to 725 pixels for all new images added. If I tell the cart that I want my zoom images to be 725 tall, will it stretch all my 500 pixel images to that, or does it just display the most it can (500 for a 500 pixel image)?

Just wanting to understand this a little better…

Thanks in advance for your help.

I think it sizes them on the fly, but not certain. I know if you leave the size field blank on the detailed image it should show the file at it's native size. I believe if you set a 500 to display at 750 it would stretch and pixelate it.

OK thanks. Sounds reasonable. I didn't want to be trying different sizes of images and scatter resized images all through my image folders. I guess that doesn't really hurt anything but I'm opposed to mess for the sake of it.

In V3 the images are resized to your specified sizes when you upload/import them, hence an image will generate filepaths like below, this is for one image. Homepage Thumbnail (Scroller) Image, Category Image, Product Image, Full Size Product Image.


Each image is of the same product, but are sized to the sizes specified in the cart settings.

So what happens when I decide that I want my product details page images to be 350 instead of 300? Does it go through and resize them somehow, or does it stretch the already created 300 pixel image?

In other words, is this resizing a one-time process that happens at upload time and never again after that? If so, one needs to be pretty sure what sizes one is going to use throughout the store before uploading them.

If you change the sizes in Settings>Thumbnails, you will need to regenerate your thumbnails, similarly to clearing your site cache, but using 'ct' instead of 'cc':

As for resizing images to larger than the original, I don't know, as I've never tried it. If and when I add products, I always use a pre-optimised larger image than the largest image I intend on displaying.

Depends if you've got a lot of images uploaded already or not, but you could create a backup of your database and /images/ directory (and subdirectories/files) and try it out. Stretching images is never a good idea anyway, you'll always get distorted images. If it messes up, restore the database, wipe out the /images/ directory, then restore the /images/ directory from your backup.

You should always try to present the clearest product images to accurately describe and show the product for sale, if that means having to change your site layout to use 300px instead of 350px because 300px is the best you can do, then so be it imo.

Ok that's good to know about regenerating the thumbnails. There ought to be buttons or links for both that and clearing the cache in the admin so as to make it a bit more obvious that these things are possible. When I was trying out BigCommerce, I noted that they made it clear you had to regenerate thumbnails whenever you change the image size settings, and gave you an easy and clear way to do it.

It really is a crazy way of handling images in a modern cart. It's not saving on resources because sending requests for loading 4 different images in not as efficent as resizing an image that is already exisisting in the brower cache. Although it does produce much better quality images so it's swing and roundabouts.

Agreed. The amount of posts on this forum where the solution is “clear your cache” is unreal. I've no doubt CS-Cart get a lot of support tickets which are solved with the same process, so I have no idea why they don't mention this in the cart somewhere.