Images in HTML emails show correctly in Outlook and mobile but break in Gmail browser

Other Questions Gmail
1

I’m having trouble with a PHP email script where embedded images display properly in most email clients but get corrupted specifically in Gmail when viewed through a web browser.

The Problem

When I send HTML emails with inline images, they work perfectly in Outlook and on my phone’s mail app. However, Gmail adds some weird string to the image URL which breaks the display. There’s no “show images” button that I can click either.

My Code

$recipient = '[email protected]';
$email_subject = 'Account Registration Confirmation';

$email_body = '<img src="https://mysite.com/company-logo.png" alt="Logo" /><br /><br />';
// additional email content here

$email_headers = "MIME-Version: 1.0" . "\r\n";
$email_headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$email_headers .= 'From: [email protected]' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();

// send email
if(mail($recipient, $email_subject, $email_body, $email_headers)){
    echo '<h1>Email delivered successfully</h1>';
}else{
    echo '<h1>Email delivery failed</h1>';
}

Has anyone dealt with Gmail’s image handling issues before? What’s the best way to make images work consistently across all email clients?

2

gmail’s proxy is such a pain, but here’s what works for me - add display:block and border:0 as inline styles to your img tag. also check that your server allows hotlinking from google’s image proxy servers, otherwise they can’t pull the image

3

Gmail proxies all external images through their servers, which can lead to display issues. In my experience building email templates for newsletters, I found that the combination of Gmail’s image caching and how it processes image attributes can often cause problems. To improve compatibility, ensure your image URLs are absolute and free from authentication requirements, as Gmail fetches images independently, and any server restrictions or redirects can break the display. Additionally, explicitly setting width and height attributes in your HTML helps prevent rendering issues because Gmail tends to struggle with responsive images relying solely on CSS. Lastly, hosting images on a CDN like Cloudflare or AWS CloudFront has proven advantageous, enhancing delivery rates significantly compared to traditional server hosting.

4

Indeed, Gmail’s web interface has a tendency to disrupt the display of images by routing them through their servers. The peculiar string you’re encountering is a result of this proxy system. In my own experience with transactional emails, I’ve found it essential to include descriptive alt text and maintain uniform image dimensions. It’s also critical to use inline CSS within your image tags, as Gmail often strips away external styles. Additionally, experimenting with both PNG and JPG formats can sometimes resolve compatibility issues. As a last resort, consider base64 encoding essential images like logos, although do note that this will increase the overall size of your emails.