You can add new images and videos by the following methods:
- Use the Import assets command
- Drag assets from your computer file system browser
- Access your Studio Asset Library
- Create an image or video element and specify the source
- Replace an existing image
You can import SVG files either as images or as inline code.
Images & AMPHTML ads
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.
Videos & events (interactive video)
If you want to use events with your video, use the Video component instead of adding a video element as described on this page.
Add a new image or video
Import images or videos
- In the File menu, select Import Assets..., or use the keyboard shortcut, Ctrl + Shift + i (Windows) or ⌘ + Shift + i (Mac).
- Select the file or files you want to import using the dialog.
The assets you select appear in the document workspace and in the Library.
Add images or videos by dragging from your computer
- Select the image or video that you want to add, using your computer's file system browser. You can select multiple files.
- Drag the image or video to the document workspace in Google Web Designer.
Add images or videos from the Studio Asset Library
- Select Studio from the dropdown at the top of the Library.
- 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.
- Navigate through the folder structure to the asset that you want to use.
- 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.
- Right-click the image you want to replace.
- Select Swap image... from the pop-up menu.
- In the dialog, either select an image from the Library or click Import assets to import an image from your computer.
- Click OK.
If you don't see the Swap image... command, make sure you've selected the image and not a parent element or another element overlaying the image. The Outliner panel provides an easy way to check which element you've selected.
Add an image or video by using the Element tool
- Select the Element tool in the toolbar.
- Select Image element or Video element in the tool options bar.
- Create an element of the size that you want by clicking and dragging in the workspace.
- 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.
- In the Library, select image or video assets by clicking their names.
- 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 in your computer file system.
Resize images and videos
Once you've added an image or video, you may want to resize it or adjust the scaling.
You can't preview videos inside the Google Web Designer interface. To see the video in action, preview your document in your preferred browser by clicking the Preview button in the upper right corner.