이메일 클라이언트의 이미지 처리

많은 클라이언트는 사용자가 “이미지 표시”를 클릭할 때까지 기본적으로 이미지를 차단합니다. Outlook, Gmail(알 수 없는 발신자의 경우), 그리고 종량제 연결을 사용하는 대부분의 모바일 클라이언트는 대신 자리 표시자를 표시합니다. 이미지가 나타나지 않을 수 있다고 가정하고 설계하십시오.

중요한 문구(제목, CTA 레이블, 가격)를 이미지에 절대 넣지 마십시오. 인라인 CSS로 스타일을 지정한 HTML 텍스트를 사용하면 이미지가 차단되어도 메시지가 전달되고, 스크린 리더가 읽을 수 있으며, 다크 모드의 반전에도 적절히 조정됩니다.

모든 <img>에는 설명이 담긴 alt 속성이 필요합니다. 이미지가 차단되면 자리 표시자 상자에 대체 텍스트가 나타납니다. 잘 작성된 대체 텍스트는 이미지가 전달했을 메시지로 시각적 공백을 채웁니다.

명시적인 크기가 없으면 자리 표시자가 축소되고 이미지가 로드될 때 레이아웃이 이동합니다. 이미지가 실제로 로드되는지와 관계없이 셀이 공간을 확보하도록 두 속성과 이에 대응하는 인라인 스타일을 모두 설정하십시오.

Outlook은 인라인 이미지 아래에 작은 간격을 삽입합니다. 모든 <img>에 style="display:block"을 적용하여 이 간격을 제거하고 모든 클라이언트에서 일관된 세로 리듬을 유지하십시오.

오래된 클라이언트는 <a><img></a> 주위에 파란 테두리를 추가합니다. 이미지 속성에 border="0"을 설정하고 인라인으로 style="border:0"을 지정하여 CTA 안에 포함된 이미지가 깔끔하게 표시되도록 하십시오.

이메일 클라이언트에는 “현재 페이지”라는 개념이 없습니다. 모든 이미지 src는 공개적으로 접근할 수 있는 CDN을 가리키는 절대 https:// URL이어야 합니다. 로컬 경로, 상대 경로, http:// URL(혼합 콘텐츠)은 별다른 표시 없이 로드에 실패합니다.

빠르고 지리적으로 분산된 이미지 호스트를 사용하십시오. 일부 클라이언트는 프록시를 통해 이미지를 가져오며(Gmail 등), 이 프록시는 자체 캐시 계층을 추가합니다. 자사 CDN을 사용하면 느린 원본 서버에서 직접 이미지를 가져오는 문제를 피하고 여러 지역에서 이미지가 일관되게 로드되도록 할 수 있습니다.

주요 배경에는 CSS background-image와 주요 색조에 맞는 bgcolor를 함께 사용하십시오. 이미지가 차단되어도 셀에는 적절한 색상이 표시되고, bgcolor 위에 배치된 텍스트도 읽을 수 있습니다. 이렇게 하면 흰색 블록 위에 흰색 텍스트가 놓이는 문제를 피할 수 있습니다.

이미지를 2배 크기로 render한 다음 width 속성으로 축소하여 고DPI 디스플레이에서 선명하게 보이도록 하십시오. 예를 들어 600x600 원본을 width="300" height="300"으로 표시하면 Retina에서 선명하게 보입니다. 대신 대역폭을 더 사용하므로 WebP에 준하는 압축으로 파일 크기를 작게 유지하십시오.

애니메이션 GIF는 대부분의 클라이언트에서 작동하지만 Outlook에서는 첫 프레임만 표시됩니다. 첫 프레임을 정적 이미지로도 의미가 통하도록 설계하십시오. 나머지 애니메이션이 없어도 제목, CTA 또는 핵심 가치가 읽혀야 합니다.

HTML 이메일에서 중요한 문구(제목, CTA 레이블, 가격)를 이미지에 절대 넣어서는 안 되는 이유는 무엇입니까?

이미지는 메시지 자체가 아니라 향상 기능으로 취급하십시오. 절대 https URL을 사용하고, width/height/display:block/border:0을 설정하며, 의미 있는 대체 텍스트를 작성하고, 빠른 CDN에 호스팅하십시오. 배경에는 bgcolor 대체 방식을 함께 사용하고, Retina용으로 2배 크기를 사용하며, Outlook에서는 GIF가 첫 프레임에서 멈춘다는 점을 기억하십시오.