Managing assets (images and files)

Renaming images or files


Image sizes

General Guidelines

Images created for responsive webpages need more flexibility than in years past to morph to the device it's rendered on. As a result of this paradigm shift, it's best to follow these rules when creating images:

  1. Do not include text in images.
  2. The primary subject matter (i.e. a product) should take up at least 60% of the image.
  3. Provide enough whitespace surrounding the subject matter; 6-8% padding is fine.
  4. Photoshop recommendations: 80% compression | Progressive | JPEG (Screenshot)

General Image Specs

  • Carousel: 1000 x 600 (min) - This image has several guidelines. The width should be a minimum of 1000 pixels, however the height can be flexible. The important factor is to make all carousel images the same height.
  • Hero photo: 1440 x 800 (Guidelines)
  • Page Block: Photo Feature -  800 x 492 (Guidelines | Screenshot)
  • Thumbnails: 620 x 386 (Examples: Guidelines | Photoshop | Screenshot)

Robotics Images

Replacing an image or file

Sometimes you might need to replace an existing image or file. Follow these instructions to replace an image or file and have it reflect on every page it is displayed or referenced.