For a better experience, click the Compatibility Mode icon above to turn off Compatibility Mode, which is only for viewing older websites.

Images

Before an image is uploaded for web viewing, it should be optimized for web and devices in a photo editing program and resized (outlined below), then "saved for web". This process reduces the file size, compresses the image, and performs color correction.

Image requirments are as follows:

  • RGB color space
  • 72 dpi resolution
  • JPG (quality set to 80) or PNG-24
  • Maximum image size - 1200px width by proportional height

4x3 Image Aspect Ratio

Images should be inserted at a 4 x 3 aspect ratio to keep a consistent look and feel. This accounts for all horizontal and vertical images regardless of what the image is. (However the "page image" field is designed for an image at 570 x 300 pixels, which is a shallower aspect ratio to allow the initial page content to appear higher in the viewport.)

Full Width Default

Any image inserted into the content area will automatically fill the content area width.

The width will depend upon the column layout. Review Inner Page Columns for clarification.

3 Column Layout

  • Standard image width - 600px

2 Column Layout

  • Standard image width - 900px

1 Column Layout

  • Standard image width - 1200px

Resizing Options

If an image is intended to be smaller, such as a portrait, logo, or custom graphic, refer to the CSS Classes "percent" style examples.

Page Image Option

The "Page Image" option is used to place the image below page headings and above page content.

  • 570 x 300
  • Border - 1px solid #E1E1E0
  • Image caption below image inside box - font color - #666666

4x3 Aspect Ratio

Full Width Default

"Page Image" Option

Percentage Width

Using classes to designate a proportional image size represented by percentage is a linear way of scaling images without having to use image editing software, while retaining flexibility. The image should be inserted into SiteCore at its column layout standard width.

Using a percentage-based width style maintains a responsive design by proportionally scaling the image relative to the layout.

Directions for 2-column layout utilizing a 50% width style:

  1. Insert image into SiteCore at its column layout standard width (in this case, 900 pixels)
  2. In rare cases, code can be added to image tags to physically resize the dimensions of the image
    • example - (image-file-name.jpg?w=600)
    • Add "?w=x" at the end of the image, with any pixel value standing for x
  3. Add a percentage class to the image (i.e. class="percent-50" in multiples of 5 from 5-95)
    Refer to the Advanced Class List for details

Floating Elements

If reducing the size of an image anywhere from 5-50%, it is recommended to float the image to the right or left of content.

This is achieved by adding a class to the image (i.e.: class="float-left" or class="float-right"). Typically, percentage classes and float classes are applied to an attribute together, separated by a space (i.e. class="float-left percent-35").

Refer to the Advanced Class List for details.

Disabling Scaling

In some cases, such as with logos, icons, or other small graphical elements on a page, responsive scaling may not be appropriate. Carefully-constructed layouts may be disrupted by an image that scales too large or too small on different devices or browsers.

Use the "no-scale" class (i.e. class="no-scale") on any element. It is recommended for use on small graphics, but can theoretically be applied to anything.

Refer to the Advanced Class List for details.

Banners / Promos

Backgrounds, banners, promos and cut-outs could be a variety of shapes and sizes as long as there is alignment with the grid system.

Examples coming soon.

4x3 Aspect Ratio

Full Width Default

"Page Image" Options

50% Width Image

Floating Elements to the Left or Right