Image Elements

An Image Element lets you embed visual assets directly into your layout. Whether you're showcasing a product, illustrating a concept, or adding decorative graphics, Image Elements give you precise control over how images appear, scale, and behave across different screen sizes.

What Is an Image Element?

An Image Element is a content block that renders a static or dynamic image within a page or section. It supports a wide range of display configurations — from simple inline images to full-bleed backgrounds — and integrates directly with the asset library for streamlined media management.

Image Elements are distinct from background images or media embeds. They are first-class content objects with their own positioning, scaling, and accessibility settings.

Supported Formats

The following image formats are supported when uploading to the asset library or referencing an external source:

• JPEG — Best for photographs and complex imagery. Offers excellent compression with minimal visible quality loss.
• PNG — Ideal for images requiring transparency or sharp edges, such as logos and icons.
• GIF — Supports simple animations and is suitable for short looping visuals with a limited color palette.
• WebP — A modern format offering superior compression for both lossy and lossless images. Recommended for web performance.

When in doubt, prefer WebP for new uploads. It delivers the best balance of quality and file size across all modern browsers.

Uploading and Selecting Images

Uploading a New Image

To upload a new image to the asset library:

1. Add a new Image Element in the editor. This will open your asset library.
2. In the top left corner, select the option to add a new file and choose which files you’d like to add to your workspace.
3. The file is validated for format and size, then added to the asset library automatically.
4. Once uploaded, the image is immediately available for use in any Image Element across the project.

Selecting from the Asset Library

If the image already exists in the asset library, you can select it without re-uploading:

1. Click the Select from library button on the image field.
2. Browse or search for the asset by filename, tag, or upload date.
3. Click the image thumbnail to select it and confirm.
4. The selected image is linked to the element. Any future updates to the asset will reflect automatically.

Positioning and Scaling Options

Image Elements support three primary display modes that control how the image fills its container. Choose the mode that best matches your layout intent.

Fit

The image is scaled to fit entirely within the container while preserving its aspect ratio. Empty space may appear on the sides or top and bottom if the image and container proportions differ. Use Fit when the full image must always be visible.

Fill

The image is scaled to completely cover the container while preserving its aspect ratio. Parts of the image may be clipped if the proportions differ. Use Fill for hero images or full-bleed layouts where coverage matters more than showing every pixel.

Crop

Crop mode lets you define a specific region of the image to display. Combined with the hotspot tool, you can pin the focal point of the image so that the most important area is always visible regardless of the container size or aspect ratio. This is especially useful for portrait images displayed in landscape containers.

Recommended Resolutions

Uploading images at the correct resolution ensures sharp rendering without unnecessary file size overhead. The following guidelines cover the most common screen targets:

1080p (Full HD)

• Full-width images: 1920 × 1080 px
• Half-width / two-column images: 960 × 540 px
• Thumbnails and card images: 480 × 270 px minimum

4K (Ultra HD)

• Full-width images: 3840 × 2160 px
• Half-width / two-column images: 1920 × 1080 px
• Thumbnails and card images: 960 × 540 px minimum

For responsive layouts, always upload at the highest resolution you need and let the platform handle downscaling. Avoid uploading images smaller than the largest display size, as upscaling produces visible blurring.

File Size Optimization Tips

Large image files are one of the most common causes of slow page load times. Follow these practices to keep file sizes manageable without sacrificing visual quality:

• Use WebP wherever possible. WebP files are typically 25–35% smaller than equivalent JPEG or PNG files at the same visual quality.
• Compress before uploading. Run images through a tool such as Squoosh, ImageOptim, or TinyPNG before adding them to the asset library.
• Match resolution to display size. Do not upload a 4K image for a 200 px thumbnail. Resize to the intended display dimensions first.
• Avoid unnecessary transparency. PNG files with alpha channels are significantly larger than opaque images. Use JPEG or WebP for images that do not require transparency.
• Limit GIF usage. Animated GIFs can be very large. Consider replacing them with short looping video (MP4/WebM) for better performance.
• Target under 200 KB for most images. Full-width hero images may go up to 400–500 KB, but standard content images should stay well below this threshold.