HTML 이메일 모범 사례: 이미지 전용 이메일은 마케팅에 좋지 않습니까?
게시 됨: 2022-11-24성공적인 기업은 브랜드 표준을 강화하는 데 높은 우선순위를 둡니다. 고객과의 관계를 시각적으로 표현한 것이며 항상 동일한 글꼴, 색상, 로고 및 이미지 스타일을 사용하여 관계를 유지합니다.
그렇기 때문에 클라이언트를 위해 이메일 마케팅 전략을 수립하기 시작하면 웹에 안전한 글꼴로 제한되고 이미지에 단어를 쉽게 오버레이할 수 없으며 텍스트의 정확한 모양을 제어할 수 없다는 사실을 깨닫는 것이 매우 혼란스러울 수 있습니다. 패딩이나 여백이 받은편지함에 따라 다르기 때문입니다.
이 때문에 이메일이 항상 원하는 대로 정확하게 표시되도록 이미지 전용 템플릿을 만들고 싶은 유혹을 느낄 수 있습니다. 불행히도 이것은 해결하는 것보다 더 많은 문제를 일으킬 가능성이 있는 근시안적인 전략입니다. 이유(및 대신 수행해야 하는 작업)를 알아보려면 계속 읽으십시오.
이미지 전용 이메일을 피해야 하는 이유
안타깝게도 이미지 전용 이메일의 이점이 단점보다 크지 않습니다. 다음은 이러한 문제를 피해야 하는 몇 가지 이유입니다.
배송 가능성 문제를 일으킬 수 있습니다.
이메일 캠페인을 만들 때 최우선 순위는 항상 배달 가능성입니다. 이미지 전용 이메일은 공격적이거나 기만적인 문구를 감지하기 위해 설치된 텍스트 필터를 우회하기 위해 사기꾼이 사용하는 전술일 수 있기 때문에 스팸 폴더로 바로 전송되는 경우가 많습니다.
이메일의 전체 파일 크기도 배달 가능성에 영향을 미치며, 이 이메일의 acid 기사에서 볼 수 있듯이 이미지 전용 이메일은 HTML 이메일보다 훨씬 큽니다.
로드 속도가 느리거나 전혀 나타나지 않을 수 있습니다.
일부 이메일 클라이언트는 보안상의 이유로 또는 잠재적으로 공격적인 콘텐츠나 맬웨어로부터 사용자를 보호하기 위해 기본적으로 이미지가 꺼져 있을 수 있습니다. 이미지 전용 이메일을 만든 경우 이미지 차단에 대한 이 리트머스 기사에 표시된 예와 같이 깨진 이미지 아이콘의 벽만 볼 수 있습니다.
이미지가 많은 이메일은 또한 이메일을 로드하는 데 걸리는 시간을 크게 증가시켜 사용자 참여에 해로울 수 있습니다. 사람들은 개별 이메일을 읽는 데 평균 10~13초를 소비합니다. 즉, 이미지가 로드되는 동안 지연 시간이 있으면 메시지를 전달해야 하는 이미 좁은 기회가 더욱 줄어들게 됩니다.
그들은 접근성을 손상시킵니다
시각 장애가 있는 사람들은 화면 읽기 장치를 사용하여 이미지만 있는 이메일을 해석하는 데 훨씬 더 어려움을 겪을 것입니다. 이메일의 이미지에는 항상 이메일 콘텐츠와 관련된 설명 대체 텍스트가 있어야 하지만 이메일 텍스트를 완전히 대체하기 위한 것은 아닙니다.
모바일에 최적화되지 않았습니다.
데스크톱용 이미지 전용 이메일을 디자인하면 고객이 모바일 장치에서 이메일을 보기 위해 눈을 찡그릴 것입니다. 반면에 휴대폰에서 쉽게 읽을 수 있도록 디자인하면 컴퓨터 화면에서 만화처럼 커 보일 것입니다.
그들은 HTML 이메일만큼 검색할 수 없습니다
쿠폰이나 예정된 이벤트와 같이 연락처가 나중에 참조하고 싶은 정보가 포함된 이메일을 보내는 경우 모든 텍스트가 이미지 기반이면 받은 편지함에서 메시지를 검색하기가 더 어려워집니다.
이제 이미지 전용 이메일을 작성하면 안 되는 모든 이유를 알게 되었으므로 보기 좋고 효과적인 HTML 이메일을 작성할 때 염두에 두어야 할 몇 가지 모범 사례가 있습니다.
HTML 이메일 작성 모범 사례
이것은 이메일에 이미지가 포함되지 않도록 해야 한다는 것을 의미합니까? 전혀! 대부분의 리소스는 배달 가능성과 최적의 사용자 경험의 최상의 균형을 위해 60/40 텍스트 대 이미지 비율을 제안합니다. 이미지를 표시하거나 표시하지 않고 영향을 미치는 이메일을 작성하기 위해 다음 전략을 시도하십시오.
가능한 한 이미지 크기를 줄이세요
이메일에 이미지를 포함할 수 있고 포함해야 하지만 이메일 템플릿에 추가하기 전에 파일 크기를 최소화해야 합니다.
Photoshop에서 이메일용으로 이미지를 내보내려면 파일 > 내보내기 > 웹용으로 저장을 선택합니다. 사진과 같은 불투명 이미지의 경우 JPEG 파일 형식은 PNG보다 파일 크기가 작습니다. 투명도가 필요한 로고와 같은 일러스트레이션 이미지의 경우 PNG가 이상적인 옵션입니다.
Photoshop에 액세스할 수 없는 경우 tinypng와 같은 무료 온라인 이미지 압축 도구를 사용하여 이미지 크기를 최소로 유지할 수 있습니다.
라이브 텍스트 사용
대부분의 경우 모든 이메일 문구는 커서로 선택하고 화면 읽기 장치로 읽을 수 있는 HTML 텍스트여야 합니다. 웹에 안전한 글꼴의 원래 목록이 가장 안전한 선택이지만 일부 받은 편지함에 글꼴이 표시될 수 있습니다(예: Gmail은 Google 글꼴을 표시함).
언제든지 웹 안전 글꼴과 함께 브랜드 글꼴을 먼저 사용하도록 선택할 수 있습니다. CSS에서 쉼표를 사용하면 가능한 경우 첫 번째 글꼴을 사용하고 가능한 경우 두 번째 글꼴을 사용하고 마지막으로 다른 두 글꼴을 사용할 수 없는 경우 다른 산세리프 글꼴을 사용하도록 받은 편지함에 지시합니다.
<style=”font-family: 'KoHo', Arial, sans-serif”>방탄 버튼 만들기
방탄 버튼은 이미지 대신 HTML을 사용하여 만든 이메일 버튼입니다. 패딩, 테두리 또는 VML(Vector Markup Language)을 비롯한 여러 방법을 사용하여 만들 수 있습니다.
이 방탄 이메일 버튼 생성기는 Outlook을 포함한 대부분의 받은 편지함에 아름답게 표시되는 양식화된 버튼을 쉽게 만들 수 있도록 도와줍니다.
최대 효과를 위해 이미지를 Gif로 교체
애니메이션 GIF가 사진보다 파일 크기가 더 작을 수 있다는 사실에 놀랄 수도 있습니다. 그것은 모두 이미지의 복잡성과 프레임 사이에서 얼마나 많은 픽셀이 변경되는지에 달려 있습니다.
이 문서에서는 이메일에 적당한 크기의 gif를 만들기 위한 몇 가지 자세한 전략을 제공합니다. 이러한 팁 중 일부는 다음과 같습니다.
- 전환을 위해 페이드 대신 자르기
- 사진 대신 일러스트 벡터 요소 사용
- 오버레이를 사용하여 색상 팔레트 제한
이메일 상단에 "브라우저에서 보기" 링크 포함
일부 사용자는 기본적으로 이미지가 꺼져 있는 것을 선호하거나 기본 제공 보안 기능이 있는 직장 받은 편지함이 있기 때문에 이 기능을 제어하지 못할 수 있습니다.
그렇기 때문에 이메일 상단에 "브라우저에서 보기" 링크를 포함하여 연락처가 원래 디자인된 대로 이메일을 볼 수 있도록 하는 것이 좋습니다.
이미지 아이콘 대신 텍스트 요소 사용
가능한 경우 이미지 대신 텍스트 기반/CSS 요소를 사용해 보십시오. 예를 들어 화살표 이미지를 만드는 대신 화살표를 포함하는 웹 안전 글꼴이 있는지 확인합니다. "ASCII" 또는 "Unicode" 다음에 키워드를 검색하여 확인할 수 있습니다. 이 차트는 Arial 글꼴 제품군의 일부인 것을 알지 못했을 수 있는 모든 기호를 보여줍니다.
이미지를 선택적 악센트 요소로 만들기
우리가 주목한 최근 트렌드는 이미지를 사용하여 단색 배경과 매끄럽게 혼합되는 이메일입니다. 이는 데스크톱 및 모바일용 HTML 텍스트 및 반응형 디자인을 유지하면서 이미지 전용 이메일의 환상을 제공합니다.
이상적인 글꼴과 레이아웃 옵션이 없을 수도 있지만 잘 디자인된 HTML 이메일은 여전히 인구 통계학적 그룹이나 신체적 능력에 관계없이 모든 후원자에게 도달하는 데 사용할 수 있는 매우 효과적인 마케팅 도구입니다.