Including images in your Flowcode campaigns is key to creating a polished, on-brand experience for your customers. To make sure your visuals look great across all devices, follow the specifications below for Landing Page Modules and External Link Objects.
General Best Practices
Export at 2x resolution: This ensures sharpness on high-density (retina) screens. If you are using a non-vector native app like Photoshop and are not doing this, images will appear ever so slightly blurry.
Example: 403 × 156 px images should be exported at least 806 × 312 px.
Text inside images is not recommended: Text can shift or crop unpredictably on smaller screens and limits dynamic content updates (like event times or promo details). Use text overlays in the editor whenever possible. Logos are an exception.
Always preview on mobile: Make sure your design remains clear and legible at smaller sizes.
Stay within safe areas: Critical visuals (logos, text, faces) should stay inside the defined safe zones as seen in the below graphics.
Need help? Contact Flowcode Support if you have questions about image specs or performance.
Landing Page Module (Hero Image)
The hero image is the main visual banner of your page. Since layouts adjust to device and module count, image areas may crop or shift slightly.
Specifications
Aspect ratio: 9:16
Minimum resolution: 360 × 640 px (export at 720 × 1280 px minimum)
Corner radius: 16 px (automatically rounded on all sides)
Design Guidance
AREA | WHAT IT MEANS | WHAT TO DO |
Maximum Safe Area | This is the largest area of the image that may be visible to end users. It assumes a page with minimal modules or text.
| Place graphics you’d like to appear broadly within this space.
|
Minimum Safe Area | This is the smallest guaranteed visible area, based on denser layouts (e.g. 4+ thumbnail link modules or 7+ icon modules). | Keep critical visuals and text inside this zone to ensure they’re always seen. |
Possible Text Overlay | This area may typically be covered by text, depending on how much you add. Even without text, a subtle gradient is fixed at the bottom of this module.
| Use this space only for background or secondary visuals—avoid critical words or focal points. |
Possible Button Overlay | This section will be covered by a button, if present. Because the gradient here is heavy, image content won’t be visible. | Design as if this area may appear blacked out whether you include a conversion button on the page or not. |
Example
External Link Object
External links can display images in several configurations within your page. Each follows its own image spec. Always export at 2x the listed minimum resolution for sharp results.
Image with Thumbnail Configuration
Used for horizontal thumbnail-style link modules.
Specifications
Aspect ratio: 21:9
Minimum resolution: 403 × 156 px (export at 806 × 312 px minimum)
Corner radius: 16 px (top-left and top-right corners rounded automatically)
Design Guidance
Keep primary graphics inside the safe area for consistent visibility.
Avoid detailed or text-heavy designs—simplicity displays best across devices.
Example
Image with Image Configuration
Used for image-based link modules without titles.
Specifications
Aspect ratio: 21:9
Minimum resolution: 403 × 156 px (export at 806 × 312 px minimum)
Corner radius: 16 px (top-left and top-right corners rounded automatically)
Design Guidance
Use clear, legible visuals that communicate your message without text overlays.
Keep primary graphics inside the safe area for consistent visibility.
Example
Image with Icon Configuration
Used for small icons and images in link modules.
Specifications
Aspect ratio: 1:1
Minimum resolution: 32 × 32 px (export at 64 × 64 px minimum)
Design Guidance
Simplify shapes and use strong contrast for visibility at small sizes.
Avoid fine details—they may blur or disappear on smaller screens.
Example
Quick Summary
IMAGE TYPE | RATIO | MIN RESOLUTION | CORNER RADIUS | KEY TIP |
Landing Page Module (Hero Image) | 9:16 | 360 × 640 px | 16 px (all corners rounded) | Keep key content inside the minimum safe area. |
Image with Thumbnail | 21:9 | 403 × 156 px | 16 px (top corners rounded) | Focus on simple, legible graphics. |
Image with Image | 21:9 | 403 × 156 px | 16 px (top corners rounded) | Focus on simple, legible graphics. |
Image with Icon | 1:1 | 32 × 32 px | None | Use high contrast, simple shapes. |