“Export as Image” Feature

The "Export As Image" feature in the Postcards Email Builder allows users to convert an entire module and its elements (e.g., text, buttons, images) into a single image upon export. This ensures consistent rendering across email clients such as Outlook, Gmail, Apple Mail, etc., especially for complex designs or unsupported elements like custom fonts or background images. However, this feature disables links, buttons, text selection, and mobile view settings in the exported template. This feature is ideal for preserving visual integrity in email campaigns.

Overview of Export As Image

• Purpose: Converts a module (e.g., Header, Content, Table) into a single image to maintain design consistency across email clients, bypassing issues like unsupported CSS or fonts.
• Impact: Disables interactive elements (links, buttons, text selection) and mobile view settings (e.g., "Collapse on mobile") in the exported image, as it becomes a static visual.
• Use Cases: Ideal for complex layouts, custom fonts, or background images that don’t render correctly in clients like Outlook, which has limited CSS support.

How To Use Export As Image

To enable and configure the "Export As Image" feature in the Postcards editor:

1. Select a Module:
   • Click on the module (e.g., Header, Content, Table) you want to export as an image in the left sidebar or central canvas.
2. Access & Enable the "Export As Image" Settings:
   • Navigate to the right sidebar, where customization options for the selected module appear.
   • Locate the "Export As Image" and turn on the toggle to activate the feature.
   • Once enabled, additional configuration options will appear in the right sidebar.

Configuration Options

After enabling "Export As Image," configure the following settings to optimize the output:

• Resolution - Choose from three resolution options to balance image quality and file size:
  • 1x (No Retina Support): Standard resolution, suitable for basic displays but not optimized for high-density screens. Results in smaller file sizes.
  • 2x (Retina Support): Higher resolution for Retina displays (e.g., Apple devices), ensuring crisp visuals on modern screens. Recommended for most email campaigns.
  • 3x (Hi-HDPI Support): Ultra-high resolution for high-DPI devices, providing maximum clarity but increasing file size. Use sparingly to avoid slow email loading.
• Link Toggle:
  • On/Off: Toggle to enable or disable a clickable link for the exported image.
  • URL Input Field: If the link toggle is on, enter a URL (e.g., https://yourwebsite.com) to make the image clickable, directing recipients to a webpage or action. Ensure the URL is valid and accessible.
  • Open in New Tab: An action that opens the destination URL in a new browser tab, allowing users to keep their current page open while viewing additional content. If left unchecked, the link will open in the same tab.
• Alt Text:
  • Input Field: Add descriptive alternate text for the image, used if the image fails to load or for accessibility (e.g., screen readers). For example, “Pricing chart for summer sale.”

Best Practices for "Export As Image"

• Use for Complex Designs: Export modules with custom fonts, background images, or intricate layouts (e.g., headers with gradients) as images to ensure consistent rendering, especially in Outlook, which lacks support for advanced CSS.
• Optimize File Size: Choose 1x or 2x resolution for most campaigns to balance quality and email loading speed. Use 3x only for high-DPI devices when necessary.
• Add Descriptive Alt Text: Include clear, concise alt text (e.g., “Product showcase banner”) to improve accessibility and provide context if images fail to load.
• Test Links: If using the link toggle, test the URL in “Email Preview” to ensure it directs to the correct destination and works in clients.
• Avoid Overuse: Limit “Export As Image” to specific modules, as it disables interactivity (e.g., buttons, text selection). Use standard modules for CTAs or text-heavy sections that require user interaction.