Images bring your emails to life—hero banners, product shots, icons, and illustrations all use the mj-image component. Here's how to work with images effectively in the Email Love Figma Plugin.
Adding Images
There are two ways to add images to your email:
Using the Plugin
Select a column in your design, then open the Build Your Own tab in the Email Love plugin. Click Image to add an image component into that column. Then replace the placeholder with your actual image using Figma's fill or image tools.
Using Your Own Images
Place any image into a Figma frame that's inside an mj-column. The plugin will detect it and export it as an mj-image component. Make sure the image frame is named correctly—the plugin needs to recognize it as an image.
⚠️ Important: Images must be placed inside a column (mj-column) or hero (mj-hero). Images placed directly in a section won't export correctly.
Image Hosting
When you export your email, the Email Love plugin automatically uploads your images to our CDN and generates hosted URLs. You don't need to manually host images or manage URLs. See the Image Hosting article for more details.
Sizing & Resolution
Desktop
The maximum recommended image width is your email width (typically 640px). Full-width images should be exactly 640px wide. For multi-column layouts, divide accordingly (e.g., 320px each in a two-column layout).
Retina / High-DPI
For sharp rendering on retina displays, design images at 2x the display size. A 640px-wide hero should be a 1280px-wide image in Figma, set to display at 640px width.
File Size
Compress images before using them. Large images slow email loading and can trigger spam filters.
Image Type | Recommended Max Size | Best Format |
Hero/banner | 150KB | JPG (compressed) |
Product photo | 80KB | JPG (compressed) |
Logo/icon | 30KB | PNG (transparent bg) |
Decorative | 50KB | JPG or PNG |
Alt Text
Alt text is critical for email accessibility. It displays when images are blocked (common in corporate email clients) and is read aloud by screen readers.
- Be descriptive: "Woman wearing our new spring collection sundress in coral" beats "product image"
- Include your CTA: If the image contains a call-to-action, put it in the alt text too
- Keep it concise: One sentence is usually enough
- Decorative images: Use an empty alt text for purely decorative dividers or spacing images
Mobile Overrides
Use the Mobile Styles tab to adjust images for mobile:
- Hide on mobile: Remove decorative images that add visual weight on small screens
- Adjust sizing: Set a specific mobile width and height for better proportions
- Add mobile padding: Give images breathing room on narrow screens
Common Issues
- Image looks blurry: Your source image isn't large enough. Use 2x resolution for retina.
- Image doesn't scale on mobile: Check that the image is inside a properly structured mj-column.
- Image blocked in preview: Some email clients block images by default. This is normal—set good alt text.
- Image URL broken after export: The CDN may take a moment to propagate. Wait 30 seconds and refresh.
Powered by