Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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 herein this quick guide. It is assumed that an image editing software such as Photoshop is used to manipulate and export image files.  

Checklist

This is a general checklist of ... to look out for. You will need to experiment Experiment and test to find the right mix balance for each image used on your imagessite.

Dimensions
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) 

Read article

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.
 
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. 

Image Modified

    • Mobile devices ... 


Tip
titleSpecifying device type

Use the device type display options when adding widgets and 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

Content by Label
showLabelsfalse
max5
spacesKB
showSpacefalse
sortmodified
reversetrue
typepage
cqllabel = "banners" and type = "page" and space = "KB"
labelshow-to cms banners