Images make a tremendous difference in the success of your online store; they play an essential part in providing customers with the necessary information to find the product they require and make a buying decision.
An X-Cart store uses images for store categories, products, and brands (enabled by the add-on Shop by Brand). It also allows you to upload your images for custom use (for example, images you include in product or category descriptions or use in banners).
The performance of your X-Cart store - specifically, how fast a store page loads for store visitors - depends mainly on the use of images. Large hi-res images slow down your store's web pages which creates a less than optimal user experience. To ensure a positive experience for your customers, X-Cart enables you to optimize your images. For example, you know your customers will want to access a highly detailed product image via a product page but are unlikely to need such a "heavy" image on a page that lists the product along with other products (a product list page). X-Cart can help you to optimize your image use in this case by generating a larger image for the detailed page of a product and smaller images of the same product for pages requiring more minor details. As a result, you will have different size versions of the same product image for every type of page with product information (a detailed image for the detailed product page and two smaller images for the product list: one for list view and another for grid view).
To adjust your image optimization preferences, manage image resizing, or upload custom images:
X-Cart 5.5.x: Go to the Images Settings page of your store's Admin area (Design -> Images Settings).
X-Cart 5.4.x and earlier: Go to the Images Settings & Uploading page of your store's Admin area (Look & Feel -> Images Settings & Uploading).
Adjust the Default Image Settings
The settings listed in the upper section of the "Images Settings & Uploading" page (Look & Feel -> Images Settings & Uploading) affect the display of any images used in your X-Cart store.
The settings are as follows:
Use dynamic image resizing: X-Cart can resize the original images to display them on a page. Typically, you use the "Generate resized images" feature (see the same name button in the lower part of the page) to generate smaller resized versions for your images. The setting "Use dynamic image resizing" can help when X-Cart cannot find a previously developed resized version of an image it needs to display. If this setting is enabled, your online store generates an appropriately sized version of the image on the fly. If this setting is disabled, your online store uses the original (non-resized) image.
Image quality after resize: Set the desired image quality in %.
Apply unsharp mask filter on resize: This setting enables you to increase the sharpness of the resized images in the most highly detailed areas. Note:
The "Apply unsharp mask filter on resize" setting is available only if the server hosting your online store uses gdlib. For example, if the server is configured to use "ImageMagick," the setting is unavailable.
Cloud Zoom: Enable this setting if you want to allow your customers to view an image in its original size and quality.
Cloud Zoom Mode: Choose whether you want the zoomed image to be displayed inside the general image area or outside of it. (becomes available only if Cloud Zoom is ON)
Use lazy loading: If enabled, pre-loaded low-resolution images or single color background image placeholders are used to replace the current full resolution images on the storefront before they are fully loaded.
If you do not see the setting "Use lazy loading" on the page, the skin installed in your X-Cart store does not support it at the moment.
After the above-listed image settings comes a chart that provides information on the dimension limits (width(px) and height(px)) for different types of images. (Note that these may be different depending on the skin installed).
All images in your store will be resized to fit these dimension limits taking into account the image settings above. Your online store will use image dimensions twice as big as those specified in the chart for Retina displays. In any case, you can change the default image dimension limits if required. However, please remember that the original image should be at least twice as big as the size to which your store will resize it (i.e., the dimensions specified in the chart).
Note that the display size of a specific image type on your store pages may not match the dimensions specified in the chart in the "Images" section because a particular skin CSS may modify it.
Generate Resized Images
Clicking the "Generate resized images" button at the bottom of the screen launches an image resizing routine to generate copies of existing images in all the sizes needed to display these images in your store's front end.
Having a separate image file in each size provides a way to speed up your site's performance by reducing page load times for pages containing graphics.
Upload Custom Images
You can store any custom images you want to use in your X-Cart store on the same server with your X-Cart software.
Before continuing, make sure the "Simple CMS" add-on is installed and enabled in your store.
To upload an image:
Go to the "Custom images" part of the "Default image settings" page (Look & Feel -> Images).
Click "Upload" and select the image you want to upload onto the X-Cart 5 server:
Click the "Save changes" button.
The image will be uploaded. You will be able to see it in the "Custom images" section at once:
Use Cloud Images Storage
X-Cart provides an add-on that can be used to move all your category and product images over to the "cloud" storage services offered by Amazon and Digital Ocean called Cloud Images Storage in the X-Cart App Store.
For the guides on the add-on installation and configuration, please see the section Cloud Images Storage.
Related pages: