Skip to main content

<Img />

The <Img /> can be used like a regular <img> HTML tag. The difference is that if you use the component from Remotion, that Remotion will ensure that the image is loaded before rendering the frame. That way you can avoid flickers if it happens that the image is still loading during rendering.

Example​

tsx
import { Img } from "remotion";
import hi from "./hi.png";
 
export const MyComp: React.FC = () => {
  return <Img src={hi} />;
};
tsx
import { Img } from "remotion";
import hi from "./hi.png";
 
export const MyComp: React.FC = () => {
  return <Img src={hi} />;
};

GIFs​

Don't use the <Img> tag for GIFs, use @remotion/gif instead.

Restrictions​

  • The maximum resolution that Chrome can display is 2^29 pixels (539 megapixels) [source]. Remotion inherits this restriction.

See also​