Images - Remotion — ContextQMD

Sizing and positioning

Use the style prop to control size and position:

tsx

Dynamic image paths

Use template literals for dynamic file references:

tsx

import { Img, staticFile, useCurrentFrame } from "remotion";

const frame = useCurrentFrame();

// Image sequence


// Selecting based on props


// Conditional images

This pattern is useful for:

Image sequences (frame-by-frame animations)
User-specific avatars or profile images
Theme-based icons
State-dependent graphics

Getting image dimensions

Use getImageDimensions() to get the dimensions of an image:

tsx

import { getImageDimensions, staticFile } from "remotion";

const { width, height } = await getImageDimensions(staticFile("photo.png"));

This is useful for calculating aspect ratios or sizing compositions:

tsx

import {
  getImageDimensions,
  staticFile,
  CalculateMetadataFunction,
} from "remotion";

const calculateMetadata: CalculateMetadataFunction = async () => {
  const { width, height } = await getImageDimensions(staticFile("photo.png"));
  return {
    width,
    height,
  };
};