Guidelines for pictures used on the portals

We recommend that you use image files of type PNG or JPG. PNG files are best for icons and simple vector-type images, which are managed in the Assets folder in the Portal Manager. JPG files are best for photo images that are stored in the back office.

For best presentation and ease of adaptability to a change in theme background colors, we recommend that you use a transparent background for your icon image files.

On retina-ready devices, the pixel ratio for images is doubled. For example, an 80x80 image is shown in a 40x40 space. The sharpness of the retina-ready image is achieved by doubling the amount of pixels used within the available image space. The portal determines if the image is being displayed on a retina-ready device and makes the appropriate adjustment when necessary. Therefore, to support the display of images on a retina-ready device, you should load pictures that are double the size needed when shown on a typical monitor, and then limit the display size using the height and width parameters on the Image field display format.

Item pictures

Ideally the item pictures you upload in should be at least as large as the largest picture size displayed on the portal Product Details page, which is 800x600 pixels. For best viewing on this page, the picture should be at least this big; otherwise, white space surrounds the image. Back office pictures are not enlarged on the portals, unless a specific style is used on the cell to zoom in on the image.

Category pictures

Recommendations for category pictures are the same as for item pictures.

Banner pictures

We recommend 980x120 pixels for banner pictures, or 1960x240 pixels to support retina-ready devices.

Note: If a picture stored in has a different aspect ratio than what is required by the field display format on the layout, the picture is scaled to fit inside the cell according to the height and width parameters of the field display format on that cell. Larger picture sizes are supported, but the user may have to scroll to see the whole picture, depending on the size of their browser window. If no picture is stored with an item in the back office, then no picture can be displayed by the Image field display format for that item. White space is shown where the picture would normally be displayed. However, by default, the ItemImage style is placed on all cells that should contain a image, and the ItemImage style has a background placeholder image to indicate when no image is returned from the back office.