One of the first things you'll want to do is replace the placeholder images with your own. Here's how to do it quickly and cleanly.

Replacing a Single Image

1. Click on the image element on the canvas. A blue selection border appears.

2. In the right panel, look for the Fill section. You'll see a thumbnail of the current image.

3. Click the image thumbnail. An upload dialog appears.

4. Drag and drop your image, or click to browse your files.

5. Your new image replaces the old one in that element.

Framer's Asset Panel for Images

You can also manage all your uploaded images from one place:

1. Open the Assets panel → Images tab.

2. Drag images from here directly onto the canvas or onto existing image elements.

3. All previously uploaded images are saved here for reuse.

Image Fit Modes

After replacing an image, you may need to adjust how it fits its container:

• Fill — Image fills the entire frame, cropped to fit. Best for backgrounds and hero images.

• Fit — Entire image is visible, letterboxed if needed. Good for logos.

• Stretch — Image stretches to fill exactly. Avoid — distorts the image.

💡 Tip: For best quality, use images that are at least 2× the display size (for retina screens). For a 600px wide section, upload an image that's at least 1200px wide. Use WebP format for smaller file sizes without quality loss.