How to fix HTML-Email Images Breaking in different email clients - html

Hi I'm using power automate to send email with images, But it breaks on google but in outlook it works perfectly fine.
This is the result on Outlook:
This is the result on Gmail:
I've already use Base64 Encoding and I don't know what to do next.

You have given us the answer: you used base64 encoding when there is not good support for that across email providers. See https://www.caniemail.com/features/image-base64/
Upload the images to a website or other public repository (a CDN or storage place publicly accessible), and then use <img src="https://www.place.com/imagehere23423423.jpg" ...>

Related

Alternative to base64 Encoded Image sources (E-Mail Signatures)

I am trying to generate email signatures for my entire company so I am using a script to fill in an HTML template with each individual's information and generating an HTML file that I would like to use for the signature. The generation of the HTML works fine and I can load the HTML into chrome and it displays 100% correctly.
I would prefer to not have to host these images somewhere at the moment and would like them to be embedded in the e-mail. We can achieve this by using outlook on each individuals machine to create the signature by hand, but again we want to avoid that. Ideally, we will generate these templates and then automatically put these files on each employee's computer so all we have to do is select the signature from outlook.
The problem we are having is that when we do this, the image does not load. It seems that outlook won't allow base64 encoded images? I've tried to work around this by trying to attach the image to the email and then referencing it, but this doesn't seem to work either. I used this template. I got the boundary from a test email I sent myself, but I don't even know if this is a good way to go about this either.
In short, is there a way to create an .htm file for outlook signatures that includes the image inside the .htm file?
External image file that will be added as an attachment is the only way - Word (which renders HTML messages in Outlook) does not support base64 embedded images.
Try to create a new signature with an image in Outlook and see how they reference the images.

How to embed image in HTML email template?

I have created an Email template using HTML and inline style from scratch. Now I need to add some images, at this point it's not possible to use url because it is not hosted. I tried using base64 encoding, it worked in Apple mail client, but the images are not rendering in Gmail. Is there any way to embed image in html supported by all email clients?
Host the Image publicly in Google Drive by sharing the link 'public on the Web' or 'anyone with the link'. Then use this link http://drive.google.com/uc?export=view&id=FILE_ID to get direct access to the image. You should replace the FILE_ID with actual id from Google Drive link.
Example :
Google Drive Link : https://drive.google.com/file/d/17iWczcf1T_D4kGRaQYBh6J2XOQI181u6/view?usp=sharing
Generated Link : http://drive.google.com/uc?export=view&id=17iWczcf1T_D4kGRaQYBh6J2XOQI181u6
Now you can use this link in your template.
Base64 has very limited support. Generally speaking it is not advised to use it. You can find information about base64 encoding support in this tutorial. It may help to decide if the supported client list is enough or not in your case.
Embedding images in the email is possible by sending them along with the email and reference the sent images with the img tag. A good starter reading for this method is Campaignmonitor’s “Embedding images revisited“ blog post.
The best solution is to host the images with a service provider, which is fast and maintained.
If you use Github, you can also serve images (or any other content) from the GH-Pages branch of a repository.

HTML email template images are not displaying in Outlook and Webmail

