Larger Image in Zen Cart

The size which is displayed, when clicking on ‘larger image’ is the size which you upload into Zen Cart.

The system automatically re-sizes images to fit your ZenCart design.  There may be one size set in product view, another image size when displaying a list of products, and yet another size when displaying the product as a special on the front page.

It is only when clicking on ‘larger image’ (or some people have ‘enlarge image) that you see the actual size of the image just as you have uploaded it.

So make sure:

1. That the size is, in fact larger (there is nothing more frustrating than clicking on ‘larger image’ and the image is the same size (or sometimes smaller)

2. That the size is not too large!  We have seen images that are so large they fill up the whole screen, and the customer does not know what has happened!

If you want more help with photo on your website, you may want to read more in our feature article Editing Your Photos for Web

A couple of important rules of thumb for you to remember:

1. Image size - between 4kb and 20kb per image (depending on the no of images per page)

2. Page size - each page on your site should be a maximum of 50-80kb in total (though I reckon in these days of broadband that going to 150-200kb is probably acceptable).

3. Stickability – 50% of people leave the average website within 30 seconds! If your website hasn’t even loaded after 30 seconds, how many people will hang around?

I have recently had some clients who have experienced some challenges from this issue of image size – both clients I am thinking of have shopping cart (or ecommerce) websites. One of them had product images that were about 50kb and the other had product images in the order of 400kb!

Now, just having one image that is that much bigger than standard (4k to 20k in size) is not going to be a huge issue. But in shopping carts, you might have a page with 30 of these images showing at a time! 30 images at 400kb each is a whopping 12,000kb (12 MB) per page! Even at 40kb per image you are still looking at 1200kb (1.2MB) per page.

How long does it take to fully load a web page that is 1.2Mb or 12Mb in size? Lets check the Download Speed Calculator :

Page Size – 50kb

• 7 secs – Dial Up - At 56kb (which is quicker than people on Dial Up usually get)
• 1 sec – Very Slow Broadband (256KB)
• Instantly – Slow Broadband (512kb)
• Instantly – Medium Broadband (1500kb)

OK Page Size (150kb)

• 21 secs – Dial Up - At 56kb (which is quicker than people on Dial Up usually get)
• 4 secs – Very Slow Broadband (256KB)
• 2 secs – Slow Broadband (512kb)
• Instantly – Medium Broadband (1500kb)

Huge Page Size (1200kb)

• 2 mins 55 secs – Dial Up - At 56kb (which is slightly quicker than actual Dial Up speed)
• 36 secs – Very Slow Broadband (256KB)
• 18 secs – Slow Broadband (512kb)
• 9 secs – Medium Broadband (1500kb)

Massive Page Size (12,000kb)

• 29 mins 15 secs – Dial Up - At 56kb (which is slightly quicker than actual Dial Up speed)
• 6 mins – Very Slow Broadband (256KB)
• 3 mins – Slow Broadband (512kb)
• 1 min – Medium Broadband (1500kb)

So – you can see the problem with large image files!

From a speed perspective there is no question that you want small file sizes. So why would anyone want to use large image files? To preserve image size (ie the physical dimensions of the image) and image quality (low-resolution, medium-resolution, high resolution, very high resolution). If you are selling products (or services for that matter), you want the customer to be able to see the product in its best light – the image needs to be clear (not blurry) and large enough to see all the detail.

So, it comes down to a choice between SPEED & CLARITY!

The great thing about the way images display on the web, is that usually you can look at a fairly low resolution image and it looks pretty similar to a much higher resolution image. Have a look at the series of 300 x 200 pixel images below:

Original Image (164kb)

Very High Resolution (32kb – 19.5% of original size)

High Resolution (20kb – 12% of original size)

Medium Resolution (12kb – 7.3% of original size)

Low Resolution (4kb – 2.4% of original size)

Now, you may have much better eyesight than I have, but all of these optimised images except for the low resolution (4kb) image look pretty good to me! If it were my site and size was getting tight (ie needed to count every kb!) I would opt for the medium resolution (12kb) image. Which one would you go for?

If we had 30 products on our page and each product had one image, then using the 12kb image, we would be looking at a page total of 360kb – still twice as much as recommended. If we used the original 32kb image though – our page total would be a whopping 960kb! Do you think the high resolution (32kb) image is 3 times as good as the 12kb image? Is it worth the 300% longer it will take the page to load? How many potential customers might you lose while the page is taking the extra time to load?

The other option to changing the resolution (or quality of the image) is to reduce the physical size of the image. So – if you just have thumbnail images on your page, use a suitable size image – say 40×40. Do not load a 400×400 pixel image as a thumbnail – it will take 10x as long to load and it is only going to display at thumbnail size anyhow! Here is an example of that image as a high resolution thumbnail (60×40):

High resolution (4kb)

Of course, a much better thumbnail would be a single cherry like this:

High resolution (4kb)

If you need help with editing your photos, contact us at WebCare. We can give you a quote on processing your image files to a suitable resolution to save on the web.

For example, an average digital camera these days will take photos that are up to5MB (5000 KB) in size. For uploading to a shopping cart – you want them to be more like 12-15kb (ie 0.25% of their original size!). For eBay you can get away with bigger images – perhaps 30-40 kb.

So – how do you reduce the size of your images? Many computers will come with photoediting software already installed or you digital camera may have come with software. If you want to buy a fully-featured photo editing package for home, it is hard to beat Photoshop Elements (for Windows and Mac). But, if you want a package that is easy to use and FREE, then have a look at PIXresizer (Windows only). This software:

• Has an ‘Apply recommended’ option to make it even more user friendly
• Works with single files as well as with multiple files all at once (so if you have 100 product files – you can convert them in one batch!)
• Can convert between graphics formats (.bmp, .gif, .jpg, .png, and .tif)
• Can be used to create thumbnails (takes one move on a slider)
• Lets you specify the dimension so the image

So, if you haven;t already got suitable software, head on over to PIXresizer, download the 3.3MB file, and give this a try.