The HTML format, by now the standard for pretty much all email correspondence (business, marketing and even personal), allows for 2 ways of inserting images into messages – linking and embedding. The choice may seem trivial, but in reality the difference is between e.g. a marketing banner being displayed correctly in the recipients inbox or being blocked and displayed as the dreaded ’empty box with red x’ (Fig. 1).
Fig. 1. Famous ‘box with red x’ indicating issues with an image.
Here is what you need to know to make an informed decision between using linked or embedded images in email signatures (and emails in general):
Embedded images
Sent as hidden email attachments* and referenced in the source of the message using a unique Content ID:
<IMG src="cid:unique content id">
Pros and Cons
displayed automatically when the email is viewed
can be viewed when the email client is offline
not affected by external factors
can be blocked by antivirus software
increase the size of emails
add paperclip icon to messages in OWA
* it is also possible to embed images in emails as text strings encoded using the Base64 scheme, but tests show that most popular email clients will not display them (see this article for more)
Linked images
Located on e.g. a web server and downloaded into the message each time it is viewed by the recipient. Referenced in the source of the email using their web URL:
<IMG src="https://www.mail-signatures.com/wp-content/uploads/2013/07/7454211E-24A9-48b2-969D-4F93B679618F.jpg">
Pros and Cons
cannot be blocked by antivirus software
do not increase email size
not displayed automatically in most popular email clients (recipient must click a ‘download images’ button or change settings for specific sender)
recipient has to be online
affected by external factors (web server down, accidental deletion, URL change)
Suggested reading
Learn more about using images in HTML
Image types available in popular email clients and enterprise mail platforms
How to rotate banners in company mail without the help of IT
How to unify email signatures in company mail
Everyone loves it whenever people get together and share thoughts. Great website, keep it up!
Saved as a favorite!, I enjoy your site!
Hi
I have added the image in my Signature , that signature image is not showing in my Client mail when i sent a mail to them , it showing like empty box, why this is happening in their mail.
also its working for me
Regards,
anupama.
Hi Anupama,
There might be a few different reasons for images not showing. If you are using linked (hosted) images, the recipient’s email client might be blocking them automatically, until the sender adds you to Safe Senders list, or click the option to ublock the image for this specific email. If you are using embedded graphics, it might be an antivirus set to high security mode. It’s impossible to know for sure without knowing the details, for example: how is the image added, what is the image’s URL (if it’s hosted), what is the email client used to send and to receive the email signature.
Hi Pawel –
I’m so frustrated! I’ve been trying to get a hosted logo into my signature but can’t seem to get it to work. I’m on MS Outlook for Mac v16.13.1.
Can you help??
Hi Mary,
I don’t think there is an option to do this directly from the Outlook for Mac. However, you can use our Free Email Signature Genarator to do this and paste the signature with the online image to the Outlook for Mac signature editor.
Hi Pawel,
I have been trying to insert a picture of my signature into my hotmail account but it’s too big. The worst thing is I can’t seem to manage to resize the picture. So I end up removing it completely out of frustration. Now my question is, what do i need to insert a picture signature on my hotmail account? Do i need to have a website first? I’ve seen emails that come with picture signature that are as small as 1kb, what can I do to get my picture reduced this much? Thank you
Hi Kale,
Please resize the picture you want to insert to a manageable size (generally, you should not use images over 100 KB) using any graphics editor software. After that, try to add the resized image again. Also, if you try to add your whole email signature as a picture – that might not be the best way to do it. Please take a look at the templates in our free Email Signature Generator to see how an optimized email signature should look like.
Please can you help, once I add the Signature and send the mail the quality of the image is lost, how do i let the Resolution stay High, also the Image is 350KB big. pls help… I’m using Outlook
Hi Tim,
Check if you have picture compression switched on in Outlook: https://support.office.com/en-us/article/Turn-off-picture-compression-81a6b603-0266-4451-b08e-fc1bf58da658
Also, make sure that your picture’s DPI value is 96.
Other reasons why picture size might be distorted: https://support.office.com/en-us/article/Reduce-the-size-of-pictures-and-attachments-d0b6b6bf-3b08-4dad-a01c-533719d1c005
Hi Pawel,
Hope you can slove my problem.
1. I have my html signature coding in the notepad, saved in htm format with UT-8 format.
2. when i insert the coding with my outlook signature, the logo’s sizes are getting changed.
Please guide me, how to resolve this
Hi Janaki,
Have you tried defining the size of the image in the html code (e.g. as per this article: http://www.w3schools.com/tags/att_img_width.asp)? If so, how exactly?
Hi Pawel
Could you go over how to add an image in the signature for Roundcube – webmail application.
I understand dragging and dropping won’t work. I’m not sure how to link or embed. Linking seems the way to go now.
I was able to attach the signature to Outlook easily.
Hi Yaad,
As far as I can tell, the only thing you can do is upload the image somewhere on the web, and then copy/paste it into the Roundcube editor or switch to HTML view (“HTML” button next to hyperlink buttons) and insert the image using the <IMG SRC> tag.
Let me know if this helps!
Hi Pawel
I would like to add an image into my webmail roundcube. I understand that dragging and dropping is no longer available. It appears from the string of comments that embedding and linking is the way to go…with linking how do you do this?
I have set up the image signature in my Outlook easily but am wondering how to do this with roundcube.
Hey Pawel, hopefully you can help. Running Outlook 2010. I am trying to add a company logo to my signature that is hyperlinked to the company website. This is how it works on coworkers systems also running 2010. When I add the logo in signature editor, nothing happens, it doesn’t appear. It is there however. I know this because if I now go to send an email, the logo appears in the signature. The problem is that since I can’t get the image to appear in the signature editor, I can’t add the hyperlink to it. This is an embedded image and I have tried both jpg and bmp files. It has to be a settings issue or image issue since my coworkers are running the exact same setup and they don’t have this problem.
Any ideas?
Hi Scott,
Let me know the below:
1. What method are you using to add the logo in the signature editor (insert picture button in the editor, add copy/paste from external source, other)?
2. What is the size & dimensions of an example problem jpg image and can you upload it somewhere so I can take a look?
3. What happens when you try adding a png or gif image?
I am unable to link my images to my email signature that I thought I had professional created. The images don’t show up and I tried in Outlook and roundcube can you please help for roundcube?
Hi Katrina,
In Outlook you should add the image using the Insert picture button: http://www.howto-outlook.com/faq/imagesignature.htm
As to Roundcube – what method are you using to link the image and do you have the HTML Signature option enabled? It should be right below the signature editor.
Looking forward to hearing from you,
Pawel
Hi Pawel
I am experiencing the same problem with Roundcube: I have the HTML signature option enabled and the codes seem right, I can’t visualize the icons I am trying to insert in the signature (I get an icon which looks like a torn photograph instead). This is happening both on Chrome and Firefox.
Is there a way to solve this?
Thanks a lot!
Hi Daniele,
What method are you using to add the icons to the signature? Have you tried using the HTML code editor (as per this video: https://www.youtube.com/watch?v=2khxl9jEofk)?
Looking forward to hearing from you,
Pawel
Hi Pawel
I am trying to add a logo to my signature on owa. I have inserted the logo image along with the text, it looks fine to begin with as it all appears normal. However when i email someone the text appears but not the image, instead it just says “pasted image” where the image should be. It works fine on outlook but not on owa. Is there a reason for this?? Can you help me fix my frustrating issue??
Regards
Dan
Hi Dan,
This issue is specific to Google Chrome. What Internet browser are you using?
Best regards,
Pawel
Hi Pawel,
I have tried using Chrome, Internet Explorer and Outlook.
In Outlook it appears how I want it. However in both Chrome and Internet explorer it comes up with “description” loads of times where the image should be.
Can this be fixed?
Regards
Dan
Hi Dan,
Can you confirm whether you are inserting the image as per my article: https://www.mail-signatures.com/articles/how-to-insert-images-into-office-365-email-signatures/? If not, try it out.
If you have tried applying my article in Internet Explorer and the issue persists, let me know what IE version you are using. Also, give Firefox a try as well (in my tests the issue was present only on Chrome).
Best regards,
Pawel
Amazing,
Im interested in finding the best way to do signatures for a large company that will have 9 variations of the email signature, about 70 staff at each location. 9 locations in total.
the best way to get them on the computers.. ?
cheers
Hi Simon,
What email system are you running in the company? CodeTwo offers email signature management solutions for Microsoft Exchange and Office 365, which should meet your requirement. Read more about them here: http://www.codetwo.com/guides/email-signature-management/?sts=3867
Best regards,
Pawel
Hi, my email signature has a couple of linked logos in it. I’ve noticed that the new Google Inbox app displays those images in the preview line – is there a way to prevent that?
Hi Danny,
When I tested Inbox only images that weren’t hyperlinked were displayed in the preview. The only advice I can think of is to make sure you’re using the latest version of the app (go to Google Play and looking up Inbox).
Let me know if you find a solution.
All the best,
Pawel
IMO people should just refrain from using images in email signatures altogether.
Hi,
I followed the instructions on how to insert a logo with the email signature and it worked but the image is too large when it’s received by others. How can I correct this?
Kind regards,
Eva
Hi Eva,
What type of image are you using – linked or embedded? Are you using a large image and reducing its size within the signature on your end? What email clients are the recipients using when they get the issue?
Thank you,
Pawel
Hi! Pawel .
I want to know that how can i use html E-mail with images . Like i have a Image file and it has social media buttons and website button i have convert it totally in html but i want to know that how can i add it in my email signature which support by almost all email clients .
Thanks
Hi Umer,
Have you tried applying instructions from this article: https://www.mail-signatures.com/articles/add-social-media-button-email-signature/?
Best regards,
Pawel
Is there a way to put signature along with company logo on every reply to clients on yahoo and Gmail emails.
I know I can do it on PC, but my question is can I do it on smartphone like GALAXY S5 or any android phone?
Appreciate for any update
Hi Leo,
You can try applying this procedure: https://www.mail-signatures.com/articles/setting-html-email-signature-images-iphone/, but I wasn’t able to make it work on my Android phone.
Googling “android signature with image” doesn’t return useful results, other than using non-default Android email apps, e.g.: http://android.stackexchange.com/questions/15552/html-signature-in-gmail-app.
Sorry I can’t be of more help. If you find a solution, don’t forget about us 🙂
Best regards,
Pawel
New signature
Hello
Nice article. Have a question about hidden attachment. Is it feasible to insert image having access and influence only on message content?
I mean – I can enter any html code into my content, but I don’t have any option to attach file.
Regards
Hi Roman,
The easiest way would be to convert the image to base64: http://www.base64-image.de/ (or google ‘convert image to base64’) and paste the base64 code into your HTML source. Unfortunately base64 is recognized by few email clients – see my comment under the Embedded images section.
The most reliable way is to add the image on the MAPI level, but this requires a lot of scripting (e.g. http://www.outlookcode.com/d/code/htmlimg.htm) or 3rd party tools like those offered by CodeTwo: http://www.codetwo.com/guides/email-signature-management/?sts=3867
Hope this helps!
Pawel
Nice article…
How can you insert a linked images on a web server in an email message using Microsoft Outlook 2013 so that the image is only displayed when the user is online and the email message size keeps small…
Hi Annoblaa,
Thank you for the question.
In Outlook 2013 you can achieve this using the Link to file option available via the standard Insert picture button. Just remember to paste the URL of your image in the File name box, like so:
Best regards,
Pawel
I’ve got an image embedded on my email signature but sometimes when a client receives an email from me, her software says there is an attachment? Originally I had the image as an attachment in the signature but this was causing the emails to be too large….
Hi Iain,
There are at least 3 possible reasons why this would happen: recipient client settings, your email being received in Plain Text format and antivirus software interference. Unfortunately there is little you can do. More in this article: http://www.msoutlook.info/question/500
Best regards,
Pawel
This article is a bit frustrating, in that it doesn’t fully explain how to set up an embedded image, which would have been nice. Thanks for trying, anyhow!
Hi RM,
Thanks for the comment. I’ve added a link at the bottom of the article to CodeTwo Exchange Rules software, which allows you to use embedded images in organization-wide signatures on Exchange Server. Watch this video to learn how this is done exactly: youtu.be/mhBONmOzi2g?t=1m20s.
As for Outlook, you embed images in signatures using the Insert picture button (marked red in the image I posted in my comment above).
Unfortunately, Office 365, Google Apps and most webmail services do not allow for embedding images. See my Images and graphics in email signatures article for more.
Best regards,
Pawel
I am struggling to put my company logo into my signature panel on outlook, have tried several ways
Hi Raj,
Can you confirm that you tried adding the logo via the Insert picture button in the Outlook E-mail Signature editor:
Also, are you using a linked or embedded image (https://www.mail-signatures.com/articles/images-and-graphics-in-email-signatures/), what other ways have you tried and what was the effect (i.e. square with red “x”, error message, nothing…)?
Thanks,
Pawel