This article provides recommended sizes for all images that can be added to a standard xTupleCommerce website. In the case of product images, those sizes may vary. All of the sizes referred to in this article are shared in the standard format "Width x Height". All the example screenshots are taken from the Free Demo of xTupleCommerce.
The image sizes recommended below are the largest dimensions required for the desktop version of the site. When a user is experiencing the site on a mobile device, the images will update their size to fit that device. There is no need to upload a "desktop version" and a "mobile version" of each image.
Regarding your homepage marketing images, we recommend sketching out a plan on paper before you begin working in the backend of your xTupleCommerce site. Sketch out a layout, including each of the promos you plan to build, what their orientation should be, what content you plan to include, and what kinds of images you plan to use. Making these decisions before you begin building the promos in the backend of the site will save you time and frustration in the future. Plus, it will help your team stay organized, on task, and on the same page about your strategy. For more information about planning and designing a strategic marketing-oriented homepage in xTupleCommerce, see this article.
All xTupleCommerce Image Types
Here's a complete list of all the xTupleCommerce image types:
- Homepage carousel
- Homepage promo grid
- Homepage promo icons
- Homepage promo teaser
- Promo sidebar
- Product images
- Product item group
- Blog article
- Standard images within standard pages
The rest of this article goes into more detail about each of the available image types.
The following screenshot illustrates the homepage carousel. The carousel feature is designed to rotate through multiple images on your homepage, making the content appear fresh and inviting to your visitors.
Carousel recommended size - 1140 x 380
Note, the Carousel will accept images at any height. The requirement is a 1140px wide image, but if there is a strategic reason for you to use taller or shorter images, you can do so. The size above is our recommended size.
Homepage Promo Grid
The homepage promo grid feature can use images in a variety of ways. You can display images in 1 column, 2 columns ... up to 6 columns. The following screenshot shows a 3-column wide homepage promo grid:
The image size required will depend on how many columns you plan to use. Like the carousel image, the width is required but the height can be variable. If a you want your images to be taller or shorter than what is suggested below, you have the ability to do that. These are just the best recommended sizes regarding the most optimal desktop and mobile experience. Be sure to make all image heights consistent.
1 column promo - 1140 x 240
2 column promo - 555 x 240
3 column promo - 350 x 230
4 column promo - 253 x 167
5 column promo - 190 x 120
6 column promo - 156 x 102
Homepage Promo Icons
Like the homepage promo grid, you have the option to adjust the number of columns for the homepage icon grid. However, for the homepage icon grid, the image sizes always remain the same. The size of the icon images are static, no matter the number of columns. The height and width are required to be 64 x 64. You are not able to use a variable height for these images.
For the sake of aesthics, we have found that it’s best to include either 3, 4, or 6 icons per row. In each case, the images will render as 64 x 64. It is usually best to use a transparent .PNG file as well.
Promo icon image size - 64 x 64
Homepage Promo Teaser
The following screenshot shows a sample homepage promo teaser:
While the width for promo teasers will always be the same for all promo teasers (350px), the height you choose can vary. This will allow you to create a long “skyscraper” style image, if you choose to do so.
Promo teaser recommended image size - 350 x 230
Promo sidebars can be added to the sides of xTupleCommerce pages, as shown in the following screenshot:
Like other promos, the height of the promo sidebar image is variable. The width must be 253px wide, but you can design a promo image of any height.
Promo sidebar recommended size - 253 x 200
Product images are added in the ERP, within the Item master. Multiple images can be added for each item, and the order in which the images are displayed on the site is managed in the ERP by their "weight". The image marked with the lowest weight will be the image that appears on the All Products page, and the first image on the Product Details page. It is also the thumbnail displayed for the suggested products thumbnail.
Recommended product image size - The best product images are in ratio to 237x125. This size is a perfect fit for the Products page. If you increase this to be a perfect fit for the Product Details page, the size would be 360 x 190. Images in ratio to these sizes will render the best on the website. The maximum recommended size is 1000 x 1000.
Each of the product images is only added to the ERP once. That same image is then resized for the various areas where it is displayed throughout the site. The following screenshot shows several sample product images as they appear on the All Products page:
All products page - The space that is available for images is 260 x 135. Images that are larger will be scaled down to fit in this area and stay in proportion to the original size. It is recommended to use an image that is larger and will scale down to this size proportionally.
When a user drills down to learn more about a specific product on the xTupleCommerce site, they will be brought to the Product Details page. The following screenshots illustrates product images as they appear on a sample Product Details page:
Product details page - The space that is available for product images is 360 x 360. However, larger images should be used. If the product image is larger than 360 x 360, when the user rolls over the image with their cursor, a magnifying feature will zoom into the area that the cursor is hovering over.
Product Item Group Image
The item group images are added within the Item Group window in the ERP. The item group images are displayed on the Product Catalog page in xTupleCommerce. The following images shown on a sample Product Catalog page are 160x90:
Item group images - 160 x 90
NOTE: Be sure to flush your site's cache after you make any changes to item group images. Adding or editing anything related to the item groups, including alterations of the images, requires the site manager to flush the cache before the updates will be rendered. The following screenshot shows where to locate the "Flush all caches" menu option:
Blog article images are used on the blog feed page and within the blog article content. The following screenshot illustrates a sample blog article page:
The feed images are displayed at 260 x 190. However, inside the blog article, the user can open the images in a slideshow, which can render the images much larger. This means that uploading images that are larger in ratio to the 260 x 190 size will create an optimal experience for the user.
Minimum blog article feed thumbnail - 260x190
Suggested blog article illustration image size - 1000 x 730
Testimonial images are displayed on the Testimonials page. They can be images of people, or they can be logos representing companies. The following screenshot shows a sample testimonial:
Testimonial image dimensions - 160 x 120
Standard Images within Standard Pages
Images can also be added to standard pages as well. There are no constraints to the standard page image sizes. However, it is best to keep the width less than 1000px. The images can be floated left, right, or centered within a paragraph, or they can be aligned left, right, or centered while seperate from the paragraphs. The images found on this page are good examples of images found within a standard page of text.