I’m having trouble with Gmail not showing small embedded images in my email template. The images are encoded as base64 strings in img tags. I’ve tried a few things to fix it:
Turned on external images in Gmail settings
Made the images smaller (under 8KB)
The images show up fine in Outlook.com but not in Gmail. The img src is empty in Gmail.
I’m using putsmail.com to test my emails so I know it’s not a problem with SendGrid or my app.
My template is based on a Litmus design. I added some images and text to it.
Has anyone run into this before? Any ideas why Gmail might be blocking these images? I can share more details if needed.
I’ve dealt with similar issues before, and Gmail can be tricky with embedded images. One thing that worked for me was using a Content-ID (CID) approach instead of base64 encoding. Essentially, you’d attach the images to the email and reference them in the HTML using the CID.
Another potential solution is to host the images externally and use absolute URLs in your img tags. This might be more reliable across different email clients.
Have you checked if the images are showing up in the spam folder? Sometimes Gmail’s filters can be overzealous. Also, make sure your img tags have proper alt text and dimensions specified - this can sometimes help with rendering.
If none of these work, you might want to try a different email testing service to rule out any issues with putsmail.com. Litmus or Email on Acid could be good alternatives to confirm if it’s a Gmail-specific problem.
I’ve encountered this issue before with Gmail and embedded images. One workaround that’s been reliable for me is using inline CSS to set the image as a background instead of using img tags. This method seems to bypass some of Gmail’s filtering.
Another approach worth trying is to use a service like imgbb or Imgur to host your images and then link to them in your email template. This can improve deliverability across various email clients.
If you’re still having trouble, you might want to check your email’s spam score using a tool like mail-tester.com. Sometimes high spam scores can cause Gmail to block images. Adjusting your content or HTML structure might help lower the score and improve image display.
Remember, email client rendering can be unpredictable, so thorough testing across multiple platforms is always a good idea.
hey man, i had similar probs w/ gmail. try using data URIs instead of base64. like this: <img src="data:image/png;base64,yourBase64StringHere">. also, check ur content-type header. make sure its set to “multipart/alternative” or “multipart/related”. these worked 4 me. good luck!