Ideal Image Sizes, Image Optimising and Jagged Edges

General General Questions
1

I have questions about images which I will put to the cs cart support team too.



I have an image intensive site. I want it to run fast (of course) and am upgrading to a dedicated server.



So I am setting up product images. I’ll use the detailed popup with automatic thumbnail creation.



My questions are:


  1. What image size is recommended for optimum results


  2. Will optimising images using 3rd party software be wise. I have a licence for the jpeg advanced image optimiser http://www.winsoftmagic.com/

    and am wondering whether to use it or not.


  3. Our old site on xcart suffered badly from image jagged edges - really P*** me off after spending time loading good images. I don’t know the code but does cscart handle images in a way that avoid this? (I bought a 3rd party image mod for xc which helped a lot but I suspect that, as with all things cscart, imaging far exceeds xc’s abilities)



    Any tips or thoughts would be appreciated. I’d like to set this up right to begin with.
2

Auto Thumb setting :

50% jpeg at 120x120px offers me a relatively good resolution for all screen sizes

50% Gif’s are also good although I prefer a 65% quality to remain smooth.

Optimizing, I don’t do as I’ve got very little images at the moment however would proberly use photoshop/imageready for the task

3

If your site is graphically intensive, you’ll definately want to optimize your images. Optimizing can reduce file sizes significantly. I’m not familiar with the software you are using, but many different programs do the job well, I use photoshop.



I don’t know what’s “recommended” … it’s really different for every type of pic, and experimenting to find what works for you is probably better than any standard. The more colors, the less optimization is possible.



FWIW, I’ve optimized my images too much on my current site but felt compelled to reduce load times. Over-optimizing makes for fuzzy pics. The thumbnail creation settings in CS-C have an optimizing (quality) setting for your thumbnails.

4

I also posted something similar a while back.



Some of my thumbnails looked jagged after they were automatically resized by the cart.



I don’t mean the compression of the image but the way the GD Library module calculates the pixel reduction. It mainly effects images containing straight edges and was worse on the smaller thumbnails (a larger image of 500 x 500 reduced down to 180 x 180 pixels looks fine).



I don’t know if there any further settings available to be able to smooth edges or anything like that?



I love the time saved with this feature but I wish the end result was a little bit better.

5

Irfanview is a great photo viewer/editor, that can handle bulk size and image modifications.



Just point it to a directory, and select your mod options. It can rename, convert, and resize all at once.



I use it all the time in place of the big gun photopaint.



cscart does have a nice thumbnail making routine, but you have to know how it works. (Zyles showed me.)



Under settings/thumbnails, you check the create thumbnails from detail images.

Set the size of the thumbnails you want created in pixels.

Then, go to your product or category. Delete any images you already have there.

Under the popup large image setting, select your full sized image used for popups. (Point it to the file or url of your choice.)

The thumbnail image will be created automatically, based on your thumbnail settings.



Its slick, and it works great. Check it out and see.

6

Thanks for your thoughts and tips on software. I’ll follow them up. Here’s cs cart support recommendations (by the way, the best $ I have spent other than the cart itself is cscart support time, they are excellent)…



What image size is recommended for optimum results - It completely depends on the design of your site. We can only advise you to use the 90-120 pixels width for the thumbnail image.



Optimising images? Yes or No? - As far as I understand this software is used for compressing digital images in JPEG format. So you, of course, can use it before uploading images to the CS-Cart.



Jagged images - We have never had any problems with the quality of images in CS-Cart. So we hope that you will be completely satisfied with this CS-Cart functionality.





So basically, stick to 90-120 pixels for thumbs ( I would anyway), most definitely optimise although watch for image degradation from over-optimising (mentioned by Arlen). I’ve definitely over-optimised some of the images on my old site too which is why I want to spend time working out a good image loading routine on the new site.



Granthams said:


[quote]

Some of my thumbnails looked jagged after they were automatically resized by the cart.



I don’t mean the compression of the image but the way the GD Library module calculates the pixel reduction. It mainly effects images containing straight edges and was worse on the smaller thumbnails (a larger image of 500 x 500 reduced down to 180 x 180 pixels looks fine).[/quote]



The size of the original detailed image that is uploaded and the degree of optimising are the trickier issues. A bigger detailed images definitely produces better quality thumbnails. Over optimising makes blurry pictures.



My carts still in development so I can muck around with it a lot. I’ll experiment with the degree of jpg optimising balanced with the size of the detailed image to come up with a reasonable solution. I’ll definitely run the jpg clean freeware program thru the final image file to rid unnecessary textual data. I’ll post back here with my results…