• http://www.techneurons.com/career/
  • experienced programming consultants for hire !!!

    Contact Now

    ASP.NET Articles

    KB: Embedding Images into emails using System.Net.Mail

    SATURDAY, FEBRUARY 20, 2010

    The most common way to insert the image into the HTML Body of the email using IMG elements with SRC attribute set to an image uploaded on your website or any internet source. This works fine with all online webmails like yahoo, or gmail, or even on your Outlook when you are connected to internet. Due to security issues, such images will get blocked on the webmails or Outlook unless you authorize the image to be displayed. There is another method, which lets you embed images into the email content as an embedded resource, and this image would never gets blocked on webmail or email client.

    When you send out emails from your website, you can make it very professional and attractive by formatting the email with images, like headers, footers, ads, emoticons, and many more. As a website developer or programmer, you should be able to imagine how your customer or visitor feels when he looks at the email with blank placeholders in place of images. He may not choose to approve the image download, and this will prevent your chances of expressing the content to the user. Think of a situation where your email is composed fully with images, and a target customer ignoring the email without looking at the image contents.

    System.Net.Mail provides excellant features of embedding images into the email content as embedded resources. This can be achieved using AlternateView and LinkedResource classes of System.Net.Mail namespace.

    Procedure:

    1. Compose the body of the email in HTML. Wherever you need an image to be embedded, use <img src='cid:IMAGEID' />, where IMAGEID is a unique ID for the image. If can a simple unique word like IMAGE1 or even a GUID string.
    2. Create an AlternateView object from the body HTML, with content type as 'text/html'
    3. Create a LinkedResource object with the image file to embedded. Set the content type appropriately as per the image type. For example, 'image/jpeg' for JPG images.
    4. Set the ContentId for the LinkedResource as the above used IMAGEID
    5. Add the LinkedResource to the LinkedResources collection of the alternate view.
    6. Add the AlternateView object to the AlternateViews collection the Mail
    7. Set the Body property of the email to Nothing.

    Code Snippet

        Public Sub SendMail()
            Dim mail As New MailMessage
            mail.From = New MailAddress(from_email_address)
            mail.To.Add(to_email_address)
            mail.Subject = subject
            mail.IsBodyHtml = True
    
            Dim bodyHTML As String = "<html><body><img src='cid:LOGO_IMAGE' alt='Logo' /><p>Look at the image above</p></body></html>"
            Dim alternateView As AlternateView = AlternateView.CreateAlternateViewFromString(bodyHTML, Nothing, "text/html")
    
            'Create the LinkedResource here
            Dim logo As New LinkedResource(path_to_the_image_file, "image/jpeg")  'Content Type is set as image/jpeg
            logo.ContentId = "LOGO_IMAGE"
            logo.TransferEncoding = Net.Mime.TransferEncoding.Base64
    
            alternateView.LinkedResources.Add(logo)
            mail.AlternateViews.Add(alternateView)
            mail.Body = Nothing
    
            Dim smtp As New SmtpClient
            'Write code to connect to your mail server, or leave blank if this is configured in the web.config
            smtp.Send(mail)
        End Sub
    

    Points to remember:

    1. Some mailing lists, etc. do no allow embedded images to be displayed on the emails, so you have to check this if target email audience can make use of your embedded content.
    2. You have to take extreme care that the images are not over-sized by file size or image dimensioned. This would make the emails get blocked by some mail services, or users not preferring to download large sized emails. As the image is embedded into the email, the file size of embedded image adds up to the email size.

    ConsultSarath - We provide end to end outsourcing solutions for .net programming requirements- you can hire programmer for hourly rates, for monthly commitments, for short term projects, for long term projects, Contact to know our hourly rates for programmer in India. ConsultSarath - We provide end to end outsourcing solutions for php programming requirements- you can hire programmer for hourly rates, for monthly commitments, for short term projects, for long term projects, Contact to know our hourly rates for programmer in India. ConsultSarath - We provide end to end outsourcing solutions for python programming requirements- you can hire programmer for hourly rates, for monthly commitments, for short term projects, for long term projects, Contact to know our hourly rates for programmer in India.

    Other Popular Articles
    We are experts in Cloud Computing Technologies. We can assist you to build high scalable business applications using Amazon Web Services (Amazon EC2, Amazon S3, Amazon SES, SNS, CloudFront), Windows Azure Platforms - Windows Azure and SQL Server Azure, Google App Engine using Python and Django Framework. We are Expert Programming Consultants available at affordable rates per hour. We work on several technologies - .NET, Python, Google App Engine, PHP, Windows Azure, Amazon Web Services ...