Available for all item types

Use IMAGE to upload photos, icons, illustrations, images, and graphics from My library, Veeva Vault, NaviGate, or your device to the item layout. You can add IMAGE as an individual component or as a part of the carousel, coded, container, popup, and tab group components.

Image requirements

Supported formats: AI, GIF, JPEG, JPG, PNG, PSD / INDD, SVG

To check whether a target system supports GIFs added to your content item, refer to the documentation of a specific target system.
Recommended maximum size: 50 MB
The image should be at least twice the size of the email layout for optimal display quality.

For example, if the email is designed at 600 pixels, use a 1200-pixel image for high-resolution retina screens.

To add this component to your item, drag IMAGE from the Components tab on the elements panel to the item layout.

To upload the required asset to the image component:

1. Drag IMAGE to the layout.

2. Go to the Properties tab and click BROWSE.

Alternatively, you can double-click the image component on the layout.

3. In the Assets popup that appears, select the required image and click ADD.

The selected image opens in the Edit image popup. Here, you can customize the image in the following way:

CROP the image in the preset shape: Rectangle, Square, or Ellipse. To keep the original proportions, use .
FLIP the image horizontally or vertically.
ROTATE the image clockwise or counterclockwise.
Zoom in/out the image with the slider.

To apply your changes, click SAVE.

You can find the selected image on the layout.

Emails and their briefs, landing pages and their briefs, multipage sites, and messenger ads

You can add the component separately for the desktop and mobile versions and customize an image for each version.

The added image appears on the layout and is proportionally adjusted to the component width and height.

On the layout, the uploaded high-resolution image appears smaller than its original size. However, in the source ZIP archive, the image retains its original size.

You can add actions and animation to the image on the dedicated Editor tabs.

Depending on the item type you're editing, you can use different options to customize the image.

Image customization for e-Detailers, their briefs, portfolio e-Detailers, and banners

To resize or reposition the selected image on the slide, use handles. Hold the SHIFT key while resizing to preserve the image aspect ratio.

On the Properties tab, you can:

Assign the element type to the added image. Not available for banners.
Change the component name that is displayed on the Tree tab.
Save the added image to your Library with the button.
The file is stored in the size and format used in the content item type.
Its name is generated automatically. If the image metadata doesn't contain a human-readable name, the system generates one using the word "editor" and a unique ID.
Upload the required asset to the image component with the BROWSE button.
Modify the image in the Edit image popup. For this, hover over the image box and click .
Update or add texts on the image using the EDIT IMAGE TEXT button.
Select the required FIT value from the dropdown list to render the image within the component placeholder as follows:
- Keep original—to display the image at its original aspect ratio. If the image is larger than the component placeholder, the parts that extend beyond the placeholder are hidden from view.
- Fit inside—to scale the image proportionally to the component placeholder without cropping. Padding may appear if aspect ratios don't match.
- Fill frame—to fill the component placeholder height and width while keeping the aspect ratio. If aspect ratios don't match, the parts that extend beyond the placeholder are hidden from view. The value is selected by default.
- Stretch to fit (may distort)—to fill the component placeholder height and width without keeping the original aspect ratio. The image may appear stretched or compressed.
- Shrink to fit—to scale images that are larger than the component placeholder proportionally.
Align the image within the component placeholder using the ALIGNMENT buttons:
- Horizontally—Left, Center, Right.
- Vertically—Top, Center, Bottom.
Use the ALIGNMENT buttons to reposition the image and adjust the visible area when the component placeholder is smaller than the uploaded image.
The default image alignment can be set in the component placeholder. Change it if required.
Enter the alternative text for the image.

To set the image width, height, position, and other parameters, select the image on the slide and go to its Styling tab.

Image customization for emails, landing pages, their briefs, modules, and messenger ads

The uploaded image is proportionally adjusted to the component width and height set on the layout.

On the Properties tab, you can:

Assign the element type to the added image.
Save the added image to your Library with the button.
The file is stored in the size and format used in the content item type.
Its name is generated automatically. If the image metadata doesn't contain a human-readable name, the system generates one using the word "editor" and a unique ID.
Upload the required asset to the image component with the BROWSE button.
Modify the image in the Edit image popup. For this, hover over the image box and click .
Update or add texts on the image using the EDIT IMAGE TEXT button.
Enter the alternative text for the image.
Link the required external resources to the image.
Align the image on the layout to the left, center, or right.
Set the image width in pixels.
Set the image height in pixels. Available for modules, multipage sites, and messenger ads.
Clear the Show in Desktop/Tablet/Mobile checkbox to hide the image in the desktop/tablet/mobile version. Available for emails and their briefs, websites, and landing page briefs. In email fragments and messenger ads, you can also hide images separately for desktop and mobile versions.

