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.
The basics of maximising image quality while minimising file size that apply to your Customer Self Service eCommerce Platform site are summarised here. 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 and test to find the right mix for your images.
| File type | Select the right file type depending on the image. The general rule of thumb is:
|
|---|---|
| Colour mode | Colours will look different depending on mode. RGB (best for screen), CMYK (best for print) Read article. |
Compression | 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 | 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.
Specifying device type Use the device type display options when adding widgets and banners on your website. |
| File size | Recommended maximum file sizes: 250kb for desktop and tablet, 50kb for mobile. |
Related help
