Benefits of images in email templates:
Emails with images are easier to read and perceive;
Images have a positive impact on brand awareness;
Visuals increase customer engagement.
There are three major image formats — PNG, JPG and GIF.
PNG — if you need to add an image with sharp edges, include a logo, or an image with a transparent background, this format should be your first choice. The PNG format also preserves image quality regardless of its size and color saturation.
Important note: Heavy PNG images will increase the size/weight of your email, which will affect its loading speed.
JPG — you can use this format if you want your images to keep their colors. However, please be advised that the JPEG format will reduce your image, significantly reducing its quality;
GIF — this format works great when your email service provider doesn't have video support and you still need to include a certain action in your email. However, GIFs have a significant disadvantage — they do not render colors as brightly as JPEGs;
Just to let you know, you are able to upload images with a maximum size of 20 Mb. In case you set up Image Size Limit 3 Mb (and less) the width image limit will be 4000 px.
How to add images to your email template with Stripo?
Dropping/Uploading image:
Here, you can drag and drop the image you are about to use for your email template or upload it from your computer.
Pasting an external URL:
If you do not have the image saved to your computer, you are welcome to insert a link to this image on the web.
Click the "Enter URL" and paste the link to your image in the "External link" field.
If you are going to use this image just once, in the dropdown menu, and choose the "Leave as External" option.
If you are going to use this image for other email campaigns, click the "Project" tab above, insert the link, and choose the "Save to Gallery" option.
Using images from the personal gallery:
As shown in the example above, your images are stored in your personal gallery when you upload images to the gallery. You just need to switch to the "Email" (or "Template" if it’s an email message) tab;
Images here are sorted by the dates, the most recent → the oldest ones. If the list of images is too long, you may search by their name.
To use one in your current email template, you need to click on the selected image, and it will automatically appear in your email template.
If you put an image into the folder "Project", you will see it available in all email messages and templates of that project. You can save an image here if you are going to use it in many email messages and templates within a current project:
💡 Tip: Here, by the word project, we imply a kind of general folder for templates and email messages, where some default settings can be specified.
Learn more.
But what if you don't have the necessary images?
Stripo provides a selection of ready-to-use images in the predefined collections:
"Seasons" – Contains images for holidays and seasonal events like Christmas, Halloween, Black Friday, and more;
"Decoration" – A collection of backgrounds, patterns, and thematic illustrations for email design.
💡 Tip: You can refine your search within these collections using filters (e.g., category, style, or color theme).
Stripo also connects to multiple free stock image providers, allowing you to access:
"Photos" – High-quality visuals from Pixabay, Pexels, and Unsplash;
"Icons" – A variety of vector icons from Iconfinder;
"GIFs"– Animated and static stickers from GIPHY.
💡 Tip: Use the search bar to find relevant images by entering keywords like "business," "summer," or "sale."
How to use AI-Generated Images in the Image Block?
Stripo now supports generating images with AI services like Gemini, and Stability, DALL·E directly in the editor.
Gemini: Google DeepMind's multimodal AI generates images with advanced reasoning.
Stability: Stability AI’s tool (Stable Diffusion) creates high-quality, customizable images.
DALL·E: OpenAI's AI creates detailed images from text prompts, perfect for art and design.
GPT-Image-1: A powerful tool for producing realistic, photorealistic visuals, ideal for marketing and product mockups.
How Does It Work with AI?
Besides, to enhance accessibility and improve content perception, turn on alt text generation in the relevant controls for Image, Video, Banner, and Menu blocks within your Group or Project settings. Once enabled, you can generate alt text automatically with AI inside these blocks.
In the editor, select the Image block and drag it into your template.
In the block settings, choose AI Image Generator, enter a text prompt (e.g., "sunset over mountains"), and generate the image:
Once the image is generated, you can either "Regenerate" it or adjust the image size and alignment as needed.
How to edit images with Stripo?
Once you’ve uploaded the image, in the settings panel, to the right of the image snippet, click the "Edit image" button;
In a new pop-up window, your image will be opened with the Pixie editor;
Here, you can apply filters, resize and crop images, draw over them, put any text over them, add stickers and frames, and apply backgrounds;
When you’ve done editing, click "save" in the Pixie editor — only then will the changes you’ve made to the image be applied.
Additionally, working with the "Image" block, you can:
Check or change an image's path. Additionally, you can copy its URL address;
Insert a hyperlink that takes readers to your website;
Fit to container, which makes the image fit to the size of the container;
Add Alternate Text to an image to specify what will be displayed when it cannot be rendered;
Set the image size — my image’s width is 600 px;
Center alignment is set by default. If you need to change it, click "left" or "right" alignment;
Besides, AI can automatically generate alt text, improving accessibility and search engine visibility. Simply click the "Generate with AI" button to create Alt Text for your image.
Configure the full image Radius, or do it separately for each side;
Activate the Rollover Effect:
The image rollover effect helps you entertain and engage customers. Moreover, it saves you precious space in email templates, as you can hide product details behind its photo. You can also play games with recipients by making them "search" for the coupon, etc. There are many reasons why you need to add an image rollover effect to your email templates.
To activate this effect, toggle the "Rollover effect" button and upload the second image — edit it if necessary.
Important to note: The image rollover effect works on desktop devices. Other users will see the primary image only.
Add the Anchor Link:
You've probably seen a feature on websites when a page has links to its own chapters, and when you click on the link, you get redirected to a specific chapter or paragraph on the same page. This feature is called an anchor link.
To activate it, please turn on the "Anchor link" option and follow the instructions described in another article.
And finally, add Margins to your image block if necessary.
How to add an opacity to an image?
To adjust the transparency of an image, select it and open the code editor. Within the <style> tag for the image, add the code "opacity: 70%" (adjust the percentage as desired).
It's important to note that not all email clients support the "Opacity" style. You can verify which ones don't support it by checking this service.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.