Images not loading on gmail using protocol-relative URLs

24 April 2015

We recently added https support to carwow. After some testing we decided to convert every url in the website to the protocol relative counterpart (e.g. any references to http://www.carwow.co.uk become //www.carwow.co.uk). 
 We deployed, and apparently everything was working fine.

Where are my images?

One day I opened one of our emails in my gmail account and this was what I saw:

That grey box next to the saving should have a picture of my car. Every image in the email was gone.

To start I checked the image tag in the email:

<img alt=”Audi A1" src=”” style=”width:90%;border:0;min-height:auto;line-height:150%;outline:none;text-decoration:none;display:inline;max-width:600px” title=”Audi A1" class=”CToWUd”>

Weirdly, the source tag was missing.

I checked the email on Mandrill and every image was there. Maybe gmail had issues with protocol-relative images?

To isolate the issues I tried to send a pure html mail to my gmail account, using both kinds of urls: with protocol-relative urls and without. I was able to reproduce the issue.

Conclusion

The preview on Mandrill is a normal webpage, and protocol relative images work like everywhere else. When the email is sent to gmail, Google probably replaces the link, and if it doesn’t find the protocol will return an empty source for the attached picture.

The solution? Just make sure you put the full url for any images sent by email.


Originally published at underthehood.carwow.co.uk on April 24, 2015.

Interested in making an Impact? Join the carwow-team!
Feeling social? Connect with us on Twitter and LinkedIn :-)