Zen-Cart Image Files
When adding products to your Zen-Cart catalog you have the option to reference or upload an image. Zen-Cart will automatically resize this image depending on the display that requires it. A sidebox for new products or featured products will require a small image (default height of 80) while a product display page will require a medium sized image (default height of 120) and finally you have the option to click on an image in the product display page to view a large photo.
When adding an image to a product you can either reference an existing file on the server or upload an image. The file path references the /images/ directory by default and will upload new images to this location. At this point you can leave good enough alone and allow Zen-Cart to manage your images sizes for you. By default Zen-Cart will include size attributes in the <src img> tags so they will display properly in all their locations. When doing this clients are still required to download the full size image then the browser resizes it when rendering the page. This can be extremely painful in terms of bandwidth utilization if you have a typical homepage that is full of products (example: www.Warclick.com.
A better way to manage your images and keep you site lean and mean is to make three versions of each image. This will allow clients to download a small 2-4K image for thumbnails instead of a full size 80-300K image then resize it. Zen-Cart has this functionality built in however you will need to do some extra preparation to use it. There are two directories in the images directory named Medium and Large and if you save your images with _MED and _LRG in these folders respectively Zen-Cart will display these alternate version for you automatically. The result will need to look like this:
Example file name for this case will be xep_hairy.jpg
Your small image with height of 80 would be located at the root of your images folder:
http://www.xekoshop.com/images/xep_hairy.jpg
Your medium image with height of 120 would be located in the medium folder:
http://www.xekoshop.com/images/medium/xep_hairy_MED.jpg
Finally your large image with native height would be located in the Large folder:
http://www.xekoshop.com/images/large/xep_hairy_LRG.jpg
If you would like more information on doing massive amount of file renaming for this purpose see this article on renaming files.
Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.
Comments
No comments yet.
Leave a comment