Horrible or Awesome #3 – Optimise Your Images

Optimizing your images in Photoshop or another image editing program takes time – your valuable time. Just leaving them huge and making the customer download 3MB of images for each page in your site takes time too – the pesky customer’s time.

Everybody knows customers love to wait to buy your products. Play a game! See how big you can make your images, see how long your load time suffers, and then see how your conversion rates fare!

Challenge yourself to approach dialup speeds over your cable modem using your stellar layered uncompressed image design – I’m sure your customers will love it.

Do you optimise your images as much as possible?  Doing so will make your site look better and make your customers shopping experience better.  Read on…

There are many image editing programs out there, and I can’t cover each and every one. However, the process for all of them is roughly the same.

You need to either “Save for Web” in Photoshop or “Export > JPEG/GIF Optimizer” in Paint Shop Pro. What this does is allow you to compress your images in quality and color depth so that they download quicker. Quicker loading images means happier customers that spend more time looking at your products and not waiting for the page to load. Happier customers mean more sales and higher conversion rates.

You will find that some images save smaller in GIF (usually images with fewer colours) and some save smaller in JPEG (photos, product images, larger images, headers). Play around, and try to find the best mix of quality and size.

Remember: To pop the page up in less than 8 seconds on 56k, you need to have less than 30k of images.

This is probably impossible with an ecommerce site, but it gives you a measuring stick of how long your images are going to take to load.

This post is courtesy of my good friend Jason over at JC Commerce.

Horrible or Awesome #2 – Thumbnail Images

Why would you want to speed up load times for slow connections, or make your pictures look better? Good looking images are the sign of professionalism and class, and you surely don’t want your site to have either of those.

Sure, successful shop owners say better images sell more products, but you don’t have to listen to those people. After all, what does a successful shop owner know that you don’t?

Never mind that image contributions like the excellent On The Fly Auto Thumbnailer or the UltraPics contribution actually decrease your workload while producing better images. Keep posting your 800k images to your site, and laugh at those people who talk about “Site optimization” and “load times”. You think jagged images are nice, and that’s just fine with me.

How does that grab you – if you are running standard osCommerce, maybe with a template – I can almost guarantee that you have not truly considered YOUR CUSTOMERS satisfaction. Read on…

Thumbnail contributions are the bee’s knees. They rock, and you are going to love them. They improve load times, they make your images look better, and a site with thumbnails projects an overall more professional appearance to the customer than one with browser-resized images.

There are quite a few thumbnail contributions out there. Some allow you to upload small, medium and large pictures, some allow additional product images to go along with your main image, and some automatically resize large images into multiple sizes using image libraries like GD, GD2 or ImageMagick installed on your server (contact your host to see which you have). The point is, you can get an image contribution that will work with your hosting plan even if you don’t have the advanced image library features.

A couple I have checked out and liked (I am sure there are more):

UltraPics: Allows multiple images, multiple file sizes, optional automatic resize using php libraries.

On the Fly Auto Thumbnailer: Simple, automatic thumbnail generation for your single product image. Not as much cool added stuff like multiple images, but easier to install. Requires GD2 or ImageMagick libraries to function.

Most of this post is courtesy of my good friend Jason over at JC Commerce.

What I usually do for my clients is amend a couple of files, like this;

  1. admin/categories.php – in here I add calls to “large_product_image”. I usually just copy “products_image”.
  2. I then add an extra row in the database to deal with this.
  3. A couple of language changes to make the customer aware that “products_image” is now a thumbnail, and “large_products_image” is now used for a larger image only in the image pop-up.
  4. Change 1 line of code in “popup_image.php” to check whether a large image exists and show it. if it doesn’t exist, then show the thumbnail.

All of that is maybe 5 minutes work and is less complicated in my opinion than adding other contributions. Here is one I made earlier which you can drop in on an unmodified store…

largeimage.gif

As you can see, it just adds another browse button.  And then does the rest of the processing when you “update” the product.  Easy as 123.

Horrible or Awesome #1 – Leave the layout stock

Leave the layout stock

Because after all, if it wasn’t the best layout of all time then why did they distribute it as ‘stock’ in the first place? Never mind that your site will look like every other lazy guy who decided that product presentation was overrated. Never mind that it has no flow, coherence, or style. And totally forget that it makes you look like some high school kid in your basement trying to take their money and run.

Lack of design talent? We understand. After all, if you could make nice websites, you wouldn’t be trying to sell whatever it is you make online – you would be selling nice websites.

Never mind that you can get ready made, beautiful drop in designs. Nevermind that the fine folks of the osCommerce community have made a number of easy to understand template systems that cut out nearly 100% of the PHP programming and let you design your site in a simple, free HTML editor. You picked a FREE cart, and darnit it’s going to be free if it kills you (or your chances for success). Those people that say you have to spend money to make money are all full of garbage…

Does that sound like you? Now read on…

Ok guys, nobody says you have to go buck wild with the layout, change the layouts of the columns and headers, and try to switch osCommerce over to a pure CSS XHTML Valid masterpiece. However, I think everyone will agree that the osCommerce stock blue-gray color info boxes just don’t work with every product. So what can you do?

Edit the Stylesheet! It’s called stylesheet.css, and it’s right in your catalog root folder. The cool thing is, you can change colours just by replacing their hex code (like #FFFFFF) with a word like “blue” if you don’t know color hex codes! This is the most drop dead simple way of getting away from stock without design changes. Change your colors! Please!

Want to change it even more but don’t know how? Download and install a Template System contribution.

There will be purists like myself who will say ‘Template systems are bad’ and ‘Template systems break compatibility with future versions’ and ‘Template systems are the devil’. It does not matter – pound for pound, a template system like STS or BTS is going to improve the visual layout of your store and make it more pleasing to the customers eyes if you have little or no design or php experience. What both of these systems do is give you just one page to edit plain HTML in, and it ‘skins’ the entire osC site.

BTS contribution. STS contribution. The great thing about the template systems is that there are numerous free templates that other community members have made available in the contributions section. Just search the contributions for ‘template’ and I am sure you will find them.

Changing the stock buttons is another quick and easy way to update the look of your cart. In the contributions section there is a variable cornucopia of free button sets that community members have uploaded for your use. Just check the ‘Image Contributions’ section for button sets, or see my previous post about an online button generator that I found.

Another option is to purchase a commercial template, and of course, I made another post offering just that. This is the quickest and easiest way to give your Shop a whole new look in seconds.

Did you enjoy reading this? Did the first part really hit home?

What are you going to do about YOUR shop and YOUR customer experience?

Most of this post is courtesy of my good friend Jason over at JC Commerce.

Buy Button Only after Selecting Option

I started this modification maybe 5 years ago, but abandoned it when my customer decided he did not want it anymore. I noticed someone on the official osCommerce forum ask for the same thing so I dug out my old code and got it working again.

If that looks workable, I can carry on and clean up the code a bit more and hopefully get it to the stage of a ready contribution release.

Tableless Design: Power Factory

This site, posted today in the feedback forum of the official osCommerce Forum is  promoted as a “table less” and “completely remade to css” design.

Although that’s not quite true (there are some tables), it’s a massive improvement on the normal osCommerce, and well worth looking at (under the bonnet).

Check it out:  POWER FACTORY