SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Should I Embed Image On Email?

    Hi,

    I am trying to develop an email to include the logo. However I dont know whether it is best to provide an image link to display the image or to embed the image.

    Is there are 'standard' way to do this?

    Embed images appears to be quite difficult.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    It've very easy to embed an image. There are many converters that turn the image into base64 code, which you then paste into your HTML. However, before considering it, be aware of the pitfalls:

    http://www.campaignmonitor.com/blog/...ges-revisited/

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    However, before considering it, be aware of the pitfalls:
    From what that article is saying one pitfall shared by many webmail scripts is that they don't fully comply with the email standards and therefore embedded images may not display there (as compared to linked images which never display anywhere unless the recipient turns off some security).

    For a logo it doesn't really matter if some people don't see it and so embedding it should be perfectly acceptable.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    So do companies such as LinkedIn embed their image.

    I found this site http://webcodertools.com/imagetobase64converter/Create is that what I would to convert an image?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by justlukeyou View Post
    So do companies such as LinkedIn embed their image.
    I doubt it. I don't think I've ever received an email with an embedded image, TBH.

    I found this site http://webcodertools.com/imagetobase64converter/Create is that what I would to convert an image?
    Yep, that's the sort of thing. There are lots of online tools like that. There is also a Firefox add-on that I know of. Or, you can even do it yourself with a simple PHP script:

    PHP Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">

    <title>Experiment</title>
        
    <style media="all">

    </style>
        
    </head>
    <body>

    <?php
    function data_uri($file$mime) {
        
    $contents file_get_contents($file);
        
    $base64 base64_encode($contents);
        return 
    "data:$mime;base64,$base64";
    }
    ?>
     
    <img src="<?php echo data_uri('myimage.png''image/png');
    ?>" alt="An image of something">

    </body>
    </html>
    Just put your image in the same file as that code, and Bob's your uncle.

  6. #6
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Im confused by this tbh.

    So does this code attach the image to the email? How does it read where the image is stored on the website host?

    Code:
    <?php
    function data_uri($file, $mime) {
        $contents = file_get_contents($file);
        $base64 = base64_encode($contents);
        return "data:$mime;base64,$base64";
    }
    ?>
     
    <img src="<?php echo data_uri('myimage.png', 'image/png');
    ?>" alt="An image of something">

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    If you create a page on your site with the above code, and place the image you want encoded in the same folder as the page with the code on it, when you open the page in your browser, the encoded data you need will be displayed on the page. 'myimage.png' is the name of the file and the path to it, so you'll need to change that to the actual file name of your image, but that's the only change you need to make—well, maybe update the alt text too.

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I doubt it. I don't think I've ever received an email with an embedded image, TBH.
    Emails with embedded images are very rare - they really stand out though as they are the only emails that have images in them - all the rest just have blank spaces where the sender wanted the images to appear (and which don't because of security settings).

    If you want to see an example of the difference between embedded and linked images then go to http://www.felgall.com/php2.htm and enter your email address in the form just below the "Calling the Script" heading and you can send yourself a sample email generated by my form2mail script that includes an embedded image. If you view the source of the email you will be able to see how that image is defined in the email.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •