会社でメールを全社に送るサービスがあるのですが、画像が表示されなくて困ることがありました。

画像のエンコードが必要ということが分かり、手順を以下の通りまとめています。ぜひご活用くださいませ。

１．メール本文を作成する

まず、HTMLのメール本文を作成します。

私の会社では、メール本文をあらかじめ作成して、HTML化することができますが、HTMLにできない場合は、以下のサンプルを参考にしていただくか、他サイトでテキストをHTML化するサービスを用いても良いでしょう。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <p style="margin-left: 52.5pt; text-indent: -52.5pt; line-height: 14.4pt; font-size: 10.5pt; font-family: 'Meiryo UI'; color: black;">＜
      <span lang="EN-US">Summary</span>＞サーベイを開始します。
    </p>
    <p style="margin-left: 52.5pt; text-indent: -52.5pt; line-height: 14.4pt; font-size: 10.5pt; font-family: 'Meiryo UI'; color: black;">
      <span lang="EN-US">To：全社員</span>
    </p>
    <p>
      <img src="https://jinjineer.net/image001.png" width="462" height="133" />
    </p>
    <p style="margin-bottom: 12.0pt; line-height: 14.4pt; font-size: 10.5pt; font-family: 'Meiryo UI'; color: black;">
      <span lang="EN-US">エンゲージメント サーベイ開始に先立ち、実施概要の事前案内を発信いたします。</span>
      <br />以下、ご一読の上、ご回答をよろしくお願いいたします。
      <br />
      <br />------------------------------------------------------------------------------------------------------------
    </p>
    <p style="margin-left: 52.5pt; text-indent: -52.5pt; line-height: 14.4pt; font-size: 10.5pt; font-family: 'Meiryo UI'; color: black;">◆対象者：全社員（派遣・常駐・請負・休職者を除く）</p>

    <p style="margin-left: 52.5pt; text-indent: -52.5pt; line-height: 14.4pt; font-size: 10.5pt; font-family: 'Meiryo UI'; color: black;">◆期間：9月1日~30日（水）23:59</p>

    <p style="line-height: 14.4pt; font-size: 10.5pt; font-family: 'Meiryo UI'; color: black;">◆所要時間：15分-25分程度</p>

    <p style="line-height: 14.4pt; font-size: 10.5pt; font-family: 'Meiryo UI'; color: black;">◆その他留意点
      <br />①情報取扱い：
      <br />プライバシー保護のため、個人の回答結果は本社事務局のみがサーベイ運用のために保有いたします。
    </p>
    <p style="text-indent: -10.5pt; line-height: 14.4pt; margin: 5.0pt 0mm 12.0pt 10.5pt; font-size: 10.5pt; font-family: 'Meiryo UI'; color: black;">②サーベイに関する情報
      <br />HR Webサイト「<a href="https://jinjineer.net/">エンゲージメントサーベイ 特設サイト</a>」をご確認ください。
    </p>
    <p style="line-height: 14.4pt; font-size: 10.5pt; font-family: 'Meiryo UI'; color: black;">【文書責任者】&nbsp;&nbsp;&nbsp;人事部　統括部長
      <br />【問い合わせ先】人事部 人材開発課（
      <a href="mailto:jinjineer@gmail.com">jinjineer@gmail.com</a>）
    </p>
  </body>
</html>

ポイントは、上記<img src=”https://jinjineer.net/image001.png” width=”462″ height=”133″ />の部分です。この.pngのファイル部分を参照することができないので、このファイルをエンコードして参照できるようにしていきます。

２．表示したい画像ファイルをエンコードする

上記の例でいうと、image001.pngファイルを以下にUploadして、Base64へ変換というボタンをクリックします。下部に変換された<img>タグが表示されますので、こちらをコピーしてください。

    Img to base64 data for e-mail      
   
     
                     
           
   
 
 

３．元のHTMLのimgタグを修正する

２．を実行すると、以下のように長ったらしい文字列が表示されます。これを全部コピーします。

１．のHTMLの内、以下の<img>タグ部分を置き換えます。

<img src="https://jinjineer.net/image001.png" width="462" height="133" />

↓置き換え後

<img decoding="async" src="data:image/png;base64,/9j/4AAQSkZJRg ~長すぎるので途中省略~ oA//9k=" />

これでプレビューなどしてみると、画像が表示されるようになります。ご利用くださいませ。