Add images and videos

You can add new images and videos by the following methods:

Any local images and videos that you use in Google Web Designer are automatically added to the Library, so you can easily reuse them in the document.

AMPHTML ads use amp-img instead of the img tag. Google Web Designer automatically uses the appropriate tag when you add an image in Design view.

Add a new image or video

Import images or videos

  1. In the File menu, select Import Assets…
    The keyboard shortcut to import assets is Ctrl+Shift+I (Windows) or Cmd+Shift+I (Mac).
  2. Select the file or files that you want to import using the dialogue.

Assets will appear in the document workspace and in the Library.

Add images or videos by dragging from your computer

  1. Select the image or video that you want to add, using your computer's file system browser. You can select multiple files.
  2. Drag the image or video to the document workspace in Google Web Designer.

Add images or videos from the Studio Asset Library

  1. Select Studio from the drop-down at the top of the Library.
  2. Connect with the Studio Asset Library by clicking the Launch button.
    • If you're not signed in, you'll be prompted to sign in to the Google Account that's associated with your Studio account.
  3. Navigate through the folder structure to the asset that you want to use.
  4. Drag the asset from the Library to the document workspace where you want to use it.

A copy of the asset is added to the local Library under the studio folder.

Replace an image in the document

The 'Swap image' function lets you replace an image with another one. This is helpful when you're replacing stock images in a template.

  1. Right-click the image that you want to replace.
  2. Select Swap image… from the pop-up menu.
  3. In the dialogue, either select an image from the Library or click + to import an image from your computer.
  4. Click OK.

Add an image or video by using the Element tool

  1. Select the Element tool  in the toolbar. 
  2. Select the image element icon or  the video element icon  in the tool options bar.
  3. Create an element of the size that you want by clicking and dragging in the workspace.
  4. Set the source for the image or video in the Properties panel.

​Images will be resized and stretched to fit the dimensions of the drawn element. Videos will display at the largest size that can fit in the drawn element's dimensions without changing the aspect ratio.

Use images and videos from the local Library

You can see images and videos that you've added to this document in the Library panel.

  1. In the Library, select image or video assets by clicking their names.
  2. Drag the assets to the workspace where you want to use them.

Web Designer stores copies of the local Library asset files in the assets subfolder inside the Google Web Designer project folder.

Was this helpful?
How can we improve it?