Image Resizing and Compression
Image resizing lets you use one image on the product details page, in search results, and for thumbnails. By resizing images to an appropriate size, the resizing tool speeds up page load times and improves SEO.
The image resizing tool generates a resized image when it's requested from the website and stores the image in the cache. The original image in the File Cabinet remains unchanged.
Resized images are compressed to the optimal level, regardless of other settings. For more on compressing other image types, see SMT Image Compression.
Guidelines
-
Resizing works with JPG and PNG files, but compression only applies to JPGs.
-
Resizing only works for images in the images folder (Web Site Hosting Files : Live Hosting Files : images).
-
The resizing tool works best when reducing large images. Small images may become pixelated when enlarged. Make sure your images are as large as the largest resizing ID dimension they'll be displayed at. Usually, that's 1200×1200 pixels. If your images are too big, resize them before uploading to save space.
-
The resizing tool maintains the original aspect ratio. For example, a 1200×1000 image resized to 600×600 is rendered at 600×500. If you want to change the aspect ratio, use an image editor before you upload the image.
Automatic CDN File Size Compression
The CDN may automatically convert PNG and JPG images to AVIF or WEBP for better performance. If the converted image is smaller and supported by the browser, the CDN serves it instead.
You don't need to do anything to enable this feature other than enable CDN caching. For more information about CDN caching, see CDN Caching.
The File Cabinet doesn't support AVIF and WEBP for item images. Since conversion is automatic, stick with PNG and JPG for item images.
View Image Size IDs
Find image resizing settings on the Images subtab of the website setup record at Commerce > Websites > Website List. If the image size IDs are already set up, the IDs and dimensions appear. You can adjust the maximum width and height of your image size IDs here.
Adjust the dimensions as needed. Don't change the IDs, as they match the configuration record.
The following screenshot displays standard image size IDs and their default dimensions.
