Image Element

What is the Image Element?

Image element displaying a logo
Image element displaying a sponsor logo

The Image element displays static images in your output. Use it for logos, sponsor graphics, branding, decorative elements, or any visual content you want to include alongside your timer and other elements.

The image element provides flexible sizing and positioning options to ensure your images look exactly how you want them, whether you need a small logo in the corner or a full-screen background graphic.

How It Works

Adding an image to your output is straightforward:

  1. Upload an image using the image uploader
  2. Configure sizing (contain, cover, or stretch)
  3. Set positioning (center, top, bottom, left, right)
  4. Optional: Enable rounded corners
  5. The image displays in your output

Once uploaded, the image remains in place and doesn’t require any control from the Controller. You can update the image at any time by uploading a new one, which will replace the existing image.

Element Settings

Image Upload

Upload an image file to display in the element:

Upload process:

  1. Click the upload area or drag and drop an image
  2. The image uploads to your output
  3. Preview appears immediately in the settings

Replacing images:

  • Delete the current image
  • Upload a new image
  • Changes apply immediately to all connected viewers

Size Options

Control how the image fits within the element’s boundaries:

Contain (default):

Image with contain sizing showing entire image within boundaries
Contain - fits entire image


  • Fits the entire image within the container
  • Maintains aspect ratio
  • May show empty space on sides or top/bottom
  • Best for logos and graphics where you want to see the whole image

Cover:

Image with cover sizing filling entire container
Cover - fills container


  • Fills the entire container
  • Maintains aspect ratio
  • May crop parts of the image
  • Best for backgrounds and full-bleed images

Stretch:

Image with stretch sizing distorting to fill space
Stretch - distorts to fill


  • Distorts the image to fill the container exactly
  • Does not maintain aspect ratio
  • Image may appear squashed or stretched
  • Use carefully, typically only when aspect ratios match

Position Options

When using Contain or Cover sizing, you can control where the image is positioned within the container.

Available positions:

  • Center (default) - Centers the image horizontally and vertically
  • Top - Aligns to the top, centered horizontally
  • Bottom - Aligns to the bottom, centered horizontally
  • Left - Aligns to the left, centered vertically
  • Right - Aligns to the right, centered vertically

Position settings are disabled when using Stretch mode, as the image fills the entire container regardless of position.

Rounded Corners

Enable rounded corners to add a modern, polished look to your images:

Image with sharp square corners
Sharp corners (default)
Image with rounded corners
Rounded corners

Enabled:

  • Adds a subtle border radius to the image
  • Creates softer, more friendly appearance
  • Works with all size modes

Disabled (default):

  • Image has sharp, square corners
  • Traditional, professional appearance

Rounded corners are particularly effective for profile pictures, logos, or decorative elements where you want a less formal look.

Supported File Formats

The image element supports the most common image formats:

JPG/JPEG:

  • Best for photographs and complex images
  • Smaller file sizes with compression
  • No transparency support

PNG:

  • Best for logos, graphics, and text
  • Supports transparency
  • Larger file sizes than JPG

WEBP:

  • Modern format with excellent compression
  • Supports transparency
  • Smaller file sizes than PNG
  • Good browser support

SVG:

  • Scalable vector graphics
  • Perfect for logos and icons
  • Scales without quality loss
  • Usually very small file sizes

Choose the format that best matches your use case. SVG is ideal for logos, PNG for graphics with transparency, and JPG for photographs.