Thanks Everybody in advance, I have created an email template with banner image and with some widget image.
Actually instead of giving the path of the image which is stored in the server I used a code which is the decode of base64.
I used https://www.base64-image.de/ this online converter will convert the image to base64 decode for my image.
Actually my plan is instead of loading the image from the server I was using the base64 decode image so that it will be displayed in all emails like Outlook and web mail.
By referring the google I got this idea but in outlook and web mail it's not working.
After converting the image using https://www.base64-image.de/ I got the image code like this
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAgGBgcGERIHBwcVFRMQFhkYFxAVERgYFxMWFxYXGBMVFRYVJCMfGhcgGhcgICsdICcxKCsoHxswMS8mMC4uKCYBCQkJDQwNFw0OGTIhFx0wMjItMioyJzIyJzImMicmMi0mLDEqLTIyJiYyJiYmJi0tMjImLTImJiYyJiYmJiYmMv/AABEIAGMCtAMBIgACEQEDEQH/xAAbAAEAAwEBAQEAAAAAAAAAAAAABAUGAwIHAf/EAEgQAAEDAgMEBwYCBgcHBQAAAAEAAgMEEQUSIRQVMVQGEyJBkqLRMjNRcoGyYXEjQlORobEHFkNik7PBJDRSVXPh8CVEZMPx/8QAGgEBAAIDAQAAAAAAAAAAAAAAAAMEAQIFBv/EACgRAQABAwMCBAcAAAAAAAAAAAABAgMEESExBRJBcdHwBjIzUWGhwf/aAAwDAQACEQMRAD8A+4UVFSujjc6mYSWtucg10C77BR8ozwBKD3UfyN+0KQgj7BR8ozwBNgo+UZ4ApCII+wUfKM8ATYKPlGeAKQiCPsFHyjPAE2Cj5RngCkIgj7BR8ozwBNgo+UZ4ApCII+wUfKM8ATYKPlGeAKQiCPsFHyjPAE2Cj5RngCkIgj7BR8ozwBNgo+UZ4ApCII+wUfKM8ATYKPlGeAKQiCPsFHyjPAE2Cj5RngCkIgj7BR8ozwBNgo+UZ4ApCII+wUfKM8ATYKPlGeAKQiCPsFHyjPAE2Cj5RngCkIgj7BR8ozwBNgo+UZ4ApCII+wUfKM8ATYKPlGeAKQiCPsFHyjPAE2Cj5RngCkIgj7BR8ozwBNgo+UZ4ApCII+wUfKM8ATYKPlGeAKQiCPsFHyjPAE2Cj5RngCkIgj7BR8ozwBNgo+UZ4ApCII+wUfKM8ATYKPlGeAKQiCPsFHyjPAE2Cj5RngCkIgj7BR8ozwBNgo+UZ4ApCII+wUfKM8ATYKPlGeAKQiCPsFHyjPAE2Cj5RngCkIgj7BR8ozwBNgo+UZ4ApCII+wUfKM8ATYKPlGeAKQiCPsFHyjPAE2Cj5RngCkIgj7BR8ozwBNgo+UZ4ApCII+wUfKM8ATYKPlGeAKQiCPsFHyjPAE2Cj5RngCkIgj7BR8ozwBNgo+UZ4ApCII+wUfKM8ATYKPlGeAKQiCPsFHyjPAE2Cj5RngCkIgj7BR8ozwBNgo+UZ4ApCII+wUfKM8ATYKPlGeAKQiCPsFHyjPAE2Cj5RngCkIgj7BR8ozwBNgo+UZ4ApCII+wUfKM8ATYKPlGeAKQiCPsFHyjPAE2Cj5RngCkIgj7BR8ozwBNgo+UZ4ApCII+wUfKM8ATYKPlGeAKQiCPsFHyjPAE2Cj5RngCkIgyuPxRwyBsUYAyjQADvd8EXvpH71vyD7nIgv6D3UfyN+0KQo9B7qP5G/aFIQEREBEXKWeKHWR4C0ruU0R3VTpDMRrw6oqubGGDSJl/xOir5q6om9p/0Gi4WX8SYlnaie6fx6p6MaurnZeTVsEHtSa/BflJVNqgXNbaxss4rnBvZd+f8AoFS6Z12/m5cW5jSjf3q3u2KaKNfFZoiL1qoIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiIMx0j9635B9zkTpH71vyD7nIgv6H3UfyN/kFIUeg91H8jftC7Pa52jXWWJnSAc9rNXOUKbFYI9Gdo/h6rqaGF2sl3H8Sf5Lqynhj9iMD6KhejMubUTFEffmf5CSOyOd1TJW1tRpGwgfgP8AVchh1XLq5n1JWgsPgi5tfQIvT3ZF2qr9QljI7fljRTMwaQ+3KB9F3Zg8I9pxKskVq10HBt8Ua+e7Sci5Piisw+lZwiH11/mpDWNZo0WXpF0rWPatfTpiPKEU1TPMiIimYEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREGY6R+9b8g+5yJ0j9635B9zkQX9B7qP5G/aFBxfpHh2CFsda9wLwSLNJ0HHgp1B7qP5G/aFgP6S/ewfI7+YQaD+v+A/tn/wCG5dqTprgta9tNFM7M82F2EC54C6+YYRhNRjUmyUpaHWLu0bCwtfhf4q+H9HmNDUSxfnnd6INnXdMcJw6R1JVOeHMOo6s/mCD3hScI6R4bjZdHRSklgBILSND3i/H/APFlul+BVc9PHidQ0GaFuWUt1Dm/8Xdw4/UrH4Jij8HnZWs4NNnD4tPtD938bIPs1fXU+Gxuq6p9ms4n+AAHeVQ/1/wH9s//AA3LOdPsdZWlmHUsl2NAe4jgSR2B9Ab/AFCrOh2Cb4nD5Wfo4rOd8Cf1W/U6/kCg+s08zahrZmtIDgCARY2PC47l0REBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEWKqnR1NbUwVuPyQNYI8jW1AjBvGC6wdp+74q6pcLZJBJFSYzLIJfZmM+YtI0GVzbaXGo/NBdosa3pJUspjRuH+2B3UZe8v4CT8ra34XWow2lkoomU8s7nuaO09ziS495udbX4fgglIshjkjZK5tLU4xJBH1Ga7ZurBd1jh36Xt9dF1rKWHCqaWuZjlS9rg20nWiQi72i8fAa3sTfhdBqkVTinSCkwcxMqI3kzXy5Wgm7QNCL3ucwAsvWFY7S4sXwxxvY+O2aORmVwB4G2uiC0RUdd0opaBzopqOfKw2dKIjkb+blJxPHaPCo2Vs1yyRzWgtF/aBcHd2lh3aoLNFT4d0jpMQk2LqJI32zBsrMpcPi1ea/pNR0LzSiGSRzBd/VR5urB/wCI9yC6RVtTjtDTRMri5xbLbI1rSXPJ1Aa3jdMLxqmxUujjjex7LZo5G5XgHgbfBBZIqnpHiMmGU754YnlxBALG3yEtJD3fBotx/JV/R7Eo6SjNfXzzWBBc6fUklrfdd5jJPZ+qDTIqag6TUddIKQwyRueLtEseXOP7vG651nSqkpJX4fskz3x2JEcea4LQ6414C4veyC9RfjXZgHWtfuPEfms9L0yoY3SRCkmcYXOa8tjBDcpsXEg6N0P46cEGiRQX4xQxwb0dP+iIvm+N+AtxvfSyiUHSajrpBSGGSNzxdoljy5x/d43QXKKirOlVJSSyYfssz3x2JbHHmuC0OuLHgLi97KbSY1QVkO8WVAbHwLnkNym9rOvwN/8ARBYIs70mxNj6Kaqw2tBLS0dZG/gc7LjM06Gx/iuGH4TR1ZDqbpRUSFtiWtqw794A4INSiosOxKKNlZUumkeIJZcwcBduQXLI9dW6aXt9Fyh6Z4dNkJglayQgCV0dmZj+rmvxvppog0SKDieKMwwNe+mkeXGwbGwuK84VjNLi4cYA4Fhs5j25XNPdcILBFmY+nOGyNFQKWfJezpOq7LDf9Yg/yurfEMYo8NjFVPJcOsGhouXk8A0d6CeirMNxymxPOxsMkbowC5krMpAPA/C2nxUSLpbh0rms6uQMe7K2d0ZETjwADv8AsgvkRZ2Xpnh8LpIzTTHqXlj3CO7W2NsxIOjSeHf+CDRIqKn6WYdUyNpmMkAkNmSmO0bz8GuPHX8FLxPGY8MLWOo5pC4XtFGXWA+J0CCyRVtPjlHVQPxSEksjDi5trOGQXc2x71Xw9M8OmyEwStZIQBK6OzMx/VzX43000QaJFBxPFGYYGvfTSPLjYNjYXFeMMxukxVr3xZmmM2ex4yuZ8wQWKLNS9N8MiaZzTzFgNmyCLsvN7EMcSPz1twVniWN02G5A+N73SezFG3M8gcTb4BBZIqunx6jqoZK+MOtCHF7C2z2louQWnvt+K4UHSijxC746aVrAwvMro7MAb7QzX1I/BBdoqSg6T0uIPbDHSTND/ZkdEQx9hfRwv3DvV2gzHSP3rfkH3OROkfvW/IPuciC/oPdR/I37QsB/SX72D5HfzC39B7qP5G/aFgP6S/ewfI7+YQZTCsVqcHk2qkIzWI1FxY2vp9Fd/wBf8d/44/8AD/7qH0Tjw2Soy4rk6vI72zYZri3HvW52ToT/APG8bfVBeYbK7EKeOWpAJljBcLaHM3XT4ar5H0iwd2CTupbdk9ph+LTw+o4L61Q4jhT8tHQ1cZyizWNeDYD4AdwWU/pLa3JA62uZwv8AhYaIPnjGOkIYxtyTYAd5OgC+0dHMGbgkDab9c9p5+Ljx+g4fRfMuh7WurYA5t9SfqGOIX2NBl8exmsop9lhqQxoiz+4dKS7MRbs8BYcVJpek0Zi6+qiOZkDZnhliLOvo0349ngpNfgr6uXbYMRfE7JkOQNN25i79YHW5UKfojTOaIKeskjb1XVOAynO25cLlw43J1HxQfj8elZKI+t7HXFrrstlYIOssCCb69/0UeXpRPMXPjidGzqmPaXRgudnla0OAzeyWnvsQplZg1BSB9fVVDsrXGRwt3dT1RGmtsuv5qMejtPC1rJq6V4kayJvZByNa8SMvlGg7NiSgns6S0zpNmdTSAdY6PrSBkzsBJGhvwB1svWGdIYcUeIGUsjczDI1zwAHsuAHCxJ1v3r93BTusDMTad01tNS8OBb8vaUHBcEqcPqDI6Rxiii6uPO5pJBcHaZRo0AW7WqCeMfp9o3Y6MhxJAddhBIFzo0lw0+IUWXpE6kqJaWop3GNhib1jQLMMg4vJN9XEDQL3T9GYaeZtY2qdZj3yBlm2BkBzXdbMRrpcr1V9HY6uV9S6teGyOjc+IZcrurtkubXAuPig4T9LaYdYynhcXNbJkPZtIY/bsAbgDjra4BsuVN0kqpH08c1C4NliL3usNLZe0NdGC9/jq1dI8GoKKU0u0u/2hsuWLI3QH3hD7ZtM2gJ70p8Ip3PjpRiL3PpWZXXa3txScGO0tazOI1QfrOmNA9rphC/shrg2zSXte4Ma5oB01PA2PBXlJO6pYJnwOYT+o62Ya99rhUsPRSCFhpdqcW3Zl7DAWhjw4DMAC69rElaBAREQEREBERAREQEREBERAREQEREBERBhaiswSkr6s40xhBEWXNEX/wBmM1rA27lpsFxTCK9phwhwyxWu1sZYG5iSLAgcSDwVoiDLvpod6tf1Yvs2a/8Aezlt/wA8ui1CIgy1ZSU9ZibYqqBr27LfK5ocL9a7Wx7126YwxwUEsUMYa0ZLNAsB+kZwAWjRBmcWANXh1x+1+xq9x6Yo63fS/wD2haNEHzGrrH1EU4xHEqkVHbvTNBEYbrxFrZLcTdXeJgGjw0Ef2lN/llbNEGcxUf8AqFCfwm/y1CpcTg6NzVUWJNcOukMjHhhIkDuDQR3jhqtgiDIdJ2uq20mKETRxsJL8nZljD2izu+1ra/mpHRmmw6aR+I0VfUSkNyZ5iSCCQ7skgE2I+l/xWnRBWdIv91qP+k/7SqTEKaafD6SSGIv6kQSOYOLmtYLgDv43+i1yIMfVYlB0lnpY8MY49TIJHyFhAYBxaSe88FNwoDeFcbd0P+WtGiAsx0baDt9xxqZVp0QYGnpp6jC6aWGIv6mXrHMGpc1sslwB38f4KdVYlB0lnpY8MY49TIJHyFhAYBxaSe88FsEQZzCgN4Vxt3Q/5a59FqeGojq4J4WuaaqTsOaCNMhGh04rTogzPS2kpqOgnjpadrASw5WNDRfrGa2Hforqhw+iowH0tIxhcBctYGk/nZTEQYyi/wB3xX/q1H2FeMXAGER2HBkX82rbIgyXSirlhniiqq2WGmLCTJFe5kueySASBa3/AJw59DC0z1hbLI4Xis6X23DK+xd9P4WWrqaymowH1VQ1gJsC9waCfhc966RyMlAkjeCDwINwfyIQYvCGjc8mn6kv83L3VB8EOG4oYi6OBjc4AuQHRtAfb8LLXS1EEOkszRoXakDsi2Z2vcLjX8V6kljiGeR4A0FybC5NgNfiTZBTMxSn6RRT0+HB2sZaJSwtaXOaQACdbhZTDqTDq1seFVmI1gl0a6nuS1hHfYtIDARp8F9EMsYIiLxmIJDb6kCwJt8BcfvC/BUQnMBM3se1qOzpftfDTXVB0WMogDT4rp/a1H2lbGORkoEkbwQ4XDgbgg8CCOIXpBiawAUeGkD+2g+1y9Y5WPbVPgxHEZ4Yg1vVdTcdYSO1ctBub938u/ZOkYwhrngFxsATxNibD46AlekGGwK+wV9y72p/b9r3Q9r+98fxXvFwBhEdhwZF/Nq2YljJMQeMwAJbfUA3sbfDQrztMGUz9e3K2935hlGUkOueAsRYoMv0oq5YZ4oqqtlhpiwkyRXuZLnskgEgWt/5wg9HoXVZxGCCWRxexjWvl0eczJA0uv8An+6y2dNXUlbc0tUx9uOR4db87KQg+cV+N0rsO3T1TxKxrGuZkIyZXtu5x4AG37yrPpHAIaiGvqqmaOExZDLCSCxwObtWB7Jv/BXOJ4BJi7warEXdTcHZw0AEj4u4kE9yu0GQpKSiZSVlbR1Mz+ujfd83E5GOAIuASCDx/BWuE9U2gi62Iub1AuwC5cMmoAHElXAkYSYw8XABLb6gG9iR+Nj+4r0gwmHYlHTTQ0mB1ksjHOs+nkYT1Te8hxAIt8Fu0RBmOkfvW/IPucidI/et+Qfc5EF/Qe6j+Rv2hY3p7hGI4lJC+ipHPDWuBItoSRbitlQe6j+Rv2hSEHxf+quPf8rf/D1T+quO/wDKn/w9V9oRB826G4DitBVNqKqhc1oa4Zja1yNOBV109wytxJkLaKmLy1ziQLaC34rXog+X9Fuj+L0dXFUVNA5rWl13G1h2XD4r6giIMp0kwivrJQaK4bIztuB4OiJfF+9xsq2fCK9zGSVeHvkdJHIcrXW6qokfmDjqLWFhfust6iDFS4DUyMrJqimL5iwNY+/tfoWtfl7tXXXWmwzEYMkM0TnObVMkdN+0YYzqddMp7NvyWwRBg4MBr6eJmyUzmSyU8zZDmtd5LTGHG/HjY9yseijIRLUtgpDG0CIdW62hyuzcCVq1yhp4KYFsELWgm5DWgXJ4k27/AMUGGj6P4uHiJzT1fWdSRf8A9u1/WB/19lejhOJXky0TxJlqOsmzdmcPa7qWt114jS2llvEQYypwCohbFHhtMWuNPKHOvwlcyMC5J9o2IupvReidTSTSsw50LHNiDWutclodn4E95WmRAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERBU4yTG+mnMLnNZI4uyRueQDFI0EhoJtchVksFfHC51LG6NslQXZA12ZsRbY9iMhwu8ZrNN7E/ktSiDI11HXSR2cHyO2SYZurcCS58ZY0g3OawtYm5sVLlgrqV7oIHzOZnpnAlzncZSJgHH9XKASOAB7gtGiCukikNVHKGHKIZAXW0BL4iBf4mx/cVSTYdXPlqOqjcGVEmR51HYbHG4Ob8b9tlx3kfBaxEGOz4jRU5hbDNd1JE2MMa85JGtcHjT2Haj4cFLqaWuldLM2acHaI2tDXvA6pwiEhDeFtXdruIPBaZEGUqaeoY5sczZ3RxVDrOb1jniM0/EOHaIzuIve/clS7FTBDE5soJzkvAkLxZ36FrxEQblp1LtARqtWiClwR1c92esD9YIPaBA6y0nWaHQO4X+ijvppzQTwdQ7M7r7MynMc0khbYcTcHRaJEGYpmVjnyz0pkc7qHNbJLD1ZEgN2NaMrQQbkk20sNVyp4MSdCQamY5pYRbJKx7Bnb1pBe5zi2x1t2RY9y1iIMzK2sga6F7pjEyosXAvMhiMQIs4dotEhtca2uoYnr6iniELpSHOmPW/pXP0kcI2u6og6jvJyiy18kUcwMcrAWnQtIuCPgQV+sYyIBkbAAOAAsAPwCDKxjEgNrdFJn6ujL7NIc7K9xmbYcTY6t/FdmisxB9j17Y3VLv2jCIxTi3wLWF4/f+K0yIM5US10L30rWTHNURFrgHloi/RB4z8ANHXB+JWjREGY6R+9b8g+5yJ0j9635B9zkQRWYxXxARsn0AsBlbwHDuXrfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgb7xHmPK30TfeI8x5W+iIgi1NVNVnrJ33IFr2A0+n5oiIP/9k="" width="692" height="99" border="0"> Please help me
The email client is probably blocking this type of image, or in fact any image by default. I imagine they believe that base64 encoded images present too much of risk in terms of malicious attack.
When designing emails you should expect that images will never be seen, so make good use of alt text and never have important information (e.g. text) in images on emails.
A lot of html emails include a "email looks wrong? view online HERE" link to get around this issue.
If you are worried about server costs for image hosting I would suggest using a service that will send and host resources for you e.g Mailchimp and Campaign Monitor.
These are good resources on the subject:
https://www.campaignmonitor.com/resources/guides/image-blocking-in-email/
http://templates.mailchimp.com/design/images/

