HOW-TO: Image Preparation

I've seen several posts where people obviously aren't quite sure about the best way to set up their images, so I thought I'd put this together, and if the team want to pin it/add it to FAQs/move it somewhere else then please do so. It is aimed at the real beginner (because they’re the ones who have trouble) so some of it may seem very simplistic – but remember, we all knew nothing once!

Before I go any further, we need a tiny bit of image theory.

If you are uploading photographic type images, the format should be .jpg; if you are using clip-art style pictures, the images should be in .gif or .png format.

• You cannot have a transparent background with a .jpg but you can with a .gif/.png.
• Never save a photograph as a .gif - not only do you lose a lot of quality, but due to the way data is stored as a .gif, the file size will be far larger than it ought to be!
• The file size of an image is entirely dependant on the physical dimensions, the type of format it is saved in and the amount of compression applied. You may have heard things about image resolution - that has nothing to do with the file size (but a heck of a lot to do with the quality of a printout! That's another topic altogether!).
• These file types use what is called “lossy” compression i.e. when the file is compressed, some information is discarded...this information cannot be recovered! Therefore, always start with a COPY of the best image you have and NEVER compress the original.

File size is still an important issue - even with the spread of broadband, the majority of people connecting to the web are still on dial-up connections, and unless you are aiming at a specifically broadband market, then you should endeavour to keep file sizes to a minimum commensurate with quality to enhance your viewers’ experience.

ZC and image handling

ZC displays images in 3 sizes* - the small ones (thumbnails) shown in the various listings, a medium size used on the Product Info page and a large version accessed from the "larger image" link on the Product Info page.

*You can set different sizes for the different types of listing, but I'd suggest for the sake of uniformity through your site that you set all those to the same dimensions as your "small" setting.

You can set the sizes for the small and medium (I’ll cover “large” later) by going to admin>configuration>images. If you want all your images to be the same width but the heights may vary, then set the Width to the figure you require and the height to 0 and make sure Calculate Image Size is turned on. Conversely, if you want all the images to be the same height, then set the Width to 0 and the height to the figure you require.

You can now simply upload all your pics via FTP to your images folder and let the coding do all the work - but this will generally end up with you having a far from perfect result, and although you have spent no money on ZenCart, you will probably have invested a fair amount of time in setting it up, so why spoil it now?

Why are the results not (usually) perfect? The ideal we are seeking is a clear image that displays quickly, but by only loading one image to be used in a variety of sizes by ZC, there is usually going to be a compromise on one or the other…or both.

For example, if you only load small images at 100 pixels wide and you have your medium image width set to 400 for the Product Info page, then the quality of your image is going to be degraded (remember the “lossy” compression?) when the code expands it to four times the size.

http://www.me2uweb.net/~willowsc/ZenTestZone/test1.jpg http://www.me2uweb.net/~willowsc/ZenTestZone/test2.jpg

On the other hand, if you’ve only uploaded large files at say 400pixels wide, then although ZC will display them at your small image size of 100pixels wide, the file size of the image will not be reduced, so if your large image is 25KB, then so will your thumbnail be…and 10 thumbnails on a page makes 250KB which starts to slow your listings down to a crawl for dial-up users.

To avoid these issues, the solution is to create 3 sets of images – small, medium and large, compressed and saved at the dimensions you wish to display them and then uploaded to the images, images/medium and images/large directories. If you have hundreds of images, this may seem like a daunting prospect, but it shouldn’t be quite as bad as it sounds. Any decent image-editing application will have some system for batch-processing (carrying out the same actions on multiple files).

Optimising images for ZC

Start by deciding on the size you want the large image to display at.

NB. As mentioned earlier, you can’t set the dimensions of the large image in ZC – not in 1.2.1d anyway – but it will display at the dimensions you upload it, although you may have to tweak the javascript file for the pop-up window to open at the size you want. The file you need to edit is /includes/modules/pages/product_info/jscript_main.php. In the function popupWindow(url) change width= and height= to your sizes. (You can also decide whether or not you want scrollbars by setting scrollbars=no or scrollbars=yes.) Then save the file to includes/modules/YOUR_TEMPLATE/pages/product_info/

You shouldn’t choose a size larger than that of the original (if you have to expand it, you’re liable to lose quality). For most purposes, making the large image 400 or perhaps 500 pixels wide should be sufficient although if you’re working from a digital camera, you may want to choose a size that is a direct proportion of the camera output such as 480 or 640.

In fact, let’s assume you are working with a collection of photographs taken with a digital camera, with a mix of landscape and portrait images. This in itself poses another “problem” in that the layout of your pages will vary slightly depending on whether your image is sideways or upright. For the sake of uniformity throughout your site, I would suggest that you decide on a square image with your photographs re-sized to fit horizontally or vertically as required and the remaining area is just “white space” (I say white, but you may have a different colour as your background.)

For this explanation we want the large picture to be either 480 pixels wide or 480 pixels high depending on its orientation so that everything remains in proportion; we want the medium picture to be 240 and the small to be 120. I’m also assuming that all your images will have unique names – naming is for another tutorial! Having said that, it’s recommended that the large images are called “imagename_LRG.jpg” and medium are called “imagename_MED.jpg” – image viewers such as Irfanview (free) and Thumbsplus (commercial) allow renaming of multiple files. They also allow some of the processing below, but I’m not too familiar with them.

1. Gather all the images in a folder on your hard drive.
2. Copy all the landscape orientated pics to a new folder (call it landscape)
3. Copy all the portrait orientated pics to another new folder (portrait)
4. Run your image-editor’s batch processor (you’ll have to find out how to do this from your image-editor manual/help files) on the files in the landscape folder to re-size them all to the same width (use 480px – and if you are using standard digital photos, this should give you a height of 360)
5. Repeat the above on the files in the portrait folder to re-size them all to the same height (i.e. 480px – should give you a width of 360)
6. Now run another batch process on the two folders to
• resize your canvas or paper (depends what your image-editor calls it) to 500 pixels x 500 pixels and set the canvas or paper colour you want with the image centred. (Using a canvas slightly larger than your picture ensures a margin from anything else that may be on the webpage.)
• Optimize the images for the web
7. Unless you want to keep them separate you can now combine all the images into one folder called large as they are all 500pixels square.
8. Upload them all to images/large
9. Create another folder called medium. Copy all the images from large to it.
10. Run a batch-process on the files in medium to resize to 250 pixels square; you may as well optimize for web as well.
11. Upload them all to images/medium
12. Create another folder called small. Copy all the images from large to it.
13. Run a batch-process on the files in small to resize to 125 pixels square; you may as well optimize for web as well.
14. Upload them all to images.

You have now given ZC the best chance of giving your visitors the best visual display at the optimum download time.

In my opinion anyway! :)

