All Collections
Email Templates and Setting
Understanding Why Images in HTML email Are Blocked in Outlook or Gmail?
Understanding Why Images in HTML email Are Blocked in Outlook or Gmail?
Kyaw avatar
Written by Kyaw
Updated over a week ago

Here's a comprehensive guide on how to address the issue of images not automatically displaying in EDMs or your event confirmation email, along with explanations, best practices, and additional tips:

Understanding Why Images Are Blocked

Generally, Email apps or clients such as Outlook or Gmail have a setting not to automatically display or download images. The user or the corporate IT administrator who controls the users' email has full control of their email clients to block the images by default.

  • Spam Prevention: Email clients often block images by default to protect users from spam or malicious content that might attempt to track when an email is opened.

  • Bandwidth Conservation: Some users may have image blocking enabled to save on data usage, especially on mobile devices.

Strategies to Improve Image Display

  1. Use 'Alt Text':

    • Always include descriptive alt text for every image. This text will display if the image doesn't load, providing context and improving accessibility.

    • Make your alt text engaging to encourage users to download images.

  2. Entice with a Compelling Preheader:

    • Your email's preheader text (the snippet visible in the inbox) is crucial. Craft a persuasive preheader that hints at the visual content, making users want to see the images.

  3. Optimize Image File Size:

    • Large images can take longer to load. Compress images without sacrificing quality to reduce load times and avoid triggering image blocking.

  4. Utilize Plain-Text Alternatives:

    • Include a thoughtfully designed plain-text version of your email. This ensures your message is still readable and engaging even if images are blocked.

  5. Whitelisting Instructions:

    • Politely ask your subscribers to whitelist your email address or domain. Provide simple instructions for how to do this in popular email clients.

  6. Image Hosting on a Reputable Server:

    • Use a reliable image hosting service to avoid any red flags with spam filters.

  7. Inline CSS:

    • Instead of embedding CSS in a <style> tag, use inline CSS styles directly on your image tags. This helps ensure proper rendering by different email clients.

Example of Optimized Code:

HTML

<img src="https://www.yourdomain.com/image.jpg" alt="Exciting Offer - See Visuals Now!" style="display:block; width:100%; height:auto; border:0;" />

Additional Considerations:

  • Avoid Image-Only Emails: Always include text content to provide context if images fail to load.

  • Test Across Email Clients: Test your EDM thoroughly in different email clients (Gmail, Outlook, Yahoo, etc.) to ensure images display correctly.

Did this answer your question?