Images & Media Management

What is Image Management?

Image management in Onlook provides a centralized location to upload, organize, and use media files throughout your project. All assets are automatically optimized and can be referenced in both visual editing and AI chat.

Key benefits:

• Centralized storage - All project images and media in one place

• AI-ready - Use uploaded images in AI chat for reference

• Drag-and-drop - Fast asset insertion directly onto canvas

• Version control - Assets sync with your codebase via GitHub

• Organized folders - Keep assets structured and easy to find

Accessing Your Assets

The Asset panel is your hub for all media files in your project.

Opening the Assets panel:

1. Click the Image tab in the left sidebar

2. The panel pins open, showing your folder structure

3. Browse folders to see all media assets

What you'll see:

• Folder organization (if you've uploaded a project with folders)

• Thumbnail previews of all images

• File names

• Quick actions menu for each asset

All assets are stored in your project and sync automatically with your codebase.

Uploading Assets

Add new images and media files to your project through the Assets panel.

How to upload:

1. Open the Image tab in the left sidebar

2. Click the upload button or drag files directly into the panel

3. Assets are added to your project and immediately available

Supported file types:

• Images: PNG, JPG, SVG, WebP, GIF

• Icons and graphics

• Other media files

Once uploaded, assets are:

• Stored in your project directory

• Automatically optimized for web use

• Available across your entire project

• Synced with version control

Using Assets in Your Project

There are three main ways to use assets in Onlook: drag-and-drop to canvas, apply via Style panel, and reference in AI chat.

Drag-and-Drop to Canvas

The fastest way to add images to your design.

How it works:

1. Open the Image tab to view your assets

2. Find the image you want to use

3. Drag it from the panel onto the canvas

4. Drop it where you want it to appear

The image is automatically inserted as an optimized element in your code.

Apply via Style Panel

Use assets as background images or fills through the Style panel.

How to apply:

1. Select an element on the canvas

2. Open the Style panel

3. Find the background image section

4. Click the image fill button

5. Select an image from your asset library

Perfect for:

• Hero section backgrounds

• Card backgrounds

• Decorative elements

• Pattern fills

Add to AI Chat

Reference images directly in AI chat for design guidance or implementation.

How to add:

1. Open the Image tab

2. Find the asset you want to reference

3. Click the menu icon (three dots) on the image

4. Select "Add to chat"

5. The image appears in your AI chat input

Manual Optimization Tips

Before uploading:

1. Resize images to their maximum display size

- Hero images: 1920px wide max

- Thumbnails: 400px wide max

- Icons: 64px or SVG

2. Compress files using tools like TinyPNG or ImageOptim

- Target: Under 200KB per image

- Logos/icons: Under 50KB

3. Choose the right format:

- Photos → JPG or WebP

- Graphics/logos → SVG or PNG

- Icons → SVG (scalable, small file size)

Managing Asset Changes

Updating an asset:

1. Upload a new version with the same name

2. The file is replaced in your project

3. All references update automatically

Removing an asset:

1. Delete from the Assets panel

2. File is removed from project

3. Update any code that referenced it

Check References Before Deleting
Before removing an asset, search your codebase to see where it's used. Deleting an asset that's referenced in code will cause broken image links.

Working with Assets in Code

While Onlook provides visual tools for asset management, understanding how assets work in code helps you use them effectively.

Asset Paths

When you upload an asset to Onlook, it's stored in your project's public directory:

/public/images/hero-background.jpg

In your code, reference assets using their public path:

<img src="/images/hero-background.jpg" alt="Hero background" />

Using Assets with AI

When working with AI chat, you can reference assets in multiple ways:

• Add image to chat:
  Use this image as the background for my hero section

• Reference by name:
  Set the navigation logo to the file logo.svg from the images folder

• Ask AI to use existing assets:
  Create a gallery using all images in the /public/gallery folder

Quick Tips

Keep assets organized from the start

• Use consistent naming conventions

• Delete unused assets regularly

Optimize before uploading

• Compress images to reduce file size

• Use appropriate dimensions

• Choose the right file format

Use SVG for scalable graphics

• Logos and icons work best as SVG

• Scalable without quality loss

• Smaller file sizes than PNG

Reference assets in AI chat

• Drag images into chat for design references

• Faster than describing layouts in text

• AI understands visual context better

Sync regularly with version control (when the Onlook GitHub integration is live)

• Pull changes to get team assets

• Push your assets to share with team

• Keep asset library up to date