Nice tutorial, all the basics are covered ;)

Thank you.

Hopefully it'll help a few ... the trouble is that anything like this does become very complicated to explain; for example, I've completely ducked the issue of base_name for multiple images, which really ought to be included as it's all part of the same process..

Maybe another day for that.

Ryk,

Thanks for getting all those bits and pieces together in one place. I have pinned the topic so hopefully it will not get lost.

Good Job! ::tup

Lots of great info and written nicely, only thing that should be added is Zen Magic with additional images. Any product with an image named (as an example) default.gif will also show default_1.gif, default_2.gif, etc. I believe these are displayed towards the bottom of the product listing in a default install. ::tup

Originally posted by ses707@Nov 22 2004, 06:07 AM
only thing that should be added is Zen Magic with additional images.

The one shop I've set up so far did not require multiple images per product and I skipped that! But I quite agree, and if no-one else has got around to it by the time I learn about it, I'll see what I can do.

At this stage, I know very little about that aspect of Zen Magic (OK, I know nothing about it!) so I thought it best to stick to what I do know about! :D

There are lots of comments about documentation throughout the forums, and I feel it would be useful to try to consolidate snippets of specific subjects into step-by-step tutorials which could perhaps be incorporated into a comprehensive manual at some stage. Although there's a vast wealth of info in the various threads, it is quite often hard to follow because of the side issues which tend to develop...he says, as he starts this thread drifting towards a discussion on documentation! ;)

