Images are eye-catching elements of web pages, including high traffic ones such as the home page and product detail pages. They are also important for banners and articles. Optimising images to get that balance of quality and file size is critical. Low quality images or those that take too long to load will lose user engagement. Slow loading can also affect your SEO rankings. Here is a general article about optimising images for the web.


Quick guide

The basics of maximising image quality while minimising file size that apply to your Customer Self Service eCommerce Platform site are summarised in this quick guide. It is assumed that an image editing software such as Photoshop is used to manipulate and export image files.  

Experiment and test to find the right balance for each image used on your site.

File type
  • Select the right file type depending on the image. The general rule of thumb is:
    • PNG or SVG for vector-based images such as icons and logos
    • JPG for photography-sourced images
Colour mode
  • Ensure images are saved in RBG mode.

Colours will look different depending on mode.  RGB (best for screen),  CMYK (best for print)  Here is an article explaining the difference.

Compression

  • Compress image files.
    • Compression reduces storage and load times but will affect quality. Photo editing software includes compression tools you can use to optimise compression while maintaining the quality needed. Here is an article explaining compression.
Dimensions and resolution
  • Accommodate the device type(s) of your users when deciding dimension and resolution.
    • If an image is to appear on mobile, tablet and desktop devices, consider the resolution of images for each type.
      • Dimensions: remember that desktop is wider and mobile is taller, with tablet in between. 

      • Resolution: In general, for banners and other images*, save images at 72dpi. Optimal for newer smartphone screens is 300+dpi. However, bear in mind the higher the resolution, the larger the file size.  
      • *Product images are sampled at the following rates via the Integrator: 

        50 pixels- email
        250 pixels - product grid
        500 pixels - product gallery
        1000 pixels - zoom

         


Specifying device type

Use the device type display options when adding banners on your website. You can also deselect a device type so a banner does not display on it.

File size
  • Minimise file size
    • Recommended maximum file sizes: 250kb for desktop and tablet, 50kb for mobile.


Related help

Site Design

© Copyright 2001-2023 Commerce Vision Pty Ltd. Use of this site signifies your acceptance of Commerce Vision’s Terms & Conditions. CV Connect, the Commerce Vision logos, and other Commerce Vision marks are assets of Commerce Vision Pty Ltd.