On the Styling tab, you can set the image fill, padding, and border.

To fit the image to the full width of the layout:

1. Add a placeholder to the block.

2. On the Styling tab, set 0 for the left and right padding of the placeholder and block.

3. Drag the image component to this placeholder.

Only image components with added assets are displayed in the content item PREVIEW mode.

Image text editing

Image text editing allows inline text updates. In Editor, you can customize content using font options, apply colors, and automatically translate text directly on the image. This streamlines market-specific image preparation and ensures text consistency across all content items.

When content items containing modified images are published to Veeva Vault PromoMats as PDF for approval, those images appear in the target system as new image documents. Each document is automatically linked to its original VVPM asset, improving transparency and simplifying content tracking.

Users with proper permissions can edit or add texts on images. Contact the administrator for details.

Recommendations

To minimize the risk of unexpected issues, consider the following recommendations for image text recognition:

Text recognition works with English and may be unreliable for other languages.
Maximum words per image: 100.
Supported formats: PNG, JPEG, JPG.
Maximum image size: 5 MB.

Avoid the following:

Text with low-contrast, blur, decorative, handwritten, or highly stylized fonts placed on curved and uneven surfaces.
Rare characters, subscripts, or special symbols.
Small or visually similar objects, as well as highly detailed or technical visuals.
Images with opacity below 100% or gradient backgrounds.

If formatting issues occur in the recognized text, adjust them manually.

Process

To edit text in an image:

Select the image on the layout.
Go to the Properties tab and click EDIT IMAGE TEXT.
As a result, the Edit image text popup opens. Wait for the popup notification indicating that text recognition is complete.

In the Edit image text popup, after text recognition, you can do the following:
- Hover over the required text. A gray frame appears, indicating that the text is editable.
- Add a text placeholder:
  - Click the + ADD TEXT button [2] to place it in the center of the image.
  - Left double-click on the text-free space within the image.

Add custom font [5] and highlight [6] colors to the color picker palette for use with recognized image text in your content items.
Select text to display a blue frame, allowing you to resize, rotate, or drag the text placeholder.
eWizard Editor automatically adjusts font size to maintain proper formatting.
Contact the administrator to configure the font size scale for selected text recognized on images.

When you add a new text placeholder or select existing text, the following options also become available:

The AUTO-TRANSLATE button [1] for automatic translation.
The WYSIWYG editor [3] for text customization.
The font family dropdown [4] allows you to do the following:
- Select the Upload font option to add a variable font or separate font files. Uploaded fonts are available in all content items for 24 hours and only for your account.
- Use custom fonts from content item templates.
  
  The font [5] and highlight [6] color pickers provide a palette for selecting text color.
You can manage formatted text as follows:
- Copy, paste, or duplicate with the Ctrl+C, Ctrl+V, and Ctrl+D keyboard shortcuts.
- Delete and duplicate using the respective options in the context menu.
Scale the image display with the - and + buttons [7]. Or you can select Full size, Fit to screen, Fit to width from the zoom list [8].
Use Undo and Redo buttons [9] to revert or reapply actions.

3. Click SAVE to apply the changes to the image on the layout.

Text and highlight colors

You can customize image text by changing its color, highlight, and opacity. The color picker popup provides template theme colors and allows you to add custom ones.

To change font and highlight colors in the Edit image text popup, select text or add a text placeholder. Then, activate the corresponding color picker in the WYSIWYG editor.

As a result, the color picker popup appears.

Here, you can do the following:

Use the slider to change the font or highlight color.
Click the button to activate the color sampling loupe.
Press the Esc keyboard key to close the loupe.
To change the font or highlight color, do the following:
1. Move the mouse cursor across the content item layout.
  The loupe displays a magnified view of the area under the cursor with a pixel grid.
2. Position the center of the loupe over the required pixel.
  The center pixel determines the color to be used.
3. Click to apply the selected font or highlight color.
  The color picker popup appears automatically, allowing you to adjust the color and opacity or add it to custom colors.
4. Click outside the color picker popup to close it.
Use the slider to configure the color opacity. Also, you can enter the opacity value in the A (Alpha channel) field and press Enter to apply it.
Click No color to make the font or highlight transparent.
Select HEX or RGB and enter their codes to set the specific color.
Apply theme colors to ensure consistent text styles across images and content items.
Contact the administrator to rename the THEME COLORS label.

Add up to 12 custom colors to the color picker popup. For this:
1. Click + in the CUSTOM COLOR section.
2. Select a color on the palette or with the sampling loupe.
  You can also adjust the opacity of the selected color.
3. Click to save the color.
  To cancel adding a custom color, click the button.

To remove a custom color, right-click one and select Delete from the context menu.