Image

Image Inspector (with Smart Stretching Turned On)

Purpose

Display an image (or an image placeholder) with optional smart stretching.

Description

The Image component provides a way to display an image. It also supports an optional “roll-over” image. You can use any URL or file for the image (and roll-over image), as long as it is formatted as a JPEG, PNG or GIF.

Tip: The easiest way to add an image to your design is to drag an image file from your desktop and drop it on the canvas. The file will be uploaded and the image will be added to your design.

Note: Alternatively, you can insert images (without roll-overs) using the Rich Text Editor. This can be useful because it allows the text to flow around the image.

Resizing Image Components

There are two considerations when resizing an image: the native image size and the component size. When you resize an image component, the image may appear stretched because it fills the space you give it. To avoid this, you can hold the Shift key while resizing, which tells the editor to preserve the aspect ratio. To return the component to the image’s native size, right-click the component and choose Size to Fit from the context menu.

In addition to uniform stretching, images support “smart” stretching, which allows the center to stretch independently from the sides. Please see Smart Image Stretching for more information.

Properties

Name Description
Image The image shown in this component. Leave this field blank to display a placeholder image.

There are two ways to select the image to display:

  • Upload a file by dragging it from your desktop and dropping it on this field. You can also click the browse button to the right of the field to upload a file.
  • Type a custom URL.
When Hovering The image to show when the user’s mouse is over this component. Leave this field blank to disable the roll-over effect.

See the Image setting for instructions on selecting an image.
Alternate Text Alternate text for the image.
Top Edge * The size (in pixels) of the top edge of the image when using smart stretching.
Right Edge * The size (in pixels) of the right edge of the image when using smart stretching.
Bottom Edge * The size (in pixels) of the bottom edge of the image when using smart stretching.
Left Edge * The size (in pixels) of the left edge of the image when using smart stretching.
Hi Res * Whether to treat the image as a double-density image for “retina” screens when using smart stretching.

* These settings are only available when using Smart Stretching.