Skip to main content

Title

Imagery Guidelines

Whether its people, places or products, imagery should be a clean and modern extension of your brand.  Our image guidelines will help you identify things to consider when gathering or creating site imagery.

 

Dimensions

Always maintain an image’s dimension ratio when scaling to fit a content area. Make use of cropping to avoid distortion when scaling. Don’t upscale an image to fill a content area as this will cause distracting pixelation.

 

Text

Avoid if possible displaying any text in an image, as this creates problems with legibility and SEO results.

 

File Types

CANVAS supports several image formats. For photohraphic images that don’t require transparency, we recommending providing them in JPEG (.jpg or .jpeg) compressed to 75%. For non-photographic images we recommend using PNG (.png) files.

 

Callout Imagery

Since touts/callouts vary in size, layout and placement, there are no hard limits on the imagery that can be used with them. We recommend that each image be selected and fit to the tout/callout created.

 

Product Imagery

Images will be resized when appearing on your Product Listing or Product Category Landing page, so please make sure the maximum size is created.

 

Image Type Description Extension Recommended width (px) Maximum width (px) Recommended size (kB) Maximum Size (kB)
Carousel Slide Background Images displayed in Carousels, and in headers (hero image) of Articles Pages or custom landing pages. Landscape orientation. No recommended sides ratio. .jpg
.png 1280 px Double the width of the content under the header 100 kB
 OR LESS 200 kB
Page Header Background            
Article Header Background            
Product Image Product images to be displayed on the Product Detail Pages. Recommended sides ratio: 1:1 .jpg .png 980 px 980px 50-80 kB 
OR LESS 150 kB
Article Non-HeaderImages Images to be displayed in the bodies of the Article Pages (NOTE: not to be confused with Article Header images!). Usually landscape orientation. No recommended sides ratio. .jpg .png For 100% wide image: 980 px For 50% wide image: 615 px 1280 px 30-60 kB
 OR LESS 150 kB
TACO 50% 

(1 column, 2 columns) Images for TACO where image takes 50% of the page width. This is applicable to TACOs that go in 1 columns (1 taco to the full page width, image on the left) and 2 columns (1 taco on the left, 1 taco on the right) Portrait or landscape orientation. No recommended sides ratio. .jpg .png 980 px 980 px 50-80 kB  
OR LESS 100 kB
TACO 30% and 25%  (3 columns, 4 columns) Images for TACO where image takes 33% or 25% of the page width. This is applicable to TACOs that go in 3 columns (3 TACOs in a row) and 4 columns (4 TACOSs in a row) Portrait or landscape orientation. No recommended sides ratio. .jpg .png 615 px 615 px 30-50 kB
 OR LESS 80 kB
Site Logo
  • Transparent background
  • The same proportions for all retailers
  • Width of 410 to 480 px (no less than 205 px)
.png 450 px (Minimum: 205px) 500 px 15 kB
 OR LESS 30 kB
Site Background Site backgrounds are generally discouraged. Recommendation below only for cases when background is present. .jpg
.png N/A N/A 10-40 kB  OR LESS 200 kB
Social Media Icons Icons for Social Media links. Usually 1:1 sides ratio. Supported Social Media:
  • Facebook
  • Twitter
  • Pinterest
  • Google+
  • Sina Weibo
  • Odnoklassniki (Одноклассники)
  • VK
  • Email
  • Gmail
  • Local device's mail app

If Pinterest is added as a Social Media Link for the brand, please ensure that Trademark is informed. Check with your brand regarding requirements.

.png 48 px N/A 5 kB  OR LESS 15 kB
Other Icons (Except Social Media and Favicon) Other icons: search field icon (zooming glass), bullet icons, etc. Usually 1:1 sides ratio. .png 16-32 px N/A 1-5 kB  OR LESS 5 kB unless critical design need
Favicon Icon that is used for on the:
  • Browser tab
  • In the Bookmarks when the site is bookmarked
  • On the Mobile Device as an app icon, when user saves the site to the Home Screen
.ico 32 px 512 px 1 kB OR LESS 5 kB

See examples of page layouts, features and functionality in CANVAS.

Our demo provides a glimpse of the flexibility of CANVAS and its templates.