メールが届かなくなる！？HTMLメールの画像挿入で注意すべき3つのこと！

HTMLメールに画像を挿入することで、テキストだけでは伝えきれない商品・サービスの魅力やイベントの雰囲気を届けることができます！

しかし、画像を挿入する際には注意すべき点があります。

せっかく作った画像が「表示されない」「メールが届かない」といったトラブルに見舞われることも少なくありません。

この記事では、HTMLメールに画像を挿入する際に気をつけるべき3つのポイントを、初心者の方にも分かりやすく解説します(≧∇≦)

コンビーズのハチミツマガジン

コンビーズではメルマガ運用やマーケティング活動をしているあなたのお役に立つ情報を無料で配信しています。ぜひぜひご登録ください！

いますぐメルマガに登録！

メールアドレス（必須）
お名前・ニックネーム

このサイトはreCAPTCHAとGoogleによって保護されています。
プライバシーポリシーと 利用規約が適用されます。

HTMLメールとは？

HTMLメールとは、Webサイトのように、文字のサイズや色を自由に変更したり、見出しをつけたり、レイアウトを整えたりと、デザイン性の高いメールを作成できるのが大きな特徴です。

弊社のあおいさんが配信してくれているメルマガです！かわいい(≧ω≦)

こちらから読めます！

例えば、バナーや写真を本文中に差し込んだり、クリックできるボタンを設置したりすることもできます。

メールには、HTMLメールの他に「テキストメール」という種類があります。

テキストメールは、その名の通り文字だけで構成されたシンプルなメールで、装飾機能は一切ありません。

こんな感じです！通常のメールと一緒ですね。

そのため、画像挿入をしたい場合は、HTMLメールを選ぶ必要があります。

テキストだけでは伝えきれないサービスの魅力や、イベントの雰囲気を写真付きで届けることで、受け取った人の関心をより強く引きつける効果が期待できます！

HTMLメールの画像挿入で注意すべき3つのこと！

画像が表示されなくても伝わるように設定をする！

メールを送った相手の受信環境によっては、セキュリティの設定などで画像が自動的にブロックされ、表示されないことがあります。

実は、HTMLメールで画像を見せる方法には大きく分けて2種類あり、それぞれに特徴があります。

そしてなんと！多くのメール配信ツールでは、前者の「URLで画像を呼び出す方法」が採用されているんです。

そのため画像が表示されないことが、どうしても起こります。

せっかく作ったバナーや商品画像が表示されなければ、伝えたい内容が全く伝わらないかもしれません。

そうした事態を防ぐために重要なのが「代替テキスト（alt属性）」の設定です。

これは、画像が表示されなかった場合に代わりに表示される説明文のことです。

また、この代替テキストは、画面の情報を音声で読み上げるソフトを使っている視覚に障がいのある方へ、画像の内容を伝えるという大切な役割も担っています。

設定は意外と簡単で、例えばGmailでは挿入した画像をクリックすると「代替テキストを編集」というメニューが出てきます。

ツールによって代替テキストメニューの名称は少し異なりますが、一般的には以下の手順で見つけられます。

このように、特別な拡張機能などを追加しなくても、簡単に設定できるようになっている場合がほとんどです。

もしHTMLソースコードに直接代替テキストを書き込む場合は、以下のコードを追加してください！

代替テキスト（alt属性）には何を書いたらいい？

代替テキストを書くコツは、簡潔かつ具体的に、その画像が何を伝えたいのかを分かりやすく説明することです。

そうはいっても、具体的にどう書いたらいいのよ？

そんな声が聞こえてきそうなので、良い例と悪い例を書いてみました！ε＝┏(·ω·)┛

・ECサイトの場合

・セミナーメルマガ

参考になれば嬉しいです！

画像のファイルサイズを小さくする！

メールに挿入する画像のファイルサイズが大きいと、いくつかの問題を引き起こす可能性があります。

まず、受信者がメールを開いたときに、画像の読み込みに時間がかかってしまいます。

表示が遅いとストレスを感じ、内容を見る前にメールを閉じてしまうかもしれません。

また、スマホで閲覧する場合、大きな画像のダウンロードは通信量を消費させてしまうため、相手によっては迷惑だと感じられることもあります。

さらに深刻なのが、メールが相手に届かなくなるケースです！

