search engine friendly ecommerce website design
Home About Us Client Testimonials Ecommerce Projects FAQ Contact DOMAIN NAMES WEBSITE HOSTING SEO

visit ecommerce website design demonstration
ecommerce website design features
Call for a price on ecommerce website design
Our news blog
Helpful ecommerce articles for selling online
support

australian online store solution
  
 Our Terms & Conditions

 Copyright

Sitemap
» Adding Products Our Helpdesk RSS.

Working with images

A quick guide showing you how to use images on your online shop.

Having good quality images of your products is very important for an online shop. Because shoppers cant physically touch your merchandise, its the only way shoppers can see what they are buying. It is also very important to have as many images of your products as possible. With Your Online Shops, you can have up 7 different images per product - all with a clickable enlarged view.

Your online shop uses 3 image files to display the products main image and 2 image files to display each of the 6 additional images.  You can choose to use 1 size for all images, however Its better to have all the images at  the actual sizes they will be displayed on the page. This will ensure high quality images and much fast loading web pages. Fast loading web pages mean your shoppers dont have to wait long to see their selection and Search Engines are now giving prominence in search result pages to websites that load faster, over sites that are slow.

How web browsers display images.
Images must be downloaded by the browser before they can be displayed. The larger the image file size is, the longer it will take to display the image in the browser. Also, if the web page has determined that the image must be a certain size, but the downloaded image is not at that size, the web browser must resize that image so it can be displayed correctly. If the image file is large, this slows down your web browser considerably making the website appear slow. Alternatively, if the image file is too small, the browser must enlarge the image, which will show the image as being blurry. You can have web sites that "cache" images, so that the image will not have to be downloaded each time, instead the image file is stored in the web browser cache, or website cache. The problem here is, if that image is later changed or modified, the new correct image may not be displayed because the cache has not been updated with the new image. This is not helpful to shoppers who rely on your shop having accurate and up to date images of your products.


The Products Main Image, and where these 3 Images sizes are used.
The 1st image shoppers will probably see of your product, is the small listing image.
This image appears for the product when a Category listing is viewed (See below).











Or when the product is being featured on the home page or placed on special (See below)











The 2nd and middle sized image is used to display the items image on the products information page. It is a much larger image that the listing image. (See below)
















The 3rd Image is the image that is shown when a shopper clicks on the enlarge button in the products information page. This is the largest size image used.














What images sizes to use.
The images sizes and format are important to ensure your website pages load quickly and without errors.
Following are the specifications.
File format: jpg, jpeg, gif or png.
Resolution: 72 pixels per inch
Colour: RGB
Sizes:
Small listing image: 120 pixels wide (length can be whatever you like, but try and keep the image no longer that 200 pixels).
Main description image: 180 pixels wide (length can be whatever you like, but try and keep the image no longer that 300 pixels).
Enlarged description image: 300 pixels wide (length can be whatever you like, but try and keep the image no longer that 400 pixels).

How to name Images
All images need to have a unique name. Any image with the same name will be replaced by the new image. you can use up to 64 characters
Use the products name for the image name, also include the image size and ensure the file name is correct.
Search Engines like Google, whilst they cannot actually see what the image is, they can read the name of your image. Where you use the "-" character, Google will interpret this as a space between words. Google now display images in Search Results pages, so to improve your place in these listings, try and include your business name in the image name.
Example:
your-online-shop-ibm-thinkpad-laptop-computer-120.jpg
your-online-shop-ibm-thinkpad-laptop-computer-180.jpg
your-online-shop-ibm-thinkpad-laptop-computer-300.jpg

Don't use spaces, instead use the dash key -. Search Engines can now read image names and consider a dash (-) to be read as a space.
Use only these characters. abcdefghijklmnopqrstuvwxyz 1234567890 _-
Don't use theses characters / or or ' or " or & or ? or  full stops. (Full stops can only be used as a prefix for the file type eg .jpg)
Avoid the use of capitals or uppercase.

One last tip. Keep a copy of all the images you use on your shop. Organise them in to folders for each product. This will make it easy for you to find product images if ever you need to reload them.



 


Back