Learn how to add image and video elements to enhance your visualizations.
Overview
Image and video elements can add rich visual content to your visualizations, providing context, enhancing storytelling, and creating more engaging data presentations.
You can add image and video elements to your visualization by selecting Insert in the Toolbar and dragging an Image or Video element onto the canvas. Alternatively, click the Image or Video icon that appears when hovering on an empty section.
Image Setup
When configuring an image element, the Setup section under the Image tab provides the following options:
Name: Used to reference the image element in the Layers tab and on the canvas.
Image Source: Upload an image file or provide a URL to an image hosted elsewhere.
Alt Text: Provide alternative text for accessibility purposes and screen readers.
Margin: Adjust the margin around the image element using pixel values for top, right, bottom, and left sides.
Image Formatting
In the Formatting section, you can control how the image appears:
Width: Set the image width as a percentage of the container or in pixels.
Alignment: Choose left, center, or right alignment within the container.
Border: Add a border around the image with customizable color and thickness.
Rounded Corners: Apply rounded corners to the image for a modern appearance.
Shadow: Add a drop shadow effect to make the image stand out.
Pro
Pro users can access advanced image features including custom image libraries,
batch uploads, and enhanced formatting options.
Supported Image Formats
Mappica supports common image formats including:
JPEG/JPG: Best for photographs and images with many colors
PNG: Ideal for images with transparency or sharp edges
SVG: Perfect for logos and scalable graphics
GIF: Suitable for simple graphics (static only)
WebP: Modern format with excellent compression
Video Setup
When configuring a video element, the Setup section under the Video tab provides the following options:
Name: Used to reference the video element in the Layers tab and on the canvas.
Video Source: Upload a video file, provide a URL, or embed from platforms like YouTube or Vimeo.
Poster Image: Set a thumbnail image that displays before the video plays.
Margin: Adjust the margin around the video element using pixel values.
Video Formatting
Control how your video appears and behaves:
Width: Set the video width as a percentage of the container or in pixels.
Aspect Ratio: Maintain proper video proportions (16:9, 4:3, etc.).
Autoplay: Configure whether the video starts playing automatically.
Controls: Show or hide video playback controls (play, pause, volume, etc.).
Loop: Set whether the video repeats continuously.
Muted: Start with audio muted (often required for autoplay).
Tip
Most modern browsers block autoplay videos with sound. If you need autoplay
functionality, consider setting videos to muted by default.
The Fill Container option makes the video fit completely within its container space. If this is unselected, the video will only be as wide as the width of the underlying video file.
Supported Video Formats
Mappica supports web-compatible video formats including:
MP4: Most widely supported format, recommended for most use cases
WebM: Modern format with excellent compression
MOV: Apple format, good for high-quality content
Best Practices
Performance Optimization
File Size: Compress images and videos to improve loading times
Format Selection: Choose the most appropriate format for your content
Responsive Design: Ensure media works well on different screen sizes
Alt Text: Always provide descriptive alt text for images
Accessibility
Descriptive Alt Text: Write meaningful descriptions for screen readers
Video Captions: Provide captions for video content when possible
Contrast: Ensure sufficient contrast between text and media backgrounds
Loading States: Provide feedback while media is loading
Content Strategy
Purpose-Driven: Only include media that supports your data story
Consistent Style: Maintain visual consistency across all media elements
Mobile-Friendly: Test media elements on mobile devices
Copyright: Ensure you have rights to use all media content
Media Library Management
Pro
Pro users have access to a comprehensive media library with advanced
organization and management features.
Organization Features
Folders: Organize media into logical folder structures
Tags: Add searchable tags to quickly find specific media
Search: Full-text search across filenames, tags, and descriptions
Favorites: Mark frequently used media for quick access
File Information: View file sizes, dimensions, and format details
Replace Files: Update media while maintaining all connections and settings
Usage Tracking: See where each media file is used across your visualizations
Accessibility Considerations
Ensure your media content is accessible to all users:
Image Accessibility
Alt Text: Always provide descriptive alternative text for images
Meaningful Images: Ensure images add value and aren't purely decorative
Color Contrast: Ensure text over images maintains sufficient contrast
Loading States: Provide feedback while images are loading
Video Accessibility
Captions: Provide closed captions for all video content
Transcripts: Offer text transcripts for video content
Audio Descriptions: Include descriptions of visual content for screen readers
Keyboard Controls: Ensure video controls are keyboard accessible
Performance Optimization
Optimize media for fast loading and smooth performance:
Image Optimization
File Size: Compress images to reduce loading times
Format Selection: Choose the most appropriate format for each use case
Lazy Loading: Load images only when they become visible
Responsive Images: Serve different image sizes for different devices
Video Optimization
Compression: Balance quality and file size for optimal performance
Streaming: Use progressive loading for longer videos
Fallback Options: Provide alternative formats for compatibility
Bandwidth Considerations: Offer quality options for different connection speeds
Tip
Large media files can significantly impact your visualization's loading time.
Consider compressing images and videos before uploading, and test your
visualizations on slower internet connections to ensure good performance for
all users.
Integration with Data
Connect media elements to your data for dynamic content:
Conditional Display: Show different images or videos based on data values
Dynamic Sources: Change media sources based on user selections or filters
Data-Driven Captions: Update image captions based on current data context
Interactive Media: Create clickable images that trigger data filters or navigation
Common Use Cases
Dashboard Headers: Brand logos and contextual imagery
Explanatory Content: Diagrams that explain complex concepts
Before/After Comparisons: Visual comparisons that complement data
Process Documentation: Step-by-step visual guides
Testimonials: Video testimonials that support data insights
Product Showcases: Images or videos of products referenced in data