Images

imagesuploadelementseditor

Image elements let you add pictures, icons, illustrations, and decorative graphics to your Ripple. They bring your space to life visually and can also serve as interactive buttons.

Adding Images

There are two ways to add images:

  1. From the toolbox — click the Image tool to place an image in the centre of your view, or drag it from the toolbox onto the canvas. Either way, you are prompted to upload or select an image.
  2. From your desktop — drag image files directly from your file manager onto the canvas

Both methods upload the file to Rippily's storage and place it on the canvas.

Supported Formats

  • JPEG (.jpg, .jpeg) — photographs and detailed images
  • PNG (.png) — graphics with transparency
  • WebP (.webp) — modern format with excellent compression
  • GIF (.gif) — animated images
  • SVG (.svg) — scalable vector graphics

For best results, use WebP or PNG. GIF animations play automatically at runtime.

Positioning and Resizing

  • Drag to move an image anywhere on the canvas
  • Resize using the corner and edge handles
  • Lock aspect ratio — toggle this in the properties to prevent distortion when resizing
  • Rotation — set a rotation angle in degrees
  • Scale — adjust the scale factor (useful for fine-tuning size)
  • Flip — mirror the image horizontally or vertically

Image Properties

When you select an image, the toolbox shows:

  • Position (X, Y) — exact coordinates
  • Size (width, height) — dimensions in pixels
  • Opacity — transparency (0 = invisible, 1 = fully visible)
  • Border — stroke colour, width, and style (solid, dashed, dotted)
  • Corner radius — round the corners of the image
  • Hover effect — animation on hover (scale, glow, rotate, bounce, and more)
  • Alt text — alternative text for accessibility

Making Images Interactive

Images can have actions attached — making them work as buttons, navigation controls, or triggers:

  • Click to change scene
  • Click to play a sound
  • Click to show or hide a layer
  • Click to open a URL
  • Hover effects for visual feedback

See the Actions documentation for the full list of available actions.

Enlarge on Click

Enable Enlarge on click to let participants click an image to open it in a larger lightbox view. This is handy for maps, infographics, or any image that benefits from closer inspection. Note that this takes precedence over any actions attached to the image.

Hidden at Runtime

You can mark an image as Hidden at runtime. The image remains visible in the editor (shown with a dashed outline) but is invisible to participants. This is useful for creating invisible clickable hotspots — areas that trigger actions without any visible element.

Visual States

Images support multiple visual states. Each state can override properties like position, size, opacity, and border:

  • Default — the normal appearance
  • Hover — when a participant hovers over the image
  • Down — when being clicked
  • Selected — toggled on/off state
  • Custom states — create your own for advanced interactions

Button Sets

Like shapes, images can be assigned to a button set for radio-button behaviour — only one element in the set can be selected at a time.

Assign a button set in the Selection card under the Behavior section of the properties panel, or right-click and use the Button Set submenu. When you assign a button set, a Selected state is created automatically so you can style the active appearance.

Images and shapes can be mixed in the same button set.

See Shapes and Text — Button Sets for full details.

Tips

  • Use PNG or WebP with transparency for overlays and icons
  • Combine hidden-at-runtime images with click actions for invisible buttons
  • Use the hover effect to signal that an image is clickable
  • Keep file sizes reasonable — large images affect loading time