This lesson was released before Agents, Branching, and the CMS update on June 16, 2026. Some UI may differ, but the core concepts still apply.
Joseph
6:08
Add images, video, and text in Framer
Add images, video, and text to your site in Framer after setting up the page layout. This lesson covers several ways to place image assets, supported formats, intrinsic sizing, image fills, video, and editable text. You will also learn how each content type fits inside Frames and Stacks on the canvas.
Lesson details
In this Framer tutorial, you will learn Adding images, video, and text in Framer. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance. See Fill.
Frequently asked questions
How do I add an image in Framer?
Drag an image file onto the canvas, draw an image Frame from the layout menu, or add an image fill to an existing Frame. You can also use image plugins from the Insert menu.
Which image formats does Framer support?
The lesson covers common raster formats such as JPEG, PNG, WebP, GIF, TIFF, and AVIF, plus SVG for vectors. Choose a format that balances visual quality, transparency, and file size.
How do I restore an image’s original size?
When you drag an image file directly onto the canvas, Framer remembers its intrinsic dimensions. Right-click the image and choose the intrinsic size option to return to those dimensions.
Can I add video directly to a Framer page?
Yes. Add a video element or supported video source, then configure its sizing and playback properties. Preview and publish the page to test the final loading and playback behavior.
How should content fit into a responsive layout?
Place images, video, and text inside Frames and Stacks that use the intended fill, fit, and responsive sizing. Check cropping, wrapping, and reading order at each breakpoint.