--- title: "Embed an image" slug: "embed-an-image" updated: 2025-05-28T21:55:06Z published: 2025-05-28T21:55:06Z canonical: "support.tulip.co/embed-an-image" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.tulip.co/llms.txt > Use this file to discover all available pages before exploring further. # Embed an image There are three ways to add Images to an app: 1. Copy and paste from your computer's clipboard in Chrome 2. Manually upload from your desktop 3. Use an image URL ## Copy and paste an image You can copy and paste images into apps using CTRL+C and CTRL+V on Windows, and CMD+C and CMD+V on Mac. ## Upload an image ### Image widget 1. Navigate to the Step in the app where you would like to upload an image/picture. 2. Click **Embed** in the App Editor Toolbar and choose **Image** from the resulting dropdown. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Add%20Images%20To%20An%20App_92248679.png) 3- Upload the content by clicking the **upload arrow** under the Widget Tab in the Side Pane. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Add%20Images%20To%20An%20App_92248831.png) 1. Use the **refresh arrow** to **Reset Aspect Ratio** for easy formatting. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Add%20Images%20To%20An%20App_92248906.png) ### Drag image into workspace You can directly drag images from your desktop or a folder and drop them into an individual Step in the App Editor. This works well if you have many images in a folder, and you want to quickly add them to steps. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Add%20Images%20To%20An%20App_92249780.png) ## Image URL variable You can [create a variable](/r230/docs/how-to-create-and-use-variables) with type "image" and then store a specific image as a default value. Or, you can update that Variable with a new image in the Trigger Editor. 1. In the Side Pane, click the **App** tab and click ***X*** next to **Variables**. ![Variables1](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Variables1.png) 1. Click **+ Create variable**. ![Create Variable](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Create%20Variable.png) 1. Name the variable "testimage" and select **Image URL** as the type. 2. Click the **Upload icon** under **Default Value**. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Add%20Images%20To%20An%20App_119727099.png) You can always update this image via a Trigger. Use "Data Manipulation" --> "Store" to add a new image URL or upload an image to this variable. ## Style and add triggers to an image You can edit the following properties of images after they are uploaded to Tulip in the Side Pane on the right side of the screen: - Size - Rotation - Drop Shadow - Border Radius - Blinking You can also add a trigger to an image or show a fullscreen version of it when clicked. Use the **Click Actions** menu in the side pane after selecting the image: ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Add%20Images%20To%20An%20App_163251500.png) ## Technical Details of Image Support We support the following image formats: - PNG (maximum size of 20 MB) - JPEG (maximum size of 20 MB) - GIF (maximum size of 5 MB) - SVG (maximum size of 5 MB) JPEG and PNG will be automatically resized to 1920 x 1200 at maximum. --- Did you find what you were looking for? You can also head to [community.tulip.co](https://community.tulip.co/?utm_source=intercom&utm_medium=article-link&utm_campaign=all) to post your question or see if others have faced a similar question! **Image** **Images**are a Tulip Datatype. Images are a reference to a web-hosted location for all Tulip Images. **Step** A view your users will see within an application. **Steps** can be viewed chronologically or in whatever order best fits your process. Steps can be grouped into **Step Groups**to manage and organize your app Steps. **App Editor** The web interface used for building applications. Where you design a user interface, add logic, and connect your applications to **Tables**. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screen%20Shot%202022-09-13%20at%207.50.23%20AM.png) **Widget Toolbar** The **Widget Toolbar**Is the menu where widgets can be found and added to your application. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/toolbar.png) **WidgetTab** In the **Side Pane**, the**Widget Tab**is where you can adjust the **Widget****-level**settings, including **Widget****Triggers,** **Widget** Datasource, **Widget** Contents, and more. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Widget%20Tab.png) **Side Pane** **(Context Pane)** The**Side Pane**is the configuration pane on the right side of the **App Editor**where steps, apps, and widgets can be configured. **Triggers**can be added to adjust widget behavior.![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Context%20Pane.png) **Variable** **Variables**are a location to store app information. Variables have a specific type that must match the contents they can store. Variables are only accessible within a single application and are cleared when the app is restarted or completed. **Trigger** **Triggers** are groups of logic that are tied to an app event, such as step open, timer, widget interaction, etc. App builders can add triggers to **widgets**, **machines**, **devices**, **apps**, and **steps**. **Triggers** can contain **actions**, **transitions**, and **conditions**. **Side Pane** **(Context Pane)** The**Side Pane**is the configuration pane on the right side of the **App Editor**where steps, apps, and widgets can be configured. **Triggers**can be added to adjust widget behavior.![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Context%20Pane.png)