Ryk,

Experience will come with time ;) Your doing great so far :D

That was a fantastic little wrap, it was a little tricky to find with the keyword searches but I found it eventually.

Now I do have a question!

So we've got the images all in their little folders (or all in the same directory as some recommend).

I am having a problem even though I have changed the file names. it is still choosing image.jpg instead of image_sm.jpg for the thumbnails on product list and image_med.jpg for the product display.

PS: yes I have changed the file suffixes for _MED & _LG to _med & _lg in images/product info image medium suffix & image large suffix (mainly to correspond with my current file naming system).
But I haven't seen anything that indicates the small image to be used for the thumbnails in the product listing ( I would prefer _tn by the way
Can someone please tell me

1. how to use /specify zen to use the small / thumbnail images?

or if I don't need to do anything
2. how does the "zen fairy" know which image to use as I am still having the issue of the product listing chossing the straight image.jpg file if I leave it there or no image shows if I just have the sm, med & large images.

3. does it make a difference if these different sized images are in the specified sm, med or large folders or all in the same product folder? some have mentioned an issue with speed?

Sorry if this is confusing.... ::frust imagine how feel.

I'm just having a major issue with load times.

4. How do you turn the multiple images off at the bottom? or how do you show a thumbnail with the link to the large image? I have an art gallery so it is important for an image to be seen at a large scale if chosen. I would like to have ultimately sm, med lg(full page & extra large for a zoom in.

As far as I understand it, the thumbnails have no suffix, the product info pages uses MED and the "larger image" uses LRG and all are picked up automatically depending on the situation, but remember that the filename must be identical (including case-sensitivity) for all three.

My set-up - which works fine - is that images.jpg are in images, images_MED.jpg are in images/medium and images_LRG.jpg are in images/large.

May I suggest you just test one using the "standard" suffixes in the "standard" directories?

The main thing about speed - particularly on a graphics-intensive site like yours - is that the images need to be optimised for the situation, and which is why I strongly recommend that all your images are saved at the dimensions you wish to display them. I use 400x400px (LRG), 200x200 (MED) and 100x100 for the thumbs and start with the largest one first and resize downwards. You will probably need something higher than 400x400 for your LRG.

In your case, the client needs to see a fast loading product list, and a fast-loading product-info. There you can put a comment to the effect that the large image will be of high resolution and that they may have to wait a few seconds for it to display.

I've seen (somewhere!) on the forums about the multiple images, but I can't remember where, and with regard to a zoom-in option...I'm sure it's possible. One way to do it would be to use the multiple images as "details" and have them link to a "zoomed" image , but I don't know how to go about coding that as a global option.

I've just had a quick look at your site Michelle (I hope you're not live yet as your sale prices are extremely generous!! :D ) and the obvious cause of slow loading is that most of your images are not optimised - your front page, for example, displays images totalling about 150KB when the total should be around 35-40KB.

As an example, your MP70017EIIS.jpg is displaying at 150x192px at a size of 28.68KB, because it is really displaying the (large) version which is actually 623x800. If you resize & optimise MP70017EIIS.jpg to 150x192 you can get the file size to around 3.5KB with no real loss of quality for that size of display.

Thanks so much Ryk for addressing my queries.

The biggiest misconception I had was about the imge.jpg being the ordinary full sized file instead of the thumbnail / small product listing image. That really hasn't been made clear anywhere. So thanks for clearing that up. :D

1. What about the "click for the larger image" link command? Is ther anyway to remove that or even better still point it to the large (image_lg.jpg).

4. And you know how you click to close the image, is there anyway to specify say right click to close left click to image_xl.jpg (full size)?

