Icon with text link HTML Email

Hi, everyone I have a question. I design html emails for my employer. In some of our newsletters they link to pdfs. I orignally was going to insert an icon image from our server to help notify the end user that the link was a pdf, but I changed my mind since it may take longer to load.

But just recently I heard that you could automagically insert an icon via browser insertion without actually loading the icon from the server using some attribute or element along with the <a href=“”> tag. I’ve tried googling it but I’ve only found basic things such as using css or plain html image tags. The closest thing I found was Attach icons to anything with css But since we are using html email, inline style is about as fancy as we can get.

Has anyone else heard of this or tried this for html emails? If anyone knows anything about this would be a great help. Thanks.

We use acymailing for our newsletters. When we indicate “yes” to include images in the email, the image is sent along with the email, (the image does nto need to be called from the server).

Perhaps reading some of their documentation will give you hints towards a solution: http://www.acyba.com/en/forum/5-how-to/19733-images-included-in-the-newsletter.html#19737

hmm… yeah that won’t work since it requires one to use acymailing to send emails. We send virtually everything from our own mail server at the moment. We are testing the waters with constant contact but for the most part all our emails are sent from our own mail server yet. The email i’m referring to happens to be one sent from our own server.

Inserting an icon from your server shouldn’t slow anything down appreciably unless your readers are connected to the internet by an old cocoa tin and a piece of string … an icon should be under 1KB, so there’s no problem with download speed. What might be a problem is that many email clients don’t automatically show ‘remote content’ (ie images that are not included with the message), so it could look messy if they get an email that has lots of missing images, until they click the “show remote content” option.

Inserting an icon automatically with CSS still has to download the icon from somewhere, and that somewhere is probably your server. There are two ways to do it, one is to set a background image on the link/class and give it a bit of padding, so that the icon shows up to the side of the link text, and the other is to use content:after (generated content) to add an <img> element. Neither of these are likely to work well in more than a handful of email clients. Outlook 2007 certainly won’t render background images, and I would be astonished if it shows generated content. On that basis, manually inserting an icon after relevant links is far and away the most reliable and robust method for email.

In any case, whether you get images to load or not, it’s really handy to have
[link to file…] (PDF, x kb, x pages)
so I can better decide if now is the time to go grab that PDF or if I want to wait til I’m on some better machine.