Litmus 의 블로그를 보면 Email Pixel Art: The Rarest and Coolest Defensive Design Tactic 이라는 기사가 있어서 재미있었기 때문에 스스로도 조금 시도해 보았습니다.

Email Pixel Art

이미지를 포함한 메일은 수신 환경 등에 의해 잘 표시되지 않는 경우가 있습니다만, Email Pixel Art는 그것을 반대로 취한 발상으로, img의 alt 태그를 고안해 이미지의 대신이 되는 그림을 그리는 것입니다.

백문은 보기에 관계없이, 그래서 Litmus 외, Email Monks 의 「 Top Pixel-Art in Email Design Inspirations of all time 」에 있던 예를 빌립니다.

LEGO

htps : // 에마이 l 몬 ks. 코 m/bぉg/에마이 l-인 s 피라치온 s/피ㅇ l-아rt-인-에마이 l-로시 g-인 s 피라치온 s/

McDonalds

htps : // 에마이 l 몬 ks. 코 m/bぉg/에마이 l-인 s 피라치온 s/피ㅇ l-아rt-인-에마이 l-로시 g-인 s 피라치온 s/

PlayStation New Zealand

h tps : // ぃt む s. 이 m / b ぉ g / 어머니 l


아무도 대단하지만, 콤보 굉장!

만드는 방법

Litmus 기사 에도 쓰여져 있습니다만, 이 기사 이 구체적인 예도 있어 알기 쉬웠습니다.

주요 흐름은
1. 픽셀로 표시할 그림을 스케치합니다.
2. 이미지를 미세하게 슬라이스
3. 태그를 많이 사용하여 구현

그래서 실제로 조금 시도해 보았습니다.

이하 당사 로고에 있는 파란 부분의 마크로 시험해 보았습니다.


간단한 디자인이므로 1은 날리고 이미지를 슬라이스하고 태그로 정렬했습니다.
이미지는 3개로 나눠서

이미지 1 (왼쪽)


이미지 2 (오른쪽 위)


이미지 3 (오른쪽 하단)


메일의 body는 간단하고 포인트는 img 태그의 style를 지정해, 이미지 표시에 실패해 alt가 표시되었을 때의 draw를 제어하는 ​​것입니다. 실제로는 border=0으로 하거나 다른 여러가지 세세한 style 설정이 필요할 것 같습니다.

<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의 마케팅 캠페인 기능을 사용하여 구현하고 이미지 표시 유무를 나란히 해본 결과는 다음과 같습니다.


로고가 너무 심플해서 너무 임팩트입니다만(^^; 화상 표시에 실패해도 그대로 로고 낼 수 있을 것 같습니다 w