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 the any URL or project asset for the image (and roll-over image).

By default, empty Image components will display their dimensions. Placeholder text responds to font settings available in the inspector and toolbar.

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 to your project library, and the image will be added to your design.

Note: Alternatively, you can insert images (without roll-overs) inside text components 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. Refer to Using Image Smart Stretching for more information.

Useful Design Patterns

Properties

Name Description
Image The image shown in this component. Leave this field blank to display a placeholder image.There are several ways to select the image to display.

  • Use a project asset by dragging it from the library and dropping it on this field.
  • Use a project asset by clicking the browse button to the right of the field and selecting the asset.
  • Use a project asset by typing its URL in the field. You can get an asset’s URL by right-clicking it and choosing Get URL from the context menu.
  • 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.