You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

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 in 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 such as 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 separate images for each type. In general, desktop is wider and mobile is taller, with tablet in between. 

    • Mobile devices ... 


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

  • No labels