Managing Images In Actinic
Actinic Images - Best Practices
When listing products in your ecommerce store, you will need to provide good quality images. These images should be optimised so as not to slow down page loading times and waste bandwidth, yet large enough to be clear and easily seen.
Optimum Image Dimensions
Image widths and heights are measured in pixels (px for short). Ideal image dimensions are a matter of opinion, however in general (200px x 200px) or (200px x 150px) will be ideal. These provide a large enough image for clarity, yet do not overpower a page on your site. If visitors to your site are likely to want larger images to view, these can be provided via the additional information facility, with a button labelled 'larger image' for example.
Optimised Images Explained
In addition to choosing the correct dimensions for your images, it is important to ensure they are 'optimised'. Optimised means that the size of the file is taken to the bare minimum before degredation or graining can be seen on the image. To illustrate this point, you will see three images below, all are 200px X 150px, yet the size of each file is considerably different.
| ORIGINAL | OPTIMISED | OVER-OPTIMISED | ||
 |
 |
 |
||
| Size: 38.2 Kb | Size: 9.3 Kb | Size: 2.4 Kb |
The image on the left is the original image, the middle is optimised and the third is over-optimised. The smaller the image size (measured in Kilobytes), the quicker it will load and less bandwidth it will use. As you can see in the above example, the 'optimised image' is a 1/4 of the size of the original, yet your eyes are seeing the same quality image. This is 'image optimisation' in a nutshell. Optimised images improve page loading times, reduce bandwidth use and have no effect on your visitors experience - a 'win win' situation all round.
How To Optimise Your Images
To optimise your images, you will require some image editing software. We use Adobe Photoshop, however this is a professional image suite and at around £500 to purchase, it is expensive if this will be your only use for it. There are a number of cheaper alternatives, the main two features you are looking for are:
- Ability to specify the image dimensions in pixels
- Optimise the image using 'JPEG' compression
'JPEG' is a commonly used, standard method of compression for images, if you would like to know more about this method of compression, click here. If you are not too interested in finding out about it, rest assured that at least 95% of the images you see on the internet will be JPEG format. An image saved as a JPEG has the file ending '.jpg' i.e. 'example.jpg'.
JPEG Compression Setting
When saving images as a 'JPEG' format, there is a compression setting, which ranges from 1-100. '100' is maximum size and '1' is minimum size. Dependant on the quality of the original image, varying levels of compression can be achieved. Most optimised images fall in the range of 50-70 on the 'JPEG' compression scale. There is no set standard, you keep lowering the compression until the image starts to degrade. Some images can happily be saved as 30-40 compression whereas some need to be 80-90. The original image is often the key, if that is a large very detailed photo, then lower compression can be achieved. In the example above, the original is saved as '100', the optimised is '60' and the over optimised is '20'. You get to choose this compression rating when saving your images.
Store Your Completed Images Within The 'Site1' Folder
When you create your store, Actinic creates a 'site1' folder and all of your store details and files are contained within this folder. I always create a 'ProductPictures' folder within the site1 folder and store every image i will be using within it. This means that Actinic will never have any difficulty locating your images and more importantly, all of your images will be included in your snapshot automatically. Click on Actinic Snapshots for further information on snapshots.
If you have a large catalogue with hundreds or even thousands of images, you may find having them all within a single folder is cumbersome and they can be difficult to locate. To overcome this, create sub-folders within the 'ProductPictures' folder. Lets say for example you have a clothes shop and you sell Jumpers, T-Shirts, Dresses, Trousers and Suits. Create a folder (within your 'ProductPictures' folder) for each of these areas of your business and include the images into their respective folders. This can make housekeeping much easier and is a very good idea on large stores.
Important Things To Remember With Actinic and Images
If you follow the above steps and create separate folders for each area of your business, it is important to note that although you have separated them into separate folders, when Actinic actually uploads your store, they will all end up in the same place. This means that each image must have a unique name, if not, you will get error messages on uploading your store. If i gave you two images, both called 'red.jpg' and asked you to give me the red one, how would you know which one i wanted? - that is the basic principle.
Key Points To Remember
- ALWAYS optimise your images
- Dimensions should be around 200px X 200px
- Save them as 'JPEG' format
- Lower the compression until the image starts to degrade
- Place all completed images within a 'ProductPictures' folder within the site1 folder
- Create sub-folders if you have a large catalogue
- ALL images must have a unique name
- NEVER have spaces in the image name, 'RedJumper.jpg' or 'Red-Jumper.jpg' and NOT 'Red Jumper.jpg'
Extra Tips & Tricks For Managing Images In Actinic
- If it is possible for you to adopt standard dimensions for all images on your site, this can result in a great uniform looking site. It also gives you the flexibility to change section images very easily and give your site a facelift quickly. An example of this is Atlantic Shopping, they have all product images 300px X 300px. This means they can also use a reduced version of these images for section images, giving a uniform look to the site, example page here
- If the above pointers are still a little grey, put your images onto a CD and get a company to do the optimisation for you. If you specify the required dimensions and that you want them optimised into 'JPEG' format for the web, you can often get this done for less than you will need to spend on purchasing the required software
"This information is provided free of charge and expresses the writer's recommendations. No responsibility will be taken for any problems caused by following these guidelines. Reproduction of this material is not permitted under any circumstances without written consent".