How to add and replace images

In TeleportHQ, you add an image with the Image element from the Elements panel, or by dragging a file from the Assets Manager straight onto the canvas. To replace an image, select it on the canvas, open the Assets Manager and click the replace button on the new picture. Every image has an Image section in the right panel for its source, alt text and loading, and Edit image above a selected image crops and adjusts it, adds text, removes its background, changes it with AI, and sets its size and file format.

Before you start#

• Upload your picture first, or plan to use a free stock photo. See How to upload images, videos and files.
• Images are available on every plan. Your plan decides how large each file can be. See Which files can I upload, and how big can they be?

Add an image to your page#

You can place an image in a TeleportHQ page in two ways: from the Elements panel, or directly from your uploaded files.

From the Elements panel#

1. On the canvas, select the container where the picture should go.
2. In the left sidebar, click Elements.
3. On the Primitives tab, find the Media group.
4. Click the Image (I) card. You can also drag it onto the canvas. A placeholder picture is added and selected.
5. In the right panel, find the Image section.
6. Click the small image preview next to src. The Assets Manager opens in the left sidebar.
7. Point at the picture you want and click the button that appears on it. The placeholder changes to your picture.

From the Assets Manager#

1. In the left sidebar, click Assets Manager.
2. Open the Uploads tab.
3. Drag a picture onto the canvas. Or select a container, point at the picture and click the add asset to stage button that appears on it.

The picture is added as a new Image element.

By pasting a picture#

1. Copy a picture in another app, for example a screenshot.
2. On the canvas, select the container where it should go. With nothing selected, it goes on the page.
3. Press Cmd+V (Mac) or Ctrl+V (Windows).

TeleportHQ shows "Adding the pasted image…", uploads the picture to your Assets Manager and adds it as a new Image element.

Replace an image#

To swap a photo in a TeleportHQ template or AI-generated page, keep the image where it is and change its picture.

1. On the canvas, double-click the image. It gets selected and the Assets Manager opens.
2. Find the new picture on the Uploads tab, or on the Stock tab for a free photo.
3. Point at the new picture and click the replace asset button that appears on it. The image on the canvas changes, and its size and style stay the same.

You can also right-click the new picture in the Assets Manager and choose Replace Image. To use a picture from the web instead, paste its full address (for example, https://example.com/cake.jpg) into the src field in the Image section.

Add alt text and choose how the image loads#

The Image section in the right panel holds the settings of a TeleportHQ image.

1. Select the image on the canvas.
2. In the right panel, find the Image section.
3. In alt, describe the picture in a few words. For example, type Chocolate birthday cake with candles. Screen readers read this text aloud, and search engines use it.
4. In loading, choose lazy to load the picture only when a visitor scrolls near it, or eager to load it right away. Use eager for a large picture at the top of the page.

Crop, adjust, add text or remove the background (Edit image)#

TeleportHQ has a built-in image editor for pictures you uploaded (PNG, JPEG or WebP).

1. On the canvas, click the image once to select it.
2. Above the image, click Edit image. The Edit image window opens.

3. Pick a tool. The Edit image window has six tabs:
   • Crop: crop to a shape such as Free, Original, 1:1 or 16:9. Under Rotate and flip, turn the picture or mirror it. Under Straighten, level it with the Angle slider.
   • Adjust: pick a look under Looks (for example Vivid, Warm or Mono), or fine-tune the sliders in three groups: Light (such as Exposure, Brightness and Contrast), Colour (such as Saturation, Temperature and Tint) and Detail and effects (Sharpen, Blur and Vignette).
   • Text: click Add text to place a line of text on the picture. Drag it on the image to move it.
   • Background: click Remove background with AI. This uses AI tokens.
   • AI: change the picture with AI. Choose Mark an area and paint over the part to change (Brush size sets the brush; Undo stroke and Clear remove paint). Pick Erase it or Replace it with… (then type what goes there), and click Erase with AI or Replace with AI. Or choose Whole image, describe the change and click Edit with AI. The window shows about how many AI tokens it uses.
   • Export: choose the Size (Original, or a long edge of 2048, 1600, 1200 or 800 pixels), the Format (Keep original, PNG, JPEG or WebP) and the Quality. File size estimates how big the new file will be.
4. Leave Use the new image in the selected element ticked to put the result on the page.
5. Click Save as new image.

TeleportHQ saves the result as a new file next to the original and shows "Saved as" with its name and size. The original picture stays in your Assets Manager. Use Undo and Redo at the top of the window to step through your edits, or Reset all to start over. If you close the window with unsaved edits, TeleportHQ asks Discard the edits? first. You can also open the editor by right-clicking a picture in the Assets Manager and choosing Edit Image….

Check that it worked#

The new picture shows on the canvas in the place you chose. When you select it, the Image section in the right panel shows the picture's preview and your alt text. To see the image as visitors will, preview your site.

Troubleshooting#

The image turned into a container when I dropped a picture on it Holding Cmd (Mac) or Ctrl (Windows) while dropping onto an image shows "Image will transform into a container" and makes the image a container. Press Cmd+Z or Ctrl+Z to undo. To change the picture instead, use the replace asset button described in "Replace an image".

Double-clicking the image opens a component instead of the Assets Manager The image is part of a component. Double-clicking opens the component, where you can replace the image for every copy. See How to edit a component and update every copy.

"Generate with AI" is greyed out for an image The image's picture comes from connected data, for example a CMS field. Change the picture in the data source, not on the canvas. See How to show data from a data source on your pages.

There is no Edit image button The button shows only when one image is selected, its picture is a PNG, JPEG or WebP file in your Assets Manager (not a stock photo or a web address), and the image isn't inside a component copy.

"The marked area is too small for the AI to see. Paint over a larger area." The AI works on a smaller copy of your picture, and at that size the paint covers almost nothing, for example a thin brush stroke on a big photo. Raise Brush size or paint over more of the area, then try again.

"The AI could not edit the image." or "The background could not be removed.", followed by a reason The request was refused before the AI started, and the rest of the message says why. A refused request uses no AI tokens. When the message ends with "Please try again." instead, wait a moment and try again.

"The file is over your plan's size limit per file." The edited picture is bigger than your plan allows for one file. Click Make it smaller: the Export tab opens. Pick a smaller Size, another Format such as WebP, or a lower Quality, then save again.

"Select a single element to paste an image into." Several elements are selected. Select one container, or nothing, and paste again.

Good to know#

• Resize and style an image with Size, Border, Radius and Shadow in the right panel. See How to set an element's width and height.
• Text on top of a picture needs a background image instead. See How to change an element's background color, gradient or image. To convert an image, right-click it and choose Turn into Container.
• Make an image clickable with the link icon above it. See How to add links and buttons.
• SVG files become Image elements and can't be recolored. For icons, see How to add and color icons.
• AI pictures: select an image and click Generate with AI (uses AI tokens). See How to generate images with AI.
• AI edits work on a smaller copy. The AI tab sends the AI a copy of your picture at most 1536 pixels on its longest side, as the tab says: "The AI redraws the picture at up to 1536 px." With Mark an area, only the area you painted changes, and the rest of the picture keeps its full resolution. With Whole image, the AI redraws the whole picture at that size and TeleportHQ scales it back to your picture's size. Text layers stay on top and aren't sent. A description can be up to 500 characters.
• Undo after many AI edits. Each AI result is kept at full size so Undo can go back to it. After many AI edits on a big picture, the oldest are let go to free memory, and the window says "Older AI results were let go to free memory, so undo stops sooner."
• Blurry on the live site? See How image optimization works.