HTMLメールは、本文に画像や動画を挿入したり、テキストの色やサイズを変更できるため、テキストメールと比較して、視覚的に分かりやすく訴求力が高いというメリットがあります。そのため、メルマガ配信やメールマーケティングを実践する企業の多くがHTMLメールを活用しています。

アメリカのHubSpot社が実施した調査では、画像を含めたHTMLメールを好むと回答した人の割合が約65％で、テキストメールを好むと回答した35%より多いことからもHTMLメールの効果の高さが窺えます。

また、HTMLメールで配信することで、どれだけの人がメールを開封したかを計測することができるため、受信者の反応を研究することで、次の施策やキャンペーンを考えることができます。HTMLメールから獲得したデータを元に見込み客のエンゲージメントを高めたり、認知・購買率を高めたりすることがマーケティングにおいてはとても重要です。

訴求力の高いHTMLメールですが、実際に画像をアップロードしてみても送信したメールの中では画像が表示されなかったりと、既存顧客・見込み客に対してキャンペーン情報を発信したり、施策を実行したりする上でつまずきがちなポイントが多くあります。

今回の記事では、HTMLメールに画像を添付する際に、
・画像が表示されない理由
・画像を埋め込む際のポイントと注意点
・効果を高めるHTMLメールの画像サイズ
について徹底解説していきます！

HTMLメールで画像が表示されない理由は？

まず、作成したHTMLメールに画像が表示されない理由を解説します。メルマガで配信するコンテンツを作成したにも関わらず、画像が表示されなかったら効果が半減してしまうため、把握しておくと良いでしょう。実際、メール内に挿入した画像が表示されない場合「メールの作成方法に問題がある」もしくは「メールの受信側に問題がある」といった2つの理由があります。それぞれについて1つずつ解説します。

メールの作成方法に問題がある

まずは、メールを作成する側に問題がある場合です。絶対パスをご存じでしょうか。

絶対パスとは、ファイルを最初から最後まで完全に記述する形式を指します。ファイルを完全に記述し、添付したい画像に特有の画像URLを指定することが画像を表示させるためには必要となってきます。

絶対パスの具体的な例は次のようなものがあります。
http://www.aaaabbbbcccc.com/contents/test01.jpg

HTMLメールの添付画像はメール自体に画像が貼り付けされているのではなく、メールを開封すると画像がアップロード先のサーバーから読み込まれることで、表示される仕組みになっています。

つまり、画像は常に特定のサーバーにアップロードされており、メールが開封される度にダウンロードされています。メールサーバーと画像が置かれたサーバーは別のため、絶対パスで書かないと表示されなくなるという訳です。

他にも、画像が表示されないよくある理由は下記となることが多いため、これから作成する方は注意してみてください。

• サーバー上で画像が削除されている
• 指定されているパス先に画像が存在しない
• 絶対パスに利用不可な文字（全角文字など）が含まれている

メールの受信側に問題がある

上記のとおり絶対パスでHTMLメールを作成したとしても、受信側に問題がある場合も画像は表示されなくなってしまいます。

メールの受信側に問題がある例として、次のようなものがあります。

• 受信側が設定であらかじめ画像非表示の設定をしている
• アクセス制限されている参照元から画像を参照している
• ファイヤーウォールによって画像表示がブロックされている
• メール受信側のメールサーバーのシステムの中で画像非表示の設定がされている

社内でメール配信のテストを行ない、複数のデバイスで見てみることで、送信側に問題があるのか、受信側に問題があるのかが分かるので、確認してみると良いでしょう。

HTMLメールに画像を埋め込む時のポイントと注意点

次にHTMLメールに画像を埋め込むときのポイントと注意点について5つご紹介します。

• 絶対パスで画像URLを指定する
• imgタグの横幅は100%に設定する
• 画像のALT属性を設定する
• HTMLメールの横幅はモバイル用に設定する
• スタンダードな画像の拡張子を使う

それぞれについて説明していきます。

HTMLメールの作り方について詳しく知りたい方は、こちらの記事をまず御覧ください。
→ メルマガ効果UP！初心者でもできるHTMLメール作成＆活用方法

絶対パスで画像URLを指定する

まずは絶対パスで画像URLを指定することです。先ほどもご紹介したように、画像を埋め込む際は必ず絶対パスでの記載が必要です。一般的なWEBサイトとは異なるため、相対パスを使うことはできません。

相対パスとは現在いるファイルから目的となる画像ファイルまでの経路のことをいいます。絶対パスのように全てを記述するわけではないので「https://www.hai2mail.jp/」のようなドメイン部分を省いたものになります。

imgタグの横幅は100%に設定する

HTMLでは表示する画像のサイズをデバイスによって変更させるときは、HTMLタグからコードを入力して調整する必要があります。具体的にはHTMLタグの種類の1つであるimgタグ内で画像サイズの指示をします。

imgタグには「width（横幅）」属性と「height（高さ）」属性があります。これらの数値を変えることで横と縦の幅を調整することができます。