Gmailや会社のメールサーバーなど、メールを送受信するシステムには、1通あたりに扱えるデータの最大サイズが決められています。

挿入した画像のファイルサイズが大きすぎて、この上限を超えてしまうと、相手のサーバーがメールの受け取りを拒否してしまいます。

そうなると、エラーメッセージも返ってこないまま、ただ「メールが届かない」という事態に陥りかねません。　

こうしたトラブルを避けるため、画像は1つあたり100KB以下、メール全体でも1MB以内を目安にサイズを調整するのがおすすめです。

サイズを小さくするには、専用のツールを使うのが最も簡単で効率的です。

作成後は、実際に自分宛てにテスト配信を行うのを忘れずに！

GmailやOutlook、Yahoo!メールなど主要な環境で表示崩れや読み込み時間を確認しましょう。

おすすめの画像ファイルサイズ圧縮ツール

・tinypng

tinypngのサイトはこちら　

個人的に愛用者が多いと感じる画像圧縮ツールです。

わたしもよく利用しています。|ω·）

画像の圧縮率は画像によって変わりますが、平均で50%前後（30〜75%）画像サイズを小さくすることができます！

しかも、圧縮前の画像と見比べても、画質はほとんど落ちません。嬉しい。

対応している画像形式か確認する！

一部の受信環境では、正しく表示されない画像形式があるって知ってましたか？

私は知りませんでしたΣ(ﾟﾛﾟ;)

ファイル形式とは、ファイル名の最後についている「.png」や「.jpg」といった拡張子のことです。

例えば、Webサイトでよく使われる比較的新しい形式の「WebP」は、残念ながら多くのメールソフトがまだ対応していません。

また、図やイラストで使われる「SVG」も、GmailやOutlookでは表示されないことがあります。

動きをつけられる「アニメーションGIF」は多くの環境で見られますが、Outlookの一部バージョンでは最初の1コマしか表示されないため注意が必要です。

HTMLメールで安心して使える画像形式は「JPG」と「PNG」の2種類だと覚えておきましょう。

この2つにはそれぞれ得意なことがあります。

目的に合わせてこの2つの形式を使い分けるのがおすすめです！

対応していない画像形式だった時の対処法

もし、メールで使いたい画像が推奨されているPNGやJPG以外の形式だったとしても、心配ありません(*>ω<)b

そんな時は、ファイル形式を変換できるツールを使えば解決できます。

例えば、SVG形式の画像をPNG形式にしたい場合は「SVG PNG 変換」といったキーワードで検索すると、無料で利用できるオンラインツールがたくさん見つかります。

まとめ

ここまで解説してきた

という3つのポイントをしっかり押さえることで「画像が表示されない」「メールが届かない」といったトラブルを防ぐことができます！

これらの準備を整え、安心して情報を届けられる、効果的なメール配信を目指していきましょう(  •̀ᴗ•́  )

AIプロンプトを無料プレゼント！

コンビーズメールライト

まさかの月額3,300円〜。業界最安クラスなのに、安心のメール配信サービス

当方がご提供しているコンビーズメールライトは業界最安クラス月額3,300円〜のシンプルで使いやすいメール配信サービス。クレジットカード情報不要で開始できる無料トライアルもご用意しております。

初めてでも、使い方は無限大。大規模ビジネスはもちろんのこと、個人事業やサークル運営にも幅広く活用できます。

とにかくシンプルで使いやすく、安定してお客様に届きやすい。

だから初心者の方でも安心して使い始めることができます。

この記事を書いた人

宇都宮凛奈

ライターとしてまだまだ成長中。いろんなデザインを見るのが好き。空と海の写真を撮るのが趣味。

この記事の監修

川上サトシ

合同会社ぎあはーと 代表

Webマーケター。
ヴァイオリニストとして活動していた20代の頃、Webマーケティングの重要性を痛感。骨董品のEC管理や食べログの営業を経て、Webコンサル会社のマーケティング担当となる。引っ越し企業のサイトをSEO施策により【半年で1万PVから20万PVまで成長させる】、上場アパレル企業の【売上を1年で3倍にする】など数多くの実績を残して会社設立。専門はSEOと広告運用。ルリニコクのヴァイオリニストとしても活動中。