HOW-TO: Image Preparation

[michellewardley]

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.

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.

[Ryk]

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.

[Ryk]

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.

[misterbling]

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.

[Ryk]

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 1######80 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 1######80px=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).

[rshaw]

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.

[joemama]

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.

[Ryk]

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!!

[joemama]

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 info AT zencarttemplates DOT com if you want to help test.

[neilgriff]

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..

::frust