Implementing newletter with jsp and gmail issues

I implemented newsletter with Spring3 and jsp.
referencing post link : making newsletter(HTML) with SpringFramework3
Now It works nice except on gmail, outlook.
I found that this issue is famous but there was no clear solution in web.
I am suffered with src attribute of image tag.
Here is a original tag which is working on other mail client(?)
<img style="width:322px;height:196px; display:block;" src="http://localhost:8080/resources/portal/images/virtual/noimg02.jpg">
However, when I send it to gmail, it transferred like :
<img style="width:322px;min-height:196px;display:block" src="https://ci5.googleusercontent.com/proxy/eC8FaWQmdUqkQoquMqW3NKl_u14NwS5bgKPb9_36kgfUc0t9FM8Rm9Q_BDvjN3flSnFJOU_CNW8vn8wjrtB0HNVWVk1i6y9dTIAaNa78zjki7Kl7XNqsKs1ThA=s0-d-e1-ft#http://localhost:8080/resources/portal/images/virtual/noimg02.jpg" class="CToWUd">
sorry for localhost:8080, since we do not prepared ant development servers yet.
How to prevent auto wrapping like that in gmail.
I have already change my Image options of gmail(allow external image link), but it does not work.
Thanks for your answer :D
It found that google do some validation job.
However, in my case, (my dev environment) network allows only internal access, so
it can not show proper image.
I switched network from internal network to wifi, it works fine :D
I hope this could be help to others.

Is it possible to include image in email as attachment using a cid and web server URL?

I am working on an email signature to be sent from Outlook and Outlook web client that will be applied to all individuals in a company using adolsign (a third party tool that generates an email signature based on AD information and an html template).
It needs to contain a logo.
Based on my research, images linked directly from a web server as below cause two problems. 1. They are often blocked by web clients for security reasons and 2. they are unavailable when the user has downloaded an email and opens it offline.
<img src="http://www.myurl.com/myimage" width="142" height="30" >
Embedding the image using SVG or a 64 bit encoded data tag doesn't work in Outlook, so that is not an option.
I believe that using the cid tag to create and reference a hidden attachment is my best option for this particular client, but I'm struggling to get this to work using a url. Using a network file path is not a great option as it won't resolve for users sending emails from the web client. I'd like to use something like this but it doesn't render when I open it in Outlook:
<img src="cid:http://www.myurl.com/myimage" width="142" height="30" >
My hope is to get Outlook to create and reference an attachment in the email that is downloaded from the url when the email is sent.
How do I accomplish this? Is it possible? Please let me know if some of the assumptions I am making are incorrect.