Skip to main content

Image Guidelines

When a site loads slowly, it's often not the system — it's oversized images. Before launch, compress your home banner, product images, and gallery images.

Image typeRecommendation
Home banner / carouselUnder 300KB where possible
Product image800 x 800, under 150KB
FormatPrefer WebP, then JPG / PNG
Max widthGenerally no wider than 2300px
LogoTransparent PNG, width under 350px

A compression tool you can use:

https://imagestool.com/zh_CN/compress-images

Decide the use before uploading​

Banners and carousels are usually wide, so use landscape images. Too small looks blurry; too large slows the home page.

If white text is overlaid on the image, don't casually turn off the mask. Disabling it brightens the image but can make the text hard to read.

AllinCMS carousel properties - the Show Image Mask toggle in the right panel controls the image mask, affecting banner text readability

Product images​

Prefer square product images. When ratios vary too much, the list looks uneven.

If a product image is cropped, change the display mode to Fit inside in the module properties. For more, see Image Display Issues.

AllinCMS image display setting - choose Fit inside in the right Media dropdown, used to show the product image fully without cropping

Image alt text​

When uploading to the admin, add a description. Don't write "image 1" — describe the content, for example:

Black wireless earbuds with charging case on white background

This helps both SEO and accessibility.