1---
2name: images
3description: Embedding images in Remotion using the <Img> component
4metadata:
5  tags: images, img, staticFile, png, jpg, svg, webp
6---
7 
8# Using images in Remotion
9 
10## The `<Img>` component
11 
12Always use the `<Img>` component from `remotion` to display images:
13 
14```tsx
15import { Img, staticFile } from "remotion";
16 
17export const MyComposition = () => {
18  return <Img src={staticFile("photo.png")} />;
19};
20```
21 
22## Important restrictions
23 
24**You MUST use the `<Img>` component from `remotion`.** Do not use:
25 
26- Native HTML `<img>` elements
27- Next.js `<Image>` component
28- CSS `background-image`
29 
30The `<Img>` component ensures images are fully loaded before rendering, preventing flickering and blank frames during video export.
31 
32## Local images with staticFile()
33 
34Place images in the `public/` folder and use `staticFile()` to reference them:
35 
36```
37my-video/
38├─ public/
39│  ├─ logo.png
40│  ├─ avatar.jpg
41│  └─ icon.svg
42├─ src/
43├─ package.json
44```
45 
46```tsx
47import { Img, staticFile } from "remotion";
48 
49<Img src={staticFile("logo.png")} />;
50```
51 
52## Remote images
53 
54Remote URLs can be used directly without `staticFile()`:
55 
56```tsx
57<Img src="https://example.com/image.png" />
58```
59 
60Ensure remote images have CORS enabled.
61 
62For animated GIFs, use the `<Gif>` component from `@remotion/gif` instead.
63 
64## Sizing and positioning
65 
66Use the `style` prop to control size and position:
67 
68```tsx
69<Img
70  src={staticFile("photo.png")}
71  style={{
72    width: 500,
73    height: 300,
74    position: "absolute",
75    top: 100,
76    left: 50,
77    objectFit: "cover",
78  }}
79/>
80```
81 
82## Dynamic image paths
83 
84Use template literals for dynamic file references:
85 
86```tsx
87import { Img, staticFile, useCurrentFrame } from "remotion";
88 
89const frame = useCurrentFrame();
90 
91// Image sequence
92<Img src={staticFile(`frames/frame${frame}.png`)} />
93 
94// Selecting based on props
95<Img src={staticFile(`avatars/${props.userId}.png`)} />
96 
97// Conditional images
98<Img src={staticFile(`icons/${isActive ? "active" : "inactive"}.svg`)} />
99```
100 
101This pattern is useful for:
102 
103- Image sequences (frame-by-frame animations)
104- User-specific avatars or profile images
105- Theme-based icons
106- State-dependent graphics
107 
108## Getting image dimensions
109 
110Use `getImageDimensions()` to get the dimensions of an image:
111 
112```tsx
113import { getImageDimensions, staticFile } from "remotion";
114 
115const { width, height } = await getImageDimensions(staticFile("photo.png"));
116```
117 
118This is useful for calculating aspect ratios or sizing compositions:
119 
120```tsx
121import {
122  getImageDimensions,
123  staticFile,
124  CalculateMetadataFunction,
125} from "remotion";
126 
127const calculateMetadata: CalculateMetadataFunction = async () => {
128  const { width, height } = await getImageDimensions(staticFile("photo.png"));
129  return {
130    width,
131    height,
132  };
133};
134```
135