電子メールコードの102：画像の操作
公開: 2020-05-01目の前にコードがこぼれるのを見ると、信じられないほど威圧的で、時にはイライラすることもあります。 マーケターからマーケターまで、見た目よりずっと簡単だと約束します。 さらに、電子メールのHTMLをナビゲートできることは、非常に貴重なスキルです。 メールコードの基本シリーズでは、メールコードをより快適に使用するために知っておく必要のあるメールHTMLの基礎について説明します。
前回の投稿では、メールコードをナビゲートして、リンクを更新する方法やコピーをすばやく変更する方法を理解する方法について説明しました。 しかし、画像はどうですか？
画像は、多くの高性能メールのバックボーンです。 しかし、複雑さが増し、さまざまなファイルタイプ、サイズ、アクセシビリティ、および読み込み時間が考慮されるため、最も熟練したマーケティング担当者でさえも圧倒される可能性があります。
この記事では、メールに画像を追加するための最も一般的な方法のいくつかに触れ、基本を確認して、サブスクライバーが優れたエクスペリエンスを体験できるようにします。 画像の詳細をお探しの場合は、次のガイドをご覧ください。
- 電子メールの背景画像への究極のガイド
- 電子メールでのアニメーションGIFのガイド
- HTMLメールでの画像の使用
このガイドで説明されているトピックに簡単に従うことができるので、先に進んでLitmus Builderで電子メールを開いてください。始めましょう！
画像を準備する
メールに画像を追加する前に、画像が正常に設定されていることを確認してください。 まず、使用している画像がメールに適したファイルタイプとサイズであることを確認してください。 ファイルサイズが大きいと読み込み時間が遅くなり、全体的なコンバージョンとエンゲージメントが低下するため、読み込みが速い軽量の画像を使用していることを確認してください。
画像を挿入します
コード内の画像を追加する場所を見つけます。LitmusBuilderを使用している場合は、グリッドビューをオンにして、画像を表示する場所をクリックしてから、コードビューをクリックします。 最適な場所を見つけたら、<img>タグを使用して画像を追加しますが、ここのURLを画像への直接リンクに置き換えます。
直接リンクが何かわからない場合は、ファイル名の末尾に注意してください。ファイル名は、「。png」、「。jpg」、「。gif」などの画像ファイルタイプで終わる必要があります。 フォルダまたはHTMLへのリンクはここでは機能しません。メールに追加する画像を直接指す必要があります。
<img src="img-url.jpg" />それでおしまい！ タグを追加すると、Litmus Builderを使用している場合は、画像がプレビューペインに表示されます。
画像をどこでホストできるか知りたいですか？ ほとんどのESPにはファイルホスティングシステムがあり、画像をアップロードして、電子メールの画像ソースにそれらの公開URLを使用できるため、最初にESPを確認してください。 ESPが画像ファイルホスティングを提供していない場合は、画像ホスティングにAmazonのAWSまたは独自のWebサイトのFTPサーバーを使用することを検討してください。
適切な寸法を見つける
すべてのモニターで見栄えがよく、ピクセル化やぼやけがないように、画像を挿入するスペースの2倍のサイズの画像を使用することをお勧めします。 前の手順で作成した<img>タグに修飾子を追加して、画像の幅と高さを調整します。 次のようになります。
<img src="img-url.jpg" width="400" height="100" />メールに適したものに応じて、幅と高さの値を調整します。 これらの値を試して、変更を加えてから、Builderのプレビューペインをクリックして更新を確認することで、どのように表示されるかを確認できます。
ALTテキストを追加
ALTテキストは画像を説明しているため、メールクライアントで画像が無効になっている場合やスクリーンリーダーに依存している場合は、メールを簡単に読むことができます。 たとえば、20％オフのプロモーションの画像がある場合、そのオファーを説明するALTテキストを追加すると、何らかの理由で画像が表示されなくても、読者にそのオファーを認識させることができます。
<img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />最高のALTテキストは、説明的で簡潔であり、画像と同じ意図を持っています。 送信する前にLitmusチェックリストを介して電子メールを実行すると、欠落しているALTテキストにフラグが付けられるため、簡単にアクセスして更新できます。 これで、開発者に確認する必要もありません。
画像を交換する
その1つの画像に気が変わった？ 2つのオプションがあります。
1.新しい画像を作成するのと同じように、画像を指すURLを新しいものに置き換えることができます。 これにより、すべての寸法、ALTテキスト、または画像のスタイル設定に役立つ可能性のあるその他のものがすべて保持され、画像コンテンツ自体が更新されます。
現在の画像タグを取得し、ファイルパスを探します。
<img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />パスを新しい画像パスに置き換えます。
<img src=”updatedimg-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />2.画像がホストされている場所によっては、まったく同じ名前の新しい画像を同じ場所にアップロードすることもできます。 そうすれば、メールの画像を更新するためにコードに触れる必要はまったくありません。
絵に描いたように完璧なメール
画像を更新および変更する権限が得られたので、その権限を賢く使用してください。 電子メールの画像はすぐにうまくいかない可能性があります。 読み込みに時間がかかる重いファイル、電子メール全体に画像を使用する、または前述のデザインのアクセシビリティは、厄介なサブスクライバーエクスペリエンスを作成する可能性があります。
イメージライブラリを構築する際に覚えておくべきいくつかの簡単なベストプラクティスを次に示します。
- ファイルを軽くて甘くしてください。1MB未満が最適で、小さいほど良いです（Litmusチェックリストはロード時間をチェックするので、すべての画像サイズがわからなくても心配しないでください）。
- 画像が表示されていない場合でもメールを読みやすくアクセスしやすくするために、代替テキストを追加します。
- 画像のみのメールを送信しないでください。メールにライブテキストが含まれていることを確認してください。 画像を使用してメール全体をデザインしたくなるかもしれませんが、画像を無効にしている人にとっては、読み込み時間が長く、エクスペリエンスが低下するため、エンゲージメントとコンバージョンが損なわれる可能性があります。
特定の初心者コードの質問についてサポートが必要ですか？ このシリーズで次に見たいものを教えてください。 質問は基本的すぎません！
_________________________________
メール内の画像の詳細：
- 画像のみのメールを送信すべきではない理由
- 電子メールでのアニメーションGIFのガイド
- HTMLメールの網膜画像を理解する
- PNG、GIF、またはJPEG？ 電子メールに最適な画像形式はどれですか？
- 電子メールのアニメーションGIF：ファイルサイズを小さく保つための10のヒント
- 電子メールの背景画像への究極のガイド
- 電子メールでのアニメーションPNG：GIFの代替？