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.

How Postcards Handles Images

When you upload an image, Postcards automatically compresses any file larger than 2000px to balance quality and performance. This ensures that even high-resolution images display properly without adding unnecessary weight to your email.

For background images, size doesn’t matter; Postcards processes them automatically and includes built-in Outlook fallbacks using VML, so they render correctly across major clients.

For regular images (those placed directly inside modules), dimensions do matter. If the image width and height are defined in pixels, it can affect your layout and responsiveness. When possible, use percentages instead, this helps images adjust naturally to different screen sizes while keeping a consistent design structure.

Recommended Image Guidelines

The ideal image size depends on where it appears in your email layout. As a general rule, email templates should stay within 600–700px total width to display properly in all major clients and avoid horizontal scrolling.

Full-width (hero or header) images

• Maximum width: 600px

• Recommended file size: under 200KB (ideally closer to 150KB)

Content images (inside grids or body sections)

• Width between 300–400px

• Maintain proportional height to avoid stretching or distortion

Thumbnails and logos

• Width between 100–200px

• Keep file size under 50KB for faster rendering

Animated GIFs

• Keep file size under 1MB

• Use simple loops and a limited color palette to ensure smoother playback in clients like Outlook and Gmail

Format Recommendations

JPG – best for photos or large visuals where compression helps reduce file size.
PNG – ideal for logos, icons, or any graphics that require transparency and crisp edges.
GIF – use only for short, lightweight animations or decorative effects.

Before uploading, it’s always a good idea to compress your images with tools like TinyPNG or Squoosh. This keeps your email code lighter and reduces loading times without visible loss in quality.

Practical Tips for Cleaner Image Performance

Use “Host images online” during export to ensure images load properly in all ESPs.
Avoid stretching or resizing images in HTML—always upload them at their intended display size.
Add Alt Text for every image to improve accessibility and provide a fallback if the image is blocked.
Stick to consistent aspect ratios throughout your layout to maintain a clean and balanced design.
Preview and test your email using Email Preview in Postcards to confirm images render correctly on different devices and clients.

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.

Some versions of Outlook require the exact image dimensions to be set for proper rendering. When the responsive setting is enabled, Postcards automatically downsizes the image to fit the layout.

If both width and height are defined, the image becomes fixed; it will display at the same size on both desktop and mobile devices.
If only one value is defined (either width or height), the image remains responsive and adjusts proportionally on mobile.
If neither value is set, the image keeps its original size and remains fully responsive.

Setting dimensions thoughtfully helps ensure your images render correctly in Outlook while maintaining flexibility across other email clients.

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