Email Image Rendering and Upload Issues

Images play a big role in how your email looks, but sometimes they don’t show up correctly. Perhaps your header looks stretched, your background disappears in Outlook, or your images won’t upload at all. Don’t worry, we’ve got you covered. This guide will walk you through some image issues in Postcards and show you how to fix them quickly, so your emails look polished on platforms like Gmail, Outlook, Apple Mail, and Mailchimp, etc.

Image Problems You Might See

Background images are not showing, especially in Outlook
Stretched or zoomed-in images
Images are not loading at all or showing broken links
GIFs or WEBP files are not working
Social media icons are misaligned in the mobile view
Large images breaking the layout or pushing content off-screen

Why These Happen

Image problems usually occur because of:

Email client limitations (like Outlook not supporting background images or WEBP formats)
File sizes or dimensions that are too large or oddly proportioned
Incorrect width or alignment settings in Postcards

Image Sizing & Layout

Fix Stretching or Cropping:

In the image settings panel (right sidebar), set image width to 100% or a maximum of 600px.
Use proportional heights to avoid cropping or squashing, and adjust in the “Resize” section of the editing function in the image library.
Resize large images (like headers or banners) before uploading (ideal: 600x354px).

Bonus Tip:

If you’re using background images in complex modules, consider using “Export As Image” to preserve the layout across all email clients.

Uploading & Format Tips

Image Not Uploading or Rendering?

Use the Postcards Image Library or the right sidebar upload for best results.
For GIFs, optimize the file size before uploading to avoid glitches.
WebP image uploads are now automatically converted to JPG or PNG.

Using External URLs?

Make sure the image URL is correct and publicly accessible.
If Outlook blocks external images, change your Outlook email settings to download images automatically.

Fixing Alignment & Mobile Display

Icons or Images Not Lining Up?

Use Grid or GridItem modules to neatly align items like social icons in a single line.
Avoid using too much padding, and keep the layout clean and responsive.
For mobile optimization, set container widths to 375px or less and image widths to 100% to avoid overflow.

Background Image Issues (Especially For Outlook Users)

Outlook Doesn’t Show Backgrounds?

Outlook has limited support for background images.
Fix: Use solid background colors or export your design as an image instead.

Background Cropping or Disappearing?

Make sure your background image has a proper height ratio.

Testing & Troubleshooting

Always Test Before Sending:

Use “Email Preview” to send test emails to Gmail, Outlook, or Apple Mail.

After Making Fixes:

Re-export your template using “Download as ZIP” or “Integrations” to avoid copying over old errors.
If problems continue, clear your browser cache and reload your project.

Summary: How To Get Picture-Perfect Emails

To ensure your images render correctly across all devices and email platforms:

✔️ Use max width: 600px or set images to 100% in Postcards

✔️ Optimize large GIFs before uploading

✔️ Don’t rely on background images in Outlook

✔️ Use Grids for clean image alignment

✔️ Set container widths to 375px or less for mobile

✔️ Always test using Email Preview or Preview & Share

✔️ Re-export after making any image adjustments