Introduction:
The CIMcloud platform, like all ecommerce platforms, relies heavily on the use of images to display products, marketing sections, banners, etc. This is a general guideline documenting the best practices for optimizing images for websites built on the CIMcloud platform. The goal is to create images that maintain excellent visual quality, small file sizes, and have the proper dimensions for their intended container and use-case.
Reference Tables:
Product Images Reference
| Image Type | Naming Convention | Ideal Specifications |
| Thumbnail | image-name_t.jpg | 200x200px at ~20kb or less |
| Normal | image-name_n.jpg | 400x400px at ~50kb or less |
| Large | image-name_l.jpg | 900x900px at ~70kb or less |
Product Category Images Reference
| Image Type | Specification Estimates |
| Category Page Top Image | 200x200px at ~20kb or less |
| Sub Category Image | 300x300px at ~20kb or less |
Banner Images Reference
| Banner Coverage | Specification Estimates |
| ⅓ of screen height | 1920x400px at ~100kb or less |
| ½ of screen height | 1920x600px at ~120kb or less |
| full screen | 1920x1080px at ~220kb or less |
| ⅓ of screen height – contained width | 1500x400px at ~100kb or less |
| ½ of screen height – contained width | 1500x600px at ~120kb or less |
| full screen – contained width | 1500x1080px at ~220kb or less |
Category Tile Reference
| Tile Size | Specification Estimates |
| Double Tile | 650x200px |
| Single Tile | 300x200px |
Logos and Branding Reference
| File Type | Ideal Specifications |
| PNG | 60px height (width will vary) ~15kb or less |
| SVG | 60px height (width will vary) ~15kb or less |
| JPG/JPEG | (not recommended) 60px height (width will vary) ~15kb or less |
Image Tools and Resources Reference
| Tool | Description | Link |
| Image Resizer | Batch image resizer | https://www.tweaking.in/image-resizer/ |
| Kraken.io | Batch image compressor | https://kraken.io/web-interface |
| CIMcloud Resizer | Photoshop batch image re-cropping and re-naming script example | https://training.websitepipeline.com/video_player.asp?id=resize-rename-pics |
Product Images
Each product on the CIMcloud platform needs 3 images, 1 thumbnail image, 1 normal image, and 1 large image. This allows the system to display the proper image dimensions for the proper container to keep the image file sizes as small as possible for faster loading times, while maintaining ideal visual quality.
| Image Type | Naming Convention | Ideal Specifications |
| Thumbnail | image-name_t.jpg | 200x200px at ~20kb or less |
| Normal | image-name_n.jpg | 400x400px at ~50kb or less |
| Large | image-name_l.jpg | 900x900px at ~70kb or less |
- Thumbnail Image
- The thumbnail image is the smallest version of the product image, and is ideal for the product search results page, featured products slider, recently viewed products, or any place where small images are typically needed
- Thumbnail images are suffixed with “_t”
- Thumbnail images should be 200x200px and should be compressed to ~20kb or less for speed
- Thumbnail images should be JPG files for best image compression quality
- Normal Image
- The normal image is the image used on the product detail page.
- Normal images are suffixed with “_n”
- Normal images should be 400x400px and should be compressed to ~50kb or less for speed
- Normal images should be JPG files for best image compression quality
- Large Image
- The large image, although it is used the least, allows for a customer to zoom in just a bit more to the product by clicking on the image on the product detail page to bring up a lightbox.
- Large images are suffixed with “_l”
- Large images should be 900x900px and should be compressed to ~70kb or less for speed
- Large images should be JPG files for best image compression quality
Product Images FAQ
Q. Why do product images need to be square dimensions?
a. While images can be other dimensions, they run the risk of being shrunk to fit their container. For example, an image with the dimensions of 100x600px used as a thumbnail will automatically make the height (600px) of the image 300px, which will also halve the width (100px) to 50px wide, which is far too small.
Q. Why do product images need to be compressed?
a. Image files sizes can range from kilobytes to gigabytes in file size. Trying to load megabyte or gigabyte file sizes over a network (like websites use) can take several minutes to several hours to load. Websites need to load as fast as possible in order to retain customers’ interest, therefore smaller images sizes are a necessity.
Q. Why do CIMcloud images need suffixes?
a. The CIMcloud platform uses image suffixes on product images to help determine which images to load, and where. Without this indicator, there would be no way to tell which images are thumbnail, normal, or large sizes.
Q. Why do you use the exact dimensions of 300x300px, 600x600px, and 900x900px, respectively?
a. We have found these dimensions to be the most effective at maintaining high visual quality while keeping file sizes to a minimum.
Q. Why do we need to use JPG/JPEG file types and not PNG or other file types for product images?
a. While PNG and other file types are impressive with their ability to add background transparency, they don’t compress well, and can also cause artifacts when images are shrunk to fit a container. The JPG/JPEG file type is the most effective for fast loading while maintaining excellent visual quality. There are some cases where PNG file types are a good choice, like with a logo, etc.
Q. Can I name my images using periods, like “image.name.001_t.jpg”?
a. While this method may work on your personal computer, it does not work well with databases or the web. Periods are used almost exclusively to denote a file extension, i.e. “name.jpg”, and should absolutely be avoided in the image name itself. Instead, use underscores (“image_name_001_t.jpg”), camel casing (“imageName001_t.jpg”), or even dashes (“image-name-001_t.jpg”) to break up names visually. It is best to avoid using spaces as well, as these can cause issues with the database. Be sure to maintain the underscore for CIMcloud-required suffixes, “_t”.
Product Category Images
The product catalog contains product category pages which can display products as well as sub categories. The top of the page contains a category description section and supports the addition of an image. Below the description any sub categories are displayed along with their images. These images should be similar in size to the product thumbnail images from above.
| Image Type | Specification Estimates |
| Category Page Top Image | 200x200px at ~20kb or less |
| Sub Category Image | 300x300px at ~20kb or less |
Banner Images
Most CIMcloud retail websites (as opposed to portal sites) utilize a landing page and/or other static pages that contain a variety of banner and marketing wells that utilize large images. Banners are typically images that stretch the full width of the screen, or website container, and can be a variety of heights. Typically, the designer or project manager will provide recommended dimensions for these types of images. We list a few recommended dimensions below, with file sizes.
Banners typically should be saved as JPG/JPEG files to best preserve visual quality and ensure small file sizes.
| Banner Coverage | Specification Estimates |
| ⅓ of screen height | 1920x400px at ~100kb or less |
| ½ of screen height | 1920x600px at ~120kb or less |
| full screen | 1920x1080px at ~220kb or less |
| ⅓ of screen height – contained width | 1500x400px at ~100kb or less |
| ½ of screen height – contained width | 1500x600px at ~120kb or less |
| full screen – contained width | 1500x1080px at ~220kb or less |
Banner Images FAQ
Q. I uploaded a new banner image to replace the old one, how do I get it to show up?
a. Typically, a project manager or designer will specify directions on how to update an image for a particular banner. Since many sites on the CIMcloud platform are custom, there is not a one-size-fits-all answer for this. Sometimes, you can just name the new image the same name as the image you are trying to replace, but it can take 1 hour to 1 week for that file to be updated due to browser caching. The best option is to upload the new image as a new image name and update the affected banner/code to the new image. New files are uploaded instantly since browsers have not cached them yet.
Q. How should I name my image?
a. Use underscores (“image_name_001.jpg”), camel casing (“imageName001.jpg”), or even dashes (“image-name-001.jpg”) to break up names visually. Never name an image, “image.name.001.jpg”—periods are used almost exclusively to denote a file extension, i.e. “name.jpg”, and should absolutely be avoided in the image name itself. It is best to avoid using spaces as well, as these can cause issues with the database.
Category Tiles
The standard theme utilizes a set of six tiles to display categories on the home page. There are two double tiles and 4 single tiles. Typically, the designer or project manager will provide recommended dimensions for these types of images. We list a few recommended dimensions below, with file sizes.
Category tile image’s typically should be saved as JPG/JPEG files to best preserve visual quality and ensure small file sizes.
| Tile Size | Specification Estimates |
| Double Tile | 650x200px |
| Single Tile | 300x200px |
Logos and Branding
Most logos are designed with transparency so they can work with a variety of backgrounds in a variety of situations. In this case, it is great to use the PNG file extensions to preserve transparency and quality.
Modern browsers have excellent support for the SVG file type (scalable vector graphic images, as opposed to pixel-based/raster images). On occasion, though, SVG files can produce strange results on certain browsers. It is a good idea to talk to a designer if you wish to change an image to an SVG image.
| File Type | Ideal Specifications |
| PNG | 60px height (width will vary) ~15kb or less |
| SVG | 60px height (width will vary) ~15kb or less |
| JPG/JPEG | (not recommended) 60px height (width will vary) ~15kb or less |
Logos and Branding FAQ
Q. My logo is a JPG, how do I make it a PNG?
a. Usually, your logo/brand/marketing designer will have provided you with a variety of logo file types, or will have access to them. If you cannot find a PNG or SVG logo, one of the designers at CIMcloud can help create a transparent version of your JPG logo.
Q. How should I name my image?
a. Use underscores (“logo_name.png”), camel casing (“logoName.png”), or even dashes (“logo-name.png”) to break up names visually. Never name an image, “logo.name.png”—periods are used almost exclusively to denote a file extension, i.e. “name.jpg”, and should absolutely be avoided in the image name itself. It is best to avoid using spaces as well, as these can cause issues with the database.
Q. My logo has been updated, how do I change it?
a. Depending on how your logo has been implemented, there is usually an option that allows you to update which logo(s) image you are using across your site that your project manager, or a CIMcloud support member can help you with.
Related Sources:
Image Tools and Resources
| Tool | Description | Link |
| Image Resizer | Batch image resizer app | https://www.tweaking.in/image-resizer/ |
| Kraken | Batch image compressor | https://kraken.io/web-interface |
| CIMcloud Photoshop Script* | Photoshop batch image re-cropping and re-naming script example | https://training.websitepipeline.com/video_player.asp?id=resize-rename-pics |
| tinyjpg | Batch image compressor | https://tinyjpg.com/ |
| shortpixel | Batch image compressor | https://shortpixel.com/ |
| PNG2JPG | Convert PNGs to JPGs | https://png2jpg.com/ |