In Canvas, you can add images either by dragging them to the assets library or clicking on upload button. Once images are added to the assets library, just drag and drop them to the workspace and you can create your masterpiece.
Important: Canvas now supports SVG and WebP image formats, in addition to the existing PNG, JPG, JPEG, and GIF files.
Using the Properties tab on the right panel, you can change the properties of the Image element.
General
Image Name: Displays the name of the image. You can change the name of the image by selecting it and entering the desired name.
Position: You can define the positioning of the image on the workspace. The positioning of the image is relative to the workspace.
In the following screenshot, the image is placed at Zero pixels from the left edge and the top edge. It implies that the image is placed at the top left corner of the workspace.
While manually entering the values for positioning, you cannot enter decimal values.
Height and Width: You can resize an image by dragging the corner handles of the image. Alternatively, you can enter the size of the image on the size fields.
While manually entering the values for resizing, you cannot enter decimal values.
Select lock to keep the aspect ratio locked when resizing the image.
Rotation: You can rotate the image by using the rotate lever or entering the value in the angle field.
The angle field displays values from 0 to 360 when the icon is rotated. While using the rotation feature to animate the image, values must be entered in multiples of 360 to signify how many times the rotation must happen.
Opacity: You can change the opacity of the image by dragging the slider.
Asset
Replace Image: Displays the properties of the image that you have added to the workspace. You can replace the image by clicking Replace Image and selecting an image from the image library.
Responsive
Position of the Image: Position refers to the position of the image on the workspace. Pinning an image to an edge instructs that element to move as the edge itself moves. When an element is pinned to non-opposing edges on the workspace, the distance of the element from those edges of workspace remains fixed or proportional.
You can define the position of the image as Float or Fixed.
Float: When selected, the position of the element on the workspace is fixed such that when the rendered creative size is increased or decreased, the element is placed proportionately. For example, in a 1000px wide workspace if an element is placed at 200px from the left edge, then in a 2000 px wide workspace the element will be placed 400px away from the left edge.
Fixed: When selected, the position of the element is fixed from the edges irrespective of the size of the rendered creative. For example, if an element is pinned 10 pixels away from the top and the left edge, as the workspace size changes, the position of the element will still be 10 pixels away from the top and the left edge.
Dimension: Dimension refers to the fluidity or the fixity of the image container. You can control the resizing aspect of any image by using the two arrows in the Dimension section. When the size of the document changes, the width and height of the image container also changes. If you enable either or both the arrows, the container of the image changes accordingly in height and width. By default, both the arrows are enabled.
To change the dimension of the image in the rendered creative, perform the following:
To enable resizing the height of the image, click the up-down arrow.
To enable resizing the width of the image, click the left-right arrow.
Behavior
Keep initial state as hidden: Upon page load, keeps the image hidden until a configured action is not performed. You can configure the action on the Events tab. For example, even if an animation is created to fade the image, it will not show till the show action is triggered.
Image Fill
Image Fill refers to the behavior of the element when resized. The Image Fill section appears only when the element is made responsive either by height or width from the Responsive interface
Shrink to Fit: The default behavior of Image Fill is to shrink the image to fit. Selecting Shrink to Fit ensures that the image while maintaining the image aspect never expands outside of its image container.
Expand to Fill: Selecting Expand to Fill ensures that the image while maintaining the image aspect always fills the image container, even if the image is cut in the output.
Distort: Selecting Distort resizes the image till it touches all the borders of the image container.
Top Left
Shrink to Fit: When selected, shrinks the image and aligns it to the top-left side of the creative.
Expand to Fill: When selected, expands the image maintaining the focus on the top-left side of the image.
Top
Shrink to Fit: When selected, shrinks the image and aligns it to the top of the creative.
Expand to Fill: When selected, expands the image maintaining the focus on the top-center of the image.
Top Right
Shrink to Fit: When selected, shrinks the image and aligns it to the top-right side of the creative.
Expand to Fill: When selected, expands the image maintaining the focus on the top-right side of the image.
Left
Shrink to Fit: When selected, shrinks the image and aligns it to the left side of the creative.
Expand to Fill: When selected, expands the image maintaining the focus on the left side of the image.
Center
Shrink to Fit: When selected, shrinks the image and aligns it to the center of the creative.
Expand to Fill: When selected, expands the image maintaining the focus on the center of the image.
Right
Shrink to Fit: When selected, shrinks the image and aligns it to the right side of the creative.
Expand to Fill: When selected, expands the image maintaining the focus on the right side of the image.
Bottom Left
Shrink to Fit: When selected, shrinks the image and aligns it to the bottom-left side of the creative.
Expand to Fill: When selected, expands the image maintaining the focus on the bottom-left side of the image.
Bottom
Shrink to Fit: When selected, shrinks the image and aligns it to the bottom-center of the creative.
Expand to Fill: When selected, expands the image maintaining the focus on the bottom-center of the image.
Bottom Right
Shrink to Fit: When selected, shrinks the image and aligns it to the bottom-right of the creative.
Expand to Fill: When selected, expands the image maintaining the focus on the bottom-right of the image.
Example
Following are the examples of different Image Fill selections:
