Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Optimising Images for Oscommerce catalog


Kopite

Recommended Posts

I always see oscommerce stores with mis-alligned images or images of differing size and/or quality.

 

I don't want that to happen to me.

 

I have Photoshop and am willing to learn how to optimise my product images for oscomerce.

 

Is there any tips or guides out there to help me?

 

ie. do I need to alter the iamge attributed in oscommerce? What is the best image size to work with, what effects give a nice crisp image in oscommerce etc?

 

Thanks

Link to comment
Share on other sites

The only real optimising you need, is to get the balance between image quality and file size. The more you compress a jpg, for instance, the more quality you will lose. While the less you compress it, the heavier it will be but at better quality. A 400px image is a good size for the main image and shouldn't be too heavy in file size. Whether that is square 400x400 or rectangular 300x400 or 400x300.

You need to install one of the thumbnail mods also, to make sure the thumbnails retain their quality. It will also reduce the file size. If you don't, the code will just squash down your 400x400 image or worse still, your 300x400 image, to the size set in admin for small images - default, 100x80 - while still retaining the original file size. These squashed down thumbnails are the ones you have noticed as being of bad quality.

Link to comment
Share on other sites

I agree with Peter. The balance between file size and image quality can be a bit tricky, but Photoshop can help you with this. Here's what I do with my images before I upload them to my site.

 

Before you save the file, go to Filter>Sharpen>Unsharp mask, and adjust the sliders. Play around a bit with this and you'll see a big difference in clarity of the image. Be careful though...a little goes a long way. (I generally use 92, 0.8, 0 as my slider settings). Then go to File>Save for web. The "2-up" tab at the top will let you see your original image as well as the optimized one to it's right. Use the "Quality" slider to the far right to fine tune the image to your liking while keeping an eye on the file size displayed beneath the image. As you move the Quality slider to the left (lower file size) you will see, in real time, the resulting image and the loss of quality. This is what Peter was talking about in terms of quality vs file size. Move the slider back to the right and the image will look better, but the file size will increase (surprise!) Somewhere on the low end (20-30%) is what I generally end up using, however, if it's a photo of a person (client) on the "About Us" page, I'll bump up the quality slider to 50-60% to help them look their best. My resulting files, 350 x 350ppi, end up being 17-30K each, which isn't too bad. And if you have a lot of images and really want to squeeze 1-2K more out of them, go to Edit>Preferences>File Handling and turn off the image preview. It means there will not be a preview image in your admin side, which is a real negative, but it saves some space.

 

Install a thumbnail mod, as suggested above, and you're good to go!

 

Ron

"Outside of a dog, a book is man's best friend.

Inside of a dog, it's too dark to read."

 

GROUCHO (1895-1977)

Link to comment
Share on other sites

I always see oscommerce stores with mis-alligned images or images of differing size and/or quality.

 

I don't want that to happen to me.

 

I have Photoshop and am willing to learn how to optimise my product images for oscomerce.

 

Is there any tips or guides out there to help me?

 

ie. do I need to alter the iamge attributed in oscommerce? What is the best image size to work with, what effects give a nice crisp image in oscommerce etc?

 

Thanks

 

Hey AP, first a few things to consider.

How big will your pop-up image be (where will you be getting the image from?) and is it of high quality?

For the web the resolution of JPG images only needs to be 72dpi.

My large images are 500 x 322, file size 34 KB. I "Saved for Web..." in Photoshop after working on them. Settings - JPEG High, Optimized, Quality: 60, Blur: 0.

My thumbnails are 120 x 86, file size 4 KB. My Unsharpen Mask filter is always set to - Amount: 40%, Radius: 2.0 pixels, Threshold: 3 levels. But I also play with Brightness, Contrast, and Color Balance.

Once your done playing around with the images in Photoshop and have them good enough for your liking and their download time is minimal, your almost there. :rolleyes:

I used this contribution, easy to install, - Big Images 1.25

Go into your Admin>Configuration>Images and set your Small Image Width & Height

 

To see an example of what I am talking about and the Big Image contribution in action, check out my work in progress - http://handeshobbies.com/catalog/

 

By the way, most of my large images I cropped out of the same image as the thumbnail so they might not look so nice. I started with poor quality images... oh well. <_<

 

Hope that helps a bit more. Any more questions feel free to ask. ;)

- :: Jim :: -

- My Toolbox ~ Adobe Web Bundle, XAMPP & WinMerge | Install ~ osC v2.3.3.4 -

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...