Versions Compared

Key

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

...

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

         


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

...