or are we to use the multiple image option for the different sizes? If so when it shows the link to the other imges does it not load the full image even when it shows as the thumbnail which would make it slow? I feel like I'm missing something really big here.

Michelle, my reply is based on what I'd do, what I already know - and, not having used the multiple images option, I know NOTHING about them - and what I believe a site visitor wants.

Starting with the visitor experience. I'm a firm believer that people seeking information on the web want it NOW (or preferably sooner!) whereas people seeking entertainment are prepared to wait. Based on that, I suggest that there is a point in your process where the information seeking turns to entertainment ie. they've followed through on a picture they like and will wait for the xl download to enjoy the bigger picture...but ONLY if you prepare them for it.

As I said earlier, my only experience so far has been in using _MED and _LRG as the suffixes in images/medium and images/large directories, and that works.

I suggest that you use the "larger image" link from your product_info page to show a _LRG image, but don't make that any bigger than 800x600 (stats show that roughly half of web users have a screen resoultion of that and roughly half have a resolution of 1024x768, so by sticking to the smaller, there will be very few people who can't see the whole image)

Leave the Close Window option as it is, but include a link in your description along the lines of "Click here to view a detailed, high resolution version of the image. Please note that this may take some time to display, and will probably require both vertical and horizontal scrolling" and link that to your _XL version.

You can even put up an estimated time if you wish - most decent image editors give you an estimate of download times.

Because I don't know if the multiple images can be used as links, one way you can achieve a graphic "zoom" would be to include a copy of your picture in the description, either as an image map with hotspots, or perhaps a little easier, as slices in a table.

I've created a rough example for you here (it's also temporary whilst my client is on holiday!!) to give you an idea of what I mean.

Ignore most of the surroundings as this site is in the early stages of development, but it'll give you a clue - obviously there's a lot of improvements you can make, but the concept is there.

