Import Raster Artwork

Summary

This lesson covers the process of importing raster images into your Rive project. Beyond simple importing, Rive offers built-in tools for image optimization, including quality adjustments and format conversion (e.g., WebP or JPEG). You will learn how to manage asset properties, control file size through compression, and use different methods to place raster artwork onto your artboards.

Step by Step

1. 00:04
   Importing Images

   Open the Assets Panel and drag your image file directly into the editor to upload it.
2. 00:17
   Viewing Settings

   Select an image in the Assets Panel to rename it or check its dimensions, file size, usage count, and creation date.
3. 00:29
   Replacing Assets

   Use the Replace option to swap an existing asset with a new image while maintaining its placement in the project.
4. 00:36
   Compression and Formatting

   Adjust the quality slider to optimize file size and choose between different file types like WebP or JPEG.
5. 00:50
   Embedding in RIV

   Ensure the Export to RIV option is selected so that the image data is bundled within your exported .riv file.
6. 01:03
   Adding to Artboard

   Drag an image from the Assets Panel onto an artboard. If the image is much larger than your artboard, manually scale it down to fit.
7. 01:18
   Generating an Artboard

   Right-click the asset in the panel and select Generate Artboard to create a new artboard that matches the image's exact dimensions.

Notes About Current Rive

• Optimization: Converting images to WebP within Rive is a great way to balance visual quality and performance for web and mobile runtimes.
• Non-destructive Swapping: The Replace feature is incredibly useful for updating artwork without breaking existing animations or hierarchy setups.
• Hierarchy Integration: Once placed, raster images behave like other layers in the hierarchy, allowing for easy parent-child grouping.