> For the complete documentation index, see [llms.txt](https://docs.maker.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maker.co/tips-and-tricks/adding-assets.md).

# Adding Assets

<figure><img src="/files/O2hG8FXgShrGlZOcY6Px" alt=""><figcaption></figcaption></figure>

***

### Uploading & Referencing Local Assets

1. **Attach the file**
   * Click the **+** button under the prompt box.
   * Select **Add images & files**.
   * The **Files & Images** modal opens.
   * Stay on **Uploads** to use files you have already uploaded, or switch to **Artifacts** to reuse generated assets.
   * To add something new, click **Upload** (top right) and choose your file.
   * Once the new asset is uploaded, select it from the **Uploads** tab.&#x20;
   * Click the file thumbnail to insert it into your project.
2. **Refer to your prompt**

   ```
   Use the attached image as the hero background.
   ```
3. Maker will automatically insert or replace your project’s `<img>` with the selected asset.

<figure><img src="/files/xKJ0XpFcYKVPyJtKfVOu" alt=""><figcaption></figcaption></figure>

***

### Using External URLs

* **Paste any public URL** (PNG, JPEG, SVG, MP4, YouTube, Vimeo) directly into the prompt.
* **Prompt example**:

  ```
  Fetch this image: https://example.com/header.png and use it as the page’s hero banner.
  Embed this YouTube video (https://youtu.be/XYZ) below the introduction.
  ```
* Maker fetches and embeds external assets at generation time.

***

### Replacing Assets in Your Project

* **Share a prompt to make any asset updates**

  ```
  In the hero banner, replace the logo with the attached image.

  ```
* **Select Tool-** Target any element in your live preview by clicking on the select tool first in the prompt box
* Maker AI updates your code to reference the new asset paths.

***

### Embedding & Configuring Videos

Add the video as noted above, then prompt like:

* Make the video autoplay and loop enabled.
* Use the video as background, muted autoplay, with a poster frame from this asset

***

### Best Practices

* **Optimize file size**: You don’t need to compress images before uploading—Maker automatically optimizes them for performance. For best visual quality, upload images at **2x the display size**. Note: there is a **5MB file size limit** per image.
* **Descriptive filenames**: When adding assets, add a description in the prompt box on how to use it
* **Match dimensions**: Use aspect ratios that fit your design.
* **Host stable links**: If you upload images directly to Maker, they’re automatically served via our CDN, ensuring fast, reliable, and consistent delivery. If you link to externally hosted assets, be sure they’re on a reliable server or CDN to avoid issues with broken or unstable links when the content is loaded or updated later.

FAQ

<details>

<summary>What's the best format for adding a video to my page?</summary>

It depends on what matters most to you. If you're fine with YouTube's branding showing up, a YouTube embed is the simplest route. For short videos (around a minute or so), MP4 usually works best since it plays at full quality right from the start, with no progressive loading. If the video is meant to sit above the fold or act as a background element, HLS (m3u8) is the better choice for performance.

</details>

<details>

<summary>Will using a YouTube or Vimeo embed affect how my video looks on the page?</summary>

It can. YouTube and Vimeo players keep the video's original aspect ratio within their frame. So if your container size doesn't match the video's dimensions, you'll see blank space on the sides. MP4 and HLS don't have this issue, both can scale to fill the container regardless of the video's original ratio.

</details>

<details>

<summary>There's blank space around my video. How do I fix it?</summary>

This usually comes down to a mismatch between your container size and the video's original dimensions, and it's most common with YouTube or Vimeo embeds since they preserve the original aspect ratio. You have two options: adjust the container size to match the video, or switch to MP4 or HLS, which can scale to fill the container no matter the original ratio.

</details>

<details>

<summary>MP4 or HLS, how do I choose?</summary>

For short videos (around a minute), MP4 is a great fit since it loads at full quality immediately. HLS (m3u8) makes more sense for longer videos, background videos, or anything above the fold where performance is the priority.

</details>

<details>

<summary>Does embedding a YouTube video bring along YouTube's branding?</summary>

Yes, YouTube embeds come with YouTube's own player styling and branding. If you'd rather not have that, MP4 or HLS are good alternatives.

</details>

***


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.maker.co/tips-and-tricks/adding-assets.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.