Explain Codes LogoExplain Codes Logo

Html image not showing in Gmail

html
email-testing
image-optimization
gmail-security
Alex KataevbyAlex Kataev·Feb 23, 2025
TLDR

To fix images not showing in Gmail, an HTTPS URL and publicly hosted image is essential. Links that are private, local, or use **CID s are not supported. Gmail only display images that are accessible online. So, place your image on a web server and make sure to use the complete URL in your <img> tag:

<img src="https://yourserver.com/image.jpg" alt="Image Description">

The alt attribute serves as your plan B, providing a description when the image fails to load.

Additional tags such as width and height attributes would help to define the sizing, while style="display:block" can negate the default inline display modes that might result in unwanted spaces:

<img src="https://yourserver.com/image.jpg" alt="Image description" style="display:block" width="600" height="300">

Don't forget to double-check your links and encode them correctly.

Accessibility requirements for images

Images should be accompanied by alt and title attributes for accessibility and to give context to users who've disabled image loading or those utilizing screen readers. If an image can't display, the alt text is your way to go:

<img src="https://yourserver.com/image.png" alt="Your Image Description" title="An Image">

The universal champion of image types, PNG, generally holds the title across different email clients. However, do check them in different clients like Outlook or Thunderbird to affirm compatibility.

Gmail image handling explained

Gmail takes its user safety measures seriously and as part of the process, it runs images through its own proxy servers. This could sometimes make your images appear different as during this journey, Gmail compresses and transcodes them. It's the equivalent of sending a potato image and receiving a french fry. So, optimize them accordingly.

Google Drive can be used for image hosting as passionately as you can use a dictionary for new words. The URLs generated after storing images on Google Drive are usually trusted by Gmail, hopefully averting potential display issues:

<img src="https://drive.google.com/uc?export=view&id=YOUR_IMAGE_ID" alt="Your Image Description">

If Gmail blocks your images, ensure that your images' source domain isn't on Gmail's naughty list.

Strategies to test email efficiently

Testing never hurts. Make use of tools like Litmus or Email on Acid — they can simulate the way your email would be rendered on different email clients and devices. These are like your email's fitting room before the runway.

Remember, users are unique like unicorns. Some may prefer to disable image loading in their Gmail settings, meaning your images will "not" display despite your efforts.

Gmail's security measures demystified

Gmail borrows Gandalf's stance and scrutinizes emails with a stern "You shall not pass!", ensuring no suspicious content slips through. Images from untrusted senders might not get the red carpet welcome and be displayed by default. It's like appealing for good grades in school, building reputation can help improve how Gmail treats your emails.

Let's tackle a tricky bit now — unique image URLs can record when an email is opened. Quite the super-spy, right? However, Gmail's proxy server acts as your secret protection squad, keeping your personal information like IP addresses, safe from prying eyes.

Finally, Gmail performs a security check on your images, much like a bouncer at an exclusive club. There's a slight delay in admitting the images to the grand display, a good thing to keep in mind for email timing.