Email Pixel Artを使ってメール画像の表示失敗に備える

[Litmus](https://litmus.com/)のブログを見てたら[「Email Pixel Art: The Rarest and Coolest Defensive Design Tactic」](https://litmus.com/blog/email-pixel-art-the-rarest-and-coolest-defensive-design-tactic)という記事があって面白かったので自分でも少し試してみました。

# Email Pixel Art

画像を埋め込んだメールは受信環境などによって上手く表示されないことがありますが、**Email Pixel Art**はそれを逆手に取った発想で、imgのaltタグを工夫して画像の代わりとなる絵を描くものです。

百聞は一見に如かず、なのでLitmusの他、[Email Monks](https://emailmonks.com/)の「[Top Pixel-Art in Email Design Inspirations of all time](https://emailmonks.com/blog/email-inspirations/pixel-art-in-email-design-inspirations/)」にあった例をお借りします。

## LEGO
https://emailmonks.com/blog/email-inspirations/pixel-art-in-email-design-inspirations/ より
![Pixel-art-in-email-City.jpg](https://qiita-image-store.s3.amazonaws.com/0/47737/35165740-10c8-f21f-7090-32fec989d01b.jpeg)

## McDonalds
https://emailmonks.com/blog/email-inspirations/pixel-art-in-email-design-inspirations/ より
![Html-email-pixel-art-McCafe.jpg](https://qiita-image-store.s3.amazonaws.com/0/47737/13afa762-c88f-e91c-31b9-252f7325b8a4.jpeg)

## PlayStation New Zealand
https://litmus.com/blog/email-pixel-art-the-rarest-and-coolest-defensive-design-tactic より
<img src="https://qiita-image-store.s3.amazonaws.com/0/47737/b58dac4f-c446-0f88-31ab-b4712cd226b7.jpeg" width="70%">

どれもすごいけど、コンボイすごっ！

# 作成方法

[Litmusの記事](https://www.displayblock.com/2015/11/04/create-great-pixel-art-emails/)にも書いてありますが、[こちらの記事](https://www.displayblock.com/2015/11/04/create-great-pixel-art-emails/)が具体例もあってわかりやすかったです。

主な流れは
1. ピクセルで表示する絵をスケッチする
2. 画像を細かくスライスする
3. \<table>タグをたくさん使って実装する

ということで実際にちょっと試してみました。

以下弊社ロゴにある青い部分のマークで試してみました。
![logo_kke.gif](https://qiita-image-store.s3.amazonaws.com/0/47737/4cb2ef9b-ecc0-2943-c1ab-fb150b6139a2.gif)

簡単なデザインなので1は飛ばし、画像をスライスして\<table>タグで並べました。
画像は3つに分割して

画像1 (左)
<img src="https://qiita-image-store.s3.amazonaws.com/0/47737/8d551d7f-c1b7-324a-9c3a-7435ea4093a4.png" width="5%">

画像2 (右上)
<img src="https://qiita-image-store.s3.amazonaws.com/0/47737/61db1f24-0ae0-e822-4e2c-39ded4c7bff8.png" width="7%">

画像3 (右下)
<img src="https://qiita-image-store.s3.amazonaws.com/0/47737/2d6eabc8-b357-0e52-d06d-7119d74f568e.png" width="7%">

メールのbodyはシンプルでポイントはimgタグのstyleを指定して、画像表示に失敗してaltが表示されたときの描画を制御することです。実際にはborder=0にしたりと他に色々細かいstyle設定が必要そうです。

```html
<table>
  <tbody>
    <tr>
      <td width="62" height="180">
        <img src="" style="width: 100%; height: 100%; background-color: #0D248A;" alt="">
      </td>
      <td>
        <table>
          <tbody>
            <tr>
              <td width="113" height="110">
                <img src="" style="width: 100%; height: 100%; background-color: #0D248A;" alt="">
              </td>
            </tr>
            <tr>
              <td width="113" height="68">
                <img src="" style="width: 100%; height: 100%; background-color: #0D248A;" alt="">
              </td>
            </tr>
          </tbodY>
        </table>
      </td>
    </tr>
  </tbody>
</table>
```

SendGridのマーケティングキャンペーン機能使って実装し、画像表示有無を並べてみた結果は以下です。
![2018-01-26_20h31_03.png](https://qiita-image-store.s3.amazonaws.com/0/47737/a9797dee-3b49-88d1-6f77-9b3f4b527aec.png)

ロゴがシンプルすぎてあまりインパクトにですが(^^;画像表示に失敗してもそのままロゴ出せそうですｗ