このimgタグの「width（横幅）」属性を100%に設定しておくことで、どのデバイスでも画像は横幅いっぱいに表示されるようになります。しかし、スマホ用デバイスでは良く見えても、PCでみてみると画像が横に引き延ばされて画質が荒くなるデメリットがあることも頭に入れておきましょう。

画像のALT属性を設定する

ALT属性（オルト属性）とは、HTMLで使われているHTML要素が表示できないときに代わりにレンダリング（※）されるテキストを指定することを指します。仮に画像をブロックされていたとしても、代替テキストを設定していれば必ず表示されるようになる、いわば保険のような設定です。

これをなぜ設定しておくべきかというと、「Yahoo!メール」や「Gmail」などのメーラーが初期設定としてHTMLメールの画像を非表示するような設定になっていることがあるためです。仮に画像が非表示になっていたときに、ALT属性が未設定だった場合、どんな画像であるのかが記載されず、ただのエラーと判断されてしまいます。HTMLメールで画像表示できないことによって、メールで訴求が伝わりきらずに機会損失となる可能性があります。

注意点としては、画像ファイル名をそのまま記載することは避けた方が良いと言えます。画像ファイル名がその写真について述べている内容であれば問題ありませんが、「2022/12/15メール用画像」などといった断片的な情報だけでは、第三者にテキストとして表示されたときに何の画像かが分からなくなってしまうからです。

※レンダリングとは、WEBサイトのHTMLファイルをユーザーが見るページに表示することを指します。

HTMLメールの横幅はモバイル用に設定する

HTMLメールの横幅は、レスポンシブルデザインに対応しない場合、モバイル用に設定することでスマートフォンでも見やすくなります。レスポンシブルデザインでないと、PCとスマートフォンで同じ横幅のメールが表示されてしまいます。仮にPC用のデザインを採用していたとすると、スマートフォンでみたときに画像や構成などが、横長のPCに対して縦長のスマホのため物理的にどうしても乱れてしまいます。そのため、横幅は500px前後を意識して、見やすくて分かりやすい構成を心がけましょう。

当たり前のことではありますが、モバイル用に設定することの理由としては、メルマガをスマートフォンで読む人が増えていることも背景としてあります。以前まではPCを使ってメールを閲覧することが一般的だったため、HTMLメールの横幅もとくにPC用で問題ありませんでした。しかし現代ではスマホでもメールを閲覧する割合が増えているため、モバイル用に設定することが一般的になりつつあります。

HTMLメールを外部に送信する前に、一度社内のテスト用のメールアドレスに送信して、スマートフォンでどのように表示することができるのかを確認することをおすすめします。

スタンダードな画像の拡張子を使う

最後は、画像の拡張子についてです。拡張子とはファイル形式を判別するためにファイル名末尾につけられているものです。例えば「.pdf」や「.jpeg」等を指します。メールで使う時は「JPEG」「JPG」「PNG」「GIF」のどれかにする必要があります。これらのファイル形式が、一般的なメールソフトでサポートがされているためです。

「.exe」や「.HEIG」などの拡張子もありますが、これは送信できない拡張子の代表格となります。これはプログラムを動かすための拡張子であり、セキュリティがウイルスと判断することから受信をすることができないのです。

拡張子が一般的ではない場合の解決策として、拡張子の変換があります。「PDF変換」や「JPG変換」で検索すると変換するWEBサービスがありますが、外部サービスになるので外部に公開できない画像などは社内の担当者に相談することをおすすめします。

効果を高めるHTMLメールの画像サイズ

最後に、効果を高めるHTMLメールの画像サイズについては、デバイスにあった画像サイズにすることが大切です。スマホでは横幅600pxほどが最適とされており、PCでは850ppxでの横幅が最適なサイズとなっています。

このどちらもあわせたHTMLメールに画像を添付する場合は、レスポンシブな対応をすると良いでしょう。こういったHTMLメールの画像もコードでの入力は大変ですが、メール配信サービスを使うことでデザインを選んで作成することで簡単に設定ができるため、構成が崩れたりする心配がありません。

効果の出るHTMLメールは、どのデバイスでも見やすいメルマガであることは必要不可欠です。正しくコンテンツ施策の振り返りをするためにも、画像が表示された・されていないなどのトラブルを無くしてスムーズに配信できるようなツールを導入することをおすすめします。

まとめ

いかがでしたでしょうか。今回の記事では、HTMLメールで画像を送信する際の注意点から、効果の出る画像サイズまでお届けしてきました。

HTMLメールに添付したはずの画像が表示されていない問題の原因や、正しく配信するための方法についてご理解いただけたのではないでしょうか。今回の内容をぜひ参考にして、マーケティング施策へと取り入れてみてください。

また、弊社が提供している配配メールでは、レスポンシブ対応により、各端末の画面に応じたサイズで画像を表示したり、HTMLメールも直感的に作成して配信したりできるようになっています。

「HTMLメールで画像を埋め込むことが大変」という方は、ぜひこの機会にメール配信サービスの活用を検討してみてはいかがでしょうか。具体的にどういったことができるのかは、下記バナーより資料をダウンロードしてご確認ください。