Page 1 of 31 12311 ... LastLast
Results 1 to 10 of 304
  1. #1
    Join Date
    Oct 2004
    Location
    Southport, UK
    Posts
    4,170
    Plugin Contributions
    13

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



    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! :)
    The JSWeb Team
    www.JSWeb.co.uk
    PCI Compliant Host Provider (UK/IRELAND) - ZenCart Specialists

  2. #2
    Join Date
    Mar 2004
    Posts
    2,842
    Plugin Contributions
    0

    Default

    Nice tutorial, all the basics are covered ;)
    Brian

    It's not limitations you seek, it's possibilites...

    - Zen Cart 1.2 Beta Tester!

  3. #3
    Join Date
    Oct 2004
    Location
    Southport, UK
    Posts
    4,170
    Plugin Contributions
    13

    Default

    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.
    The JSWeb Team
    www.JSWeb.co.uk
    PCI Compliant Host Provider (UK/IRELAND) - ZenCart Specialists

  4. #4
    Join Date
    Jun 2003
    Posts
    33,823
    Plugin Contributions
    0

    Default

    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
    Please do not PM for support issues: a private solution doesn't benefit the community.

    Be careful with unsolicited advice via email or PM - Make sure the person you are talking to is a reliable source.

  5. #5
    Join Date
    Dec 2003
    Location
    Astoria, Or
    Posts
    455
    Plugin Contributions
    2

    Default

    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

  6. #6
    Join Date
    Oct 2004
    Location
    Southport, UK
    Posts
    4,170
    Plugin Contributions
    13

    Default

    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!

    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! ;)
    The JSWeb Team
    www.JSWeb.co.uk
    PCI Compliant Host Provider (UK/IRELAND) - ZenCart Specialists

  7. #7
    Join Date
    Mar 2004
    Posts
    2,842
    Plugin Contributions
    0

    Default

    Ryk,

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

    It's not limitations you seek, it's possibilites...

    - Zen Cart 1.2 Beta Tester!

  8. #8
    Join Date
    Nov 2004
    Location
    Port Neil South Australia
    Posts
    397
    Plugin Contributions
    0

    Default

    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.
    Michelle Wardley
    Fine Artist & Musician

  9. #9
    Join Date
    Oct 2004
    Location
    Southport, UK
    Posts
    4,170
    Plugin Contributions
    13

    Default

    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.
    The JSWeb Team
    www.JSWeb.co.uk
    PCI Compliant Host Provider (UK/IRELAND) - ZenCart Specialists

  10. #10
    Join Date
    Oct 2004
    Location
    Southport, UK
    Posts
    4,170
    Plugin Contributions
    13

    Default

    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!! ) 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.
    The JSWeb Team
    www.JSWeb.co.uk
    PCI Compliant Host Provider (UK/IRELAND) - ZenCart Specialists

 

 
Page 1 of 31 12311 ... LastLast

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •