In this article:

• Quick-Start Guidance
• Hero Specifications
• Image Specifications
• Gallery Specifications
• Video Specifications

Looking to add media to your site? When selecting and readying media files from an existing DAM, designers, marketers, and content editors should follow these guidelines to ensure images and videos look great and perform well across the Experience Portal platform.

Quick-Start Guidance

Our best practices are based on a desktop viewport width of 1440px, which serves as a common baseline for modern screens. Component heights vary depending on layout and usage within the platform.

For best results, maintain the recommended aspect ratio for each component when exporting media and meet or exceed the minimum pixel dimensions outlined below. This helps prevent unwanted cropping, blurriness, or quality loss across responsive breakpoints.

Images

For images, we recommend starting with larger source files (approximately 2× or 3× the intended display size) and scaling down when exporting. This preserves sharpness and ensures assets look crisp on high-resolution (Retina) displays.

Use the following formats based on content type:

• JPG – Best for photography and complex imagery
• PNG – Use when transparency is required
• SVG – Recommended for logos, icons, and illustrations when possible, as vector files are lightweight and scale cleanly across screen sizes

All images should be exported in the sRGB color profile to ensure consistent color rendering across browsers and devices.

After exporting, test images across multiple breakpoints (desktop, tablet, and mobile) to confirm that focal points, cropping, and legibility hold up at smaller screen sizes.

Videos

For videos, use the same aspect ratios and pixel dimensions defined for the hero component (outlined below) to ensure consistent layout behavior.

For larger source videos, consider using a compression tool to reduce file size without noticeable quality loss. Reducing video file size can also help with ensuring consistent page loading speeds. 

Supported formats include all those regularly accepted in your MediaValet DAM, including these common types:

• MP4
• MOV
• AVI
• MPEG
• MPG
• WMV
• MKV

Avoid embedding critical text directly into video files, especially hero placements where text overlays may already be present.

These guidelines apply to all media components within the platform. Below, we'll cover specifics for each.
 

Note: As we continue to refine and optimize the Experience Portal platform, these recommendations may evolve to support new components, performance improvements, and display standards. Always refer to the latest documentation for current best practices.

A note about GIFs

At this time, GIFs are not supported in Experience Portals. However, you can use the Video component as a workaround:

1. Upload a video file to your DAM.
2. In the Experience Portal, add a Video component to a content page and select the file you uploaded.
3. In the Video component's property window:
   1. On the Design tab, toggle off "Show player controls".
   2. On the Content tab, toggle on "Autoplay," "Loop video," and "Mute video".

Hero

Available hero (overlay) sizes: 

Height: Large (16:9)

Pixel minimum* size: 1440x810 

Height: Medium (2:1)

Pixel minumum* size: 1440x720 

Height: Small (3:1)

Pixel minimum* size: 1440x480

Split Hero Layouts

Heroes are also available in split layouts. For split layouts, use half of the full-width minimum (720px) while maintaining the same height as the corresponding full-width hero. This ensures visual consistency across layouts.

Height: Medium (1:1) Split layout

Pixel minimum* size: 720x720 

These sizes are recommended minimums for best visual quality. Smaller assets may work in some cases but can result in reduced sharpness or unintended cropping. As we continue to refine and optimize our platform to best meet the needs of our clients, these recommendations may change.

Image

The Image component is a flexible media block designed to support inline visual content within a page. It can be used for photography, illustrations, or brand imagery and supports responsive scaling across screen sizes.

This component does not enforce a fixed aspect ratio by default and relies on the source image and selected aspect ratio settings.

Recommended Image Sizes

Image sizing is based on a 1440px desktop viewport. Because this component is typically used within a constrained content column (rather than full-bleed), recommended minimums vary based on layout context.

• Full-width image (within content column)
   Recommended minimum width: 1200px
   Height: Flexible (maintain original aspect ratio)
• Half-width or stacked layouts
   Recommended minimum width: 720px
   Height: Flexible (maintain original aspect ratio)

For best results on high-resolution displays, start with 2× source files and scale down when exporting.

Aspect Ratio Behavior

By default, the Image component uses the image’s original aspect ratio. Page administrators or editors may also apply preset or manual aspect ratios if cropping is required.

When using manual or preset ratios:

• Ensure important content is centered.
• Avoid placing critical details near image edges.
• Use the focal point selector to control responsive cropping behavior.

Image Formats

Use the following formats based on content type:

• JPG – Photography and complex imagery
• PNG – Images requiring transparency
• SVG – Logos, icons, or simple illustrations (recommended when possible)

All images should be exported using the sRGB color profile for consistent color across browsers and devices.

Padding, Borders, and Styling

The Image component supports optional visual styling:

• Image padding – Adds spacing around the image within the container
• Corner radius – Applies rounded corners
• Border – Optional outline around the image

When applying padding or borders, ensure the source image resolution is sufficient to avoid visible softness at edges.

Accessibility and Usability Considerations

• Avoid embedding text directly into images whenever possible.
• Ensure sufficient contrast between image content and surrounding backgrounds.
• Use clear, descriptive alt text to support screen readers (configured in the Content tab).

Best Practices

• Choose imagery with a clear focal subject that scales well on smaller screens.
• Test images at multiple breakpoints to ensure crops and proportions remain visually balanced.
• Keep file sizes optimized to support fast page load times.

Notes and Assumptions

• Recommended widths assume a standard content column within a 1440px layout.

• Exact rendered size may vary depending on page layout, padding, and stacking behavior.

   

Gallery

The Gallery component allows you to display multiple images and videos in a structured layout. It supports grid, carousel, and slide-based presentations and is ideal for showcasing campaigns, product imagery, or collections of related visuals.

Gallery behavior is responsive and respects the selected aspect ratio and layout settings.

Supported Layouts

The Gallery component supports the following layouts:

• Grid – Displays multiple items simultaneously in rows and columns
• Carousel – Displays one primary item at a time with navigational controls
• Slides – Similar to carousel, optimized for sequential viewing

Each layout impacts how images are cropped, scaled, and navigated.

Recommended Media Sizes

Gallery sizing is based on a 1440px desktop viewport. Because gallery items are displayed in smaller containers than full-width media, recommended minimums vary depending on layout and thumbnail size.

Carousel / Slides Layout (Primary Media)

Recommended minimum size per image or video:
 1440 × 810 (16:9)

This ensures the active media item remains sharp when displayed at larger sizes.

Grid Layout (Individual Tiles)

Recommended minimum size per image:
 720px wide
 Height: Determined by selected aspect ratio

For denser grids or smaller thumbnail settings, assets smaller than this may be acceptable, but higher-resolution source files are recommended to maintain clarity.

For best results on high-resolution displays, start with 2× source files and scale down during export.

Aspect Ratio Behavior

The Gallery component supports both preset and manual aspect ratios.

• When using preset ratios, all gallery items are cropped uniformly.
• When using manual ratios, ensure all images share the same aspect ratio to avoid inconsistent cropping.

To preserve important content:

• Center key visual elements.
• Avoid placing critical details near edges.
• Use consistent composition across all gallery items.

Thumbnails

Thumbnails can be enabled to support navigation, particularly in carousel and slide layouts.

Recommended thumbnail sizes:

• Small thumbnails: 240–320px wide
• Medium thumbnails: 360–480px wide
• Large thumbnails: 480–600px wide

Thumbnail images are derived from the main asset, so ensure the source image resolution is sufficient to avoid softness or unintended crops.

Media Formats

The Gallery component supports both images and videos. Refer to the Format sections for each in this article for specifications.

The Gallery component does not support MOV files. 

Accessibility and Usability Considerations

• Avoid embedding critical text directly into gallery images.
• Ensure sufficient contrast for any overlaid UI elements.
• Provide descriptive alt text for each image and video.
• Avoid mixing drastically different aspect ratios within the same gallery.

Best Practices

• Use a consistent visual style across all gallery items.
• Order media intentionally to support narrative flow.
• Test galleries across desktop, tablet, and mobile to ensure navigation and cropping behave as expected.
• Keep file sizes optimized to support fast page load times.

Notes and Assumptions

• Recommended sizes assume a standard content column within a 1440px layout.
• Exact rendering may vary depending on layout, thumbnail sizing, and spacing options.

• To play video sound, users will need to right click and select "Show all controls" from the browser menu.

   

  ---

Video

The Video component allows you to embed and display video content within a page. It supports inline playback, optional autoplay, looping, muting, and lightbox viewing, making it ideal for campaign highlights, brand storytelling, and product demonstrations.

Video behavior is responsive and adapts to different screen sizes.

Recommended Video Sizes

Video sizing is based on a 1440px desktop viewport. Recommended dimensions align with hero and large media placements to ensure visual consistency across the platform.

• Standard video placement (full-width within content column)
   Recommended minimum size: 1440 × 810 (16:9)
• Half-width or stacked layouts
   Recommended minimum width: 720px
   Height: Determined by selected aspect ratio

For best results on high-resolution displays, start with 2× source videos and scale down during export.

Video Formats and Compression

Supported formats include all those regularly accepted in your MediaValet DAM, including these common types:

• MP4
• MOV
• AVI
• MPEG
• MPG
• WMV
• MKV

Recommended export settings:

• Web-optimized bitrate (balanced quality and file size)
• Progressive download enabled
• sRGB color profile

For larger source files, consider using a compression tool to reduce file size without noticeable quality loss. This may help avoid longer page loading times.

Playback settings

The Video component supports the following playback options:

• Autoplay – Starts video playback automatically when the page loads
• Loop video – Repeats video continuously
• Mute video – Required for autoplay scenarios
• Play in lightbox – Opens video in an overlay for focused viewing

When using autoplay:

• Always enable mute
• Keep videos short and visually simple
• Avoid fast cuts or distracting motion

Accessibility and Usability considerations

• Avoid embedding essential text directly into videos
• Ensure sufficient contrast if video appears behind text or UI elements
• Provide captions or subtitles when audio conveys important information
• Use lightbox playback for longer-form or instructional videos

Best practices

• Keep videos concise and purposeful
• Use motion to support, not distract from, surrounding content
• Test playback behavior across desktop and mobile devices
• Optimize file size to support fast page load times

Notes and Assumptions

• Recommended sizes assume a standard content column within a 1440px layout
• Exact rendered size may vary based on layout, padding, and responsive behavior