I see that on your site you have gone for the description alongside the product. As your products go to the extremes in terms of shape then you're going to have a problem making everything look well-presented - if it was me, I'd be tempted to include the image in the description using html tables. (I assume you haven't got thousands of pieces of art?)

While I remember, once past your home page, your header repeats itself to fill the page 100% - and in some of the categories, the right column goes up to the top of the page. Sorry to be the bearer of bad news. :(

Ryk,

I'm trying to understand this as I'm a bit slow. If I have an image "gunitsilver.jpg"

I should have;
images/gunitsilver.jpg
images/medium/gunitsilver.jpg
images/large/gunitsilver.jpg

or something that looks more like;
images/gunitsilver_sm.jpg
images/medium/gunitsilver_md.jpg

I've had some real problems with pics and dial up times and just recently learned that my ads on ebay were taking 18 minutes to load for dial up after making a living on ebay for over a year now. I'm taking this mighty seriously. Is it possible to tell if this javascript is doing this? Andale compiles it and I was thinking of using a variation of something like this to speed up and give a decent look to my ads. Click hereMy Webpage Thanks in advance. for any insight.

Originally posted by misterbling@Jan 3 2005, 07:31 AM
Ryk,

I'm trying to understand this as I'm a bit slow. If I have an image "gunitsilver.jpg"

I should have;
images/gunitsilver.jpg
images/medium/gunitsilver.jpg
images/large/gunitsilver.jpg

or something that looks more like;
images/gunitsilver_sm.jpg
images/medium/gunitsilver_md.jpg

I've had some real problems with pics and dial up times and just recently learned that my ads on ebay were taking 18 minutes to load for dial up after making a living on ebay for over a year now. I'm taking this mighty seriously. Is it possible to tell if this javascript is doing this? Andale compiles it and I was thinking of using a variation of something like this to speed up and give a decent look to my ads. Click hereMy Webpage Thanks in advance. for any insight.

At present, you have images/gunitsil1.jpg which has a physical size of 320x240 and a file size of 15.97KB

The sizes you presently have set for displaying small, medium and large (ie thumbnail, product_info and larger image) are:

100 x 80 px
150 x 120 px
320 x 240 px

but they all use the same image which is 15.97KB.

Incidentally, the small and medium displays are out of proportion and you need to set your sizes in admin>images to 107x80 and 160x120 respectively to be in proportion to 320x240.

You need 3 separate copies of the image saved with the physical dimensions of each display option

Using your gunitsil1.jpg this is what I would use

images/gunitsil1.jpg - saved at 107x80px=2.4KB
images/medium/gunitsil1_MED.jpg - saved at 160x120=4.54KB
images/large/gunitsil1_LRG.jpg - saved at 320 x 240 =15.76KB

(I use Save for Web with Photoshop set for jpg at medium quality - your own image editor may give slightly different results, but those are the sort of file sizes you should see)

As you can see, your thumbnail is now about 15% of the size it was, which means it'll load up about 7 times quicker.

You could also reduce the quality of your background image and get the file size down another couple of KB without any discernible difference in appearance.

Your ebay pages...well, I guess the main problem is your background. There are (on my screen) 130 repeats of the backround image which amounts to around 750KB in total.

You also have a sound file on there - I don't know the size of it, but if that's pre-loading that'll slow things down too.

The Andale section uses Flash which may also be slowing things down (it's a bit hard to tell as I'm on broadband and alreadty have Flash player installed).

Incidentally, using Firefox, there's a right mess down where your Paypal Verified logo is (and the background moves when scrolling). It's OK in IE....but remember that Firefox is fast gaining ground.

Any further questions are probably best asked via e-mail/pm unless they are ZC specific (although I can't guarantee an immediate response, I'll do my best).

if you use linux, a decent application for bulk image resizing is BIRT (batch image resizing thing). it has a jpeg quality slider for selecting the fiie size/quality ratio (70%) seems to work for me, and it also allows you to prepend/append the _med or whatever to the file names as it saves them.

Originally posted by rshaw@Jan 3 2005, 07:01 PM
if you use linux, a decent application for bulk image resizing is BIRT (batch image resizing thing). it has a jpeg quality slider for selecting the fiie size/quality ratio (70%) seems to work for me, and it also allows you to prepend/append the _med or whatever to the file names as it saves them.

For editing right from Admin I've just finished integrating an Image Manager tool into HTMLArea3 for ZenCart which should give you a lot more control over how your images appear and make it easier to insert them into your descriptions.

1. Auto cache thumbnails (JPEG, PNG, GIF depending on GD).
2. Filmstrip view (browsing server and folders).
3. Online Image Editor.
4. Create folders.
5. Editor - Resize, Crop, Rotate, Save as, Upload.

You can take a look at it working on the product description screen in THIS SCREENSHOT.

Here's another screenshot with the editor screen up.

I could probably use a couple beta-testers before this goes into contributions.

Looks good - will it work with Firefox?

I'll be happy to help with beta-testing...mind you, I've got to sort out my HTMLarea problems first!!

Originally posted by Ryk@Jan 11 2005, 07:52 AM
Looks good - will it work with Firefox?

I'll be happy to help with beta-testing...mind you, I've got to sort out my HTMLarea problems first!!

Yes, I've tested and the editor and image manager both work in Firefox. I can give you a package that includes the updated htmlarea.

Email me at [email protected] if you want to help test.

Quite a little subject this..
Well I think it's important to get images right, and bandwidth being important.
Now I have followed instructions on having a thum, med, large picture, and in the format,
/images/pic.jpg
/images/medium/pic_MED.jpg
/images/large/pic_LRG.jpg

That above all works fine....

"BUT" when I create sub directories to keep things tidy it doesn't.

/images/cars/pic.jpg
/images/medium/cars/pic_MED.jpg
/images/large/cars/pic_LRG.jpg

I created the sub dirs first, then copied the MED & LRG pictures to the correct dir, then from the add product admin page added the smallest the /images/cars/car.jpg
---------
All I see showing on the page is the smallest....
I will plug away until I get it. I'm sure I'm missing the obvious..

:blink: ::frust