It is a good idea to pre-format images before they are uploaded to the website. This ensures that the image files are transferred in the quickest time, using the least amount of bandwidth and taking up the least amount of space on the server, potentially saving you time and money.

This is particularly important when you are dealing with a large number of images, either for galleries or product databases.

Your images may be supplied to you by your suppliers or a third party photographer. We recommend that you pass on the following specifications to ensure that your images are provided to you in the correct format.

Format

These formats are the most preferred file types you can use to post images:

• JPEG – An old file type which has become the standard image of the Internet.  JPEG images are compressed to give you quality images minus the bulk.  Useful for large and medium-sized product or post images and photographs.  

JPEG File size = 27.2 KB

• GIF – Lower quality images used for simpler images such as icons.  GIF’s can also support animations.  GIF’s must never be used for product images, or larger and more complex images and photos, such as posters and artworks.  It is best used for line arts with solid areas of the same color, such as logos  

GIF File size = 34.9 KB

• PNG – Another popular file type for images, PNG is often larger than both GIF and JPEG as these compresses photos without losing detail.  They have more colors than GIF, and does not degrade over time with multiple saves, unlike JPEG.  Often, they are used for high quality company logos, or product images which require a transparent background.  Do note that some older browsers don’t completely support this filetype.   

PNG File size = 183 KB

File and Image Size

For optimal website loading

Uploaded images must (ideally) be less than 500 kilobytes (0.5 MB) in size.  Images that are more than 20MB in file size may not be processed by the website, or may take a long time to load, which could deter customers from your site.  

Image Size Recommendations

• Ensure that image sizes are within post display area.  For instance, if your website post’s display area is around 700px wide, your full-sized images should have a width of 700px or lower in order for it to fit your website display.  
• We recommend that images are sized and optimised to a format suitable for its use.
• It is important to note, that when preparing images for your products, to ensure that the dimensions are all the same. For example, it is best to have all portrait images or all landscape images or all square images. If you have a mix of all three then the product category pages are not going to look uniform and tidy.

NOTE:  Images can only be scaled down, not enlarged.  If you enlarge a previously scaled down image, you’ll get a pixelated version of that image.    

Colour mode

If you are providing images in a JPEG format, you need to ensure that the colour mode is set to “RGB” as opposed to CMYK. Software designed for print graphics such as Photoshop allows you to export images in a “CMYK” colour mode. This mode is specifically for print and the web browser will display it differently, usually the colours in a CMYK JPEG will display much “brighter”.

RGB colour mode JPEG

CMYK colour mode JPEG

Resolution

72 pixels / inch – The standard resolution for screen display.

Optimisation

If your images are to be saved in a JPEG format you will have the option of compressing the images. This compression is measured on a 1-100 or a 1-10 scale, depending on the software that you are using to format your images. 100 representing high quality but larger file size and 1 low quality and small file size.

When saving an image for web use, choose image quality of 60 – 80.

You will find images saved at less than 60 will have a noticeable blur but be small in file size. Images saved at 80 or greater will appear much sharper but the file size will be significantly higher.

JPEG Quality = 30 Size = 17kb (2 secs @ 56kbps)

JPEG Quality = 80 Size = 32 kb (5 secs @ 56kbps)

 Note the “blurry” effect caused by the over optimised jpeg image.

Aspect Ratio

Aspect ratio is the proportional relationship between an image’s width or height.  Simply put, it’s the width to height (width/height) ratio of the image.

Certain platforms automatically adjust, or simply allows you to adjust the aspect ratio of an uploaded thumbnail or collection images.  Squarespace, for instance, lets you crop collection images to aspect ratio, while Zest generally has a fixed width for thumbnail images.

However, for platforms like Shopify, you will need to edit the aspect ratio using a third party photo editing tool before uploading your images to your e-commerce store, if you want your product images to appear in the same size.

Image Thumbnails

Depending on the platform your website runs on, or how it is set up, your product images can get automatically cropped as thumbnail images for your gallery or your product collection.  Take the image below, for instance:

In some instances, your images will get zoomed in and cropped this way:

If you would like the thumbnail to show the subject matter in its entirety, you can add white spaces on the image sides.  By adding a white space around the image, it retains the entire subject when it gets cropped into a thumbnail image for your collection or gallery.

By adding a white space around the image, it retains the entire subject when it gets cropped into a thumbnail image for your collection or gallery.

Naming Convention

Image file names should have names that are alphanumeric only, with no characters such as $ or #. Instead of having spaces in the image name, use an underscore or dash instead eg. ideal_image_name.jpg

To improve your search engine rankings and make your images easier to manage, name images using relevant keywords. IE for the image of a children’s book, instead of using the names from the camera eg IMG0637.jpg rename it to be the full name of the book “the-cat-in-the-hat.jpg”

Image Alt Tags

Alt Tags (Alternative Tags) are designed to explain the details of an image for the users who can’t or choose not to view images on their browsers.  Alt tags also help search engines understand the image content and index it properly for search results.  

To know more about alt tags and alt texts, read this useful guide on Image Alt Attributes.

Advanced image editing

When processing large numbers of images use batch processing functions, supported by some advanced image edit software. Please see the help files of your image edit software for support and more information about this.

For advanced and basic image editing we recommend Adobe Fireworks or Adobe Photoshop. For more information about this please see the Adobe website www.adobe.com

For free image edit software please see our article Free Image & Photo Editing Software.