page last edited on 09 November 2016
Images make a tremendous difference in the success of your online store; they play an important 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 (Brands are enabled by the addon Shop by Brand). It also allows you to upload your own images for custom use (for example, images that 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 largely 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, we recommend you invest some time into optimizing your images. For example, you know your customers will want a highly detailed image on a product page, but are unlikely to need such a “heavy” image on a page where the product is listed along with other products (a product list page). X-Cart can help you to optimize your image use in this case by providing a hi-res image only for the detailed page of a product and generating smaller resized images of the same product for pages requiring less detail. 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 one for grid view).
To adjust your image optimization preferences, create resized versions of images for your X-Cart store or upload custom images, visit the Images section of your store’s Admin area (Look&Feel -> Images).
- Adjust Image Optimization Preferences
- Generate Resized Images
- Upload Custom Images
- Use Amazon S3 for Images
Adjust Image Optimization Preferences
Any images used in your X-Cart store will be displayed in accordance with the configuration settings defined in the Default image settings part of the Images section (Look&Feel -> Images).
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 button of the same name in the lower part of the page) to generate smaller resized versions for your images. The setting “Use dynamic image resizing” can help with situations where X-Cart cannot find a previously generated resized version of an image it needs to display. If this setting is enabled, an appropriately sized version of the image is generated on the fly. If this setting is disabled, the original (non-resized) image is used.
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 of the image.
The Apply unsharp mask filter on resize setting is available only if the server on which X-Cart is hosted is configured to use gdlib. If the server is configured to use imagmagic, the setting is not available.
Cloud Zoom : Enable this setting if you want to give your customers an opportunity 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 blurred image placeholders for smart image loading : When enabled, pre-loaded low resolution images or single color background image placeholders are used to replace the actual full resolution images on the storefront before they are fully loaded.
If you do not see the setting Use blurred image placeholders for smart image loading on the page, it is not supported by the skin installed in your X-Cart store at the moment.
The chart in the lower part of the Default image settings section provides information on the dimension limits (width(px) and height(px)) for different types of images. (Note that these will be different depending on the skin installed). All the images in your store will be resized to fit these dimension limits taking into account the image settings above. For Retina displays, image dimensions twice as big as the ones specified in the chart will be used. In any case, you can change the default image dimension limits if required; however, please keep in mind that the original image should be at least twice as big as the size to which it will be resized.
Generate Resized Images
Clicking the Generate resized images button (at the bottom of the Default image settings section, next to the Save button) 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 of the sizes provides a way to speed up your site’s performance by reducing page load times for pages containing graphics.
Upload Custom Images
Any custom images that you want to use in your X-Cart store can be stored on the same server where your X-Cart software is installed.
Before you continue, make sure the module Simple CMS is installed and enabled in your store.
To upload an image:
- Go to the Custom images part of the Images page (Look&Feel -> Images).
- Select the image that needs to be uploaded onto the X-Cart 5 server:
- Click the Save changes button.
The image will be uploaded:
Use Amazon S3 for Images
X-Cart provides an addon that can be used to move all your category and product images over to the “cloud” storage services offered by Amazon. See the addon Amazon S3 Images in X-Cart’s Marketplace.
Help make this document better
This guide, as well as the rest of our docs, are open-source and available on GitHub.