Convert images to HTML templates image-to-html
Overview overview
The image to HTML converter significantly speeds up email creation by converting static images into fully customizable, modular HTML email content templates. This no-code tool allows you to transform visual designs from graphic designers or design tools into responsive, editable email templates that can be reused time and again.
Leveraging generative AI technology, the image to HTML converter analyzes the layout, typography, colors, and visual elements in your image and generates clean, modular HTML code that maintains design fidelity while ensuring full editability and compatibility with the Email Designer.
- You must first agree to the Core Gen-AI terms and the supplemental terms for using the Gen-AI functionality in the Email Designer. Contact the Adobe Account Team (your account manager) for details.
- You must have Access Email Template as well as Edit/Generate Email Template permissions enabled in your Marketo role.
Convert an image convert-an-image
To convert an image into a fully customizable HTML email template, follow the steps below.
-
In the Design Studio, click Email Templates, then Email Templates (New).
-
Click Convert image to template.
-
Enter a Template name and optional description. Also optionally, you can choose your brand styling. Upload or drag and drop the desired image.
-
Scroll down and select the The upload file does not contain… checkbox. Click Convert.
note note NOTE The generation process can take up to five minutes depending on the complexity and size of your image design. The AI processing happens in the background, so you can navigate away from this screen and work on other tasks while the conversion is in progress. You may need to refresh the Email template library screen to see the status change. -
After the conversion is complete, your template is automatically saved as a draft. Click its name to view/edit.
-
The converted template opens in the Email Designer with full editing capabilities. You can now:
- Edit text content and apply personalization
- Modify images and add links
- Adjust colors, fonts, and styling
- Add, remove, or rearrange content components
- Leverage all Email Designer features as with any other template
-
You can make any desired adjustments to refine the template and match your brand guidelines.
-
Once satisfied with your template, click Save & close, then Publish.
Your template is now available in the Email Templates library and can be used when creating emails.
Common use cases use-cases
The image to HTML converter is ideal for:
- Platform migration: Migrating from another email marketing platform? Convert your existing email designs into Marketo Engage-ready HTML templates without rebuilding from scratch
- Design mockup conversion: Transform design mockups from tools like Photoshop, Figma, or other design software into functional email templates
- Quick template creation: Generate email templates rapidly for time-sensitive campaigns without waiting for developer resources
- Building template libraries: Create a comprehensive library of brand-consistent templates that non-technical team members can customize and deploy
Best practices best-practices
Before you start
- Save existing content: Converting an image to HTML will replace all existing content in your email. Always save your current work before using this feature.
- Plan your workflow: Use the image to HTML converter at the beginning of your email creation process, or ensure you’re ready to replace all current content.
Image preparation
- Resolution: Use high-resolution images for better text recognition and element detection.
- Clarity: Ensure text is clearly readable and visual elements are well-defined.
- Width: Design images at standard email widths (600-800px) to match typical email client requirements.
- File format: Use JPEG or PNG format - avoid compressed or low-quality images.
- Complete design: Include the full email design in a single image, from header to footer.
Design considerations
- Simple layouts: Simple, well-structured layouts convert more accurately than highly complex designs.
- Standard elements: Use common email design patterns (header, body sections, CTAs, footer).
- Text legibility: Ensure sufficient contrast between text and backgrounds.
- Web-safe fonts: Designs using common web-safe fonts will have better fidelity.
- Avoid overlapping elements: Keep design elements clearly separated for better structure recognition.
After conversion
- Review your draft: Once conversion is complete, your template is automatically saved as a draft. Take time to carefully review the generated HTML for accuracy.
- Test thoroughly: Test the email across different email clients and devices. For faster results, take advantage of the Litmus integration.
- Refine manually: Make adjustments as needed using the Email Designer’s full editing capabilities.
- Brand alignment: Verify colors, fonts, and styling match your brand guidelines.
- Personalization: Add dynamic content and personalization tokens as desired.
- Accessibility: Review and enhance accessibility features if needed.
Limitations and considerations limitations
Be aware of the following limitations when using the Image to HTML converter.
-
AI interpretation: The AI generates HTML based on a visual interpretation of your image. Complex or unusual designs may require manual adjustments after conversion.
-
Text accuracy: While the AI attempts to recognize and reproduce text accurately, always verify text content and make corrections as needed.
-
Dynamic content: The conversion process creates static HTML based on your image. You’ll need to add personalization, dynamic content, and tracking manually after conversion.
-
Complex layouts: Highly complex designs with intricate layering, unusual shapes, or non-standard elements may not convert perfectly. Simpler designs generally yield better results.
-
Processing time: The conversion process can take up to five minutes depending on the complexity and size of your image. The AI processing happens in the background, allowing you to work on other tasks without keeping the screen open. The template is automatically saved as a draft after the conversion is complete.