Product: Nexternal

Article Link: http://help.truecommerce.com/en/articles/5208908-nexternal-best-practices-for-product-category-image-sizing

The following topics are addressed in this article:

Image Dimensions

Scaling vs. Resizing

Image File Sizes

Image File Naming Best Practices

Importing Images

Find the Size & Dimensions of an Image

We are often asked if we have recommended sizes for Product thumbnail images, main images, mini-thumbnail images, and enlarged images, as well as Category thumbnail images. This is a difficult question to answer because display size is a matter of preference, and the "best" image dimensions for you will depend largely on the layout and design of your store, as well as the type of products you are selling and the shape of the images. When you request a site sync or resync, you can request that our design engineers make image dimension recommendations when they deliver the synced design.
​
For product images, using the product image management tool in your Order Management System (OMS), try scaling a few thumbnails to about 300 pixels wide, the main images to about 450 pixels wide, and the large images to about 1000 pixels wide. See how that looks in your online store, and you can play with it up and down from there. Once you've decided on what you think looks best in your store, you can use the tool to resize all of your images as you load them. Or, if your images are already in the system, you can use our resizing tools on each product to resize the images.

For category thumbnail images, you can do the same experimentation with scaling and then resizing, using the scaling and resizing tools available to you right in the category thumbnail section on the category setup page:

In addition to the information in this article, you will find detail specifically relating to category thumbnails for both desktop and mobile in the ? tooltip next to the Thumbnail section on any category setup page in your OMS.

Also keep in mind that if your store is styled with responsive code (which will be true if your website is responsive and your store was styled with your responsive website code, or if you used a Nexternal "template" design), the images, regardless of the dimensions you pick, will automatically display with appropriate dimensions based on the screen size upon which your store is being viewed.
​
For the best-looking results, as well as the most optimally functioning store, be sure that all of your thumbnails are the same dimensions, all of your main images are the same dimensions, and if you are using them, all of your large images are the same dimensions and all of your mini-thumbnails are the same dimensions. If they do not have the same dimensions, they should at least have the same aspect ratio (the proportional relationship between an image's width and height). Images with different aspect ratios will not look aligned in your store.

If you are resizing images outside of your OMS prior to upload, pay attention to maintaining the aspect ratio. For example, if you reduce the height of an image by 25%, you must also reduce the width of the image by 25%. Failing to maintain the aspect ratio will result in distorted images.

The resize feature alters the dimensions and physical size of the file, and is thus permanent. The scale feature uses HTML attributes to display the file with reduced dimensions, but does not alter the file itself and is thus not permanent. In other words, the large image loads, then gets scaled down. In either case, the image is reduced proportionally to prevent distortion. But in most cases it is preferable to resize rather than scale an overly-large image, as this will reduce the physical file size and improve the performance (speed) of your Online Store.

Also note that the resize and scale features should be used only to reduce the dimensions of images. Enlarging images is likely to cause unattractive distortions.

While images for use in print materials must be high resolution to display with clarity, images for use on the web should be much (much!) lower resolution so as to preclude loading speed issues.

Optimal image file size is somewhat of a fluid matter, as it is affected by multiple factors. While we do allow quite large image sizes for the store header and background images, we don’t recommend using the maximum size, or anywhere near it, for product images, category thumbnails, or any images that you load into product or category descriptions. For these images we recommend image file sizes no greater than 500kb.

Note: Image compression levels will affect clarity of image display. Less compression will mean a bigger file size, but more clarity. We recommend going with medium compression levels (terminology around this varies depending upon what software you use for compression).

For best practices regarding naming your image files, we recommend this article. These protocols make a difference in the ease of your catalog management, your customer experience, and search engine optimization!

You can import images in two places (doesn't matter which you use):

Products / Import / File Import, or

Layout / Import Images, Audio, JavaScript, CSS, or Flash Files

Regardless of the path you choose, the following requirements apply:

You may import multiple images, audio clips, font files, .css, .js, .swf files, or multiple files packaged into a single .zip file. This is useful when referencing files in the Bordering HTML (Advanced Layout section).
​
​Notes:

To find the size and dimensions of any image on your computer (including images you may have dragged off of a site), follow these steps:

rev: 7/22/21