이메일은 이미지에 가장 적대적인 환경입니다. 클라이언트는 기본적으로 이미지를 차단하고, Outlook은 CSS 배경 이미지를 무시하며, Gmail은 외부 스타일을 제거하고, 모바일 데이터 사용자는 빠르게 로드되는 메시지를 원합니다. 이메일 이미지를 올바르게 처리하려면 제약 조건을 이해해야 합니다 — 단순히 크기를 선택하고 결과를 기대하는 것이 아닙니다.

이메일 너비: 600 px 규칙

이메일을 600 px 너비로 디자인하세요. 이것이 가장 보편적으로 안전한 이메일 너비입니다:

Gmail, Outlook, Apple Mail 모두 데스크탑에서 600 px에서 안정적으로 렌더링합니다
많은 이메일 클라이언트는 브라우저 창 크기에 관계없이 600 px 고정 렌더링 너비를 갖습니다
모바일에서 이메일은 320~375 px의 단일 열로 쌓여야 합니다 — 이미지는 고정 픽셀 너비가 아닌 컨테이너의 100% 너비여야 합니다
피할 것: 700 px보다 넓은 이메일 — 많은 클라이언트에서 잘리고 가로 스크롤이 강제됩니다

일반적인 이메일 요소의 이미지 크기

히어로/헤더 이미지: 600×200 px 또는 600×300 px (히어로 높이에 따라). 이메일 상단의 전체 너비 이미지 — 좁은 화면에서 잘릴 경우를 대비해 핵심 메시지를 중앙에 유지
제품 이미지: 1:1 정사각형의 경우 600×600 px, 또는 600 px 이메일에서 나란히 레이아웃의 경우 300×300 px. 정사각형 이미지가 제품 사진에 가장 다재다능합니다
썸네일 이미지: 기사 또는 제품 그리드에 150×150 px ~ 200×200 px
로고: 가로 로고에 200×50 px, 또는 정사각형 로고에 최대 150×150 px. 파일 크기를 작게 유지 (20 KB 미만) — 모든 이메일에 로드됩니다
푸터 이미지: 소셜 아이콘은 30×30 px

파일 크기 목표

총 이메일 크기는 전달 가능성과 로드 속도에 영향을 미칩니다:

개별 이미지: 가능하면 각 이미지를 100 KB 미만으로 유지. 85% JPEG 품질의 600×300 히어로 이미지는 20~50 KB여야 합니다
총 이메일: 총 1 MB 미만 목표 (HTML + 서버에서 로드된 이미지). Gmail은 원시 HTML 102 KB 이상의 이메일을 자릅니다 — 이미지는 외부적이므로 이 제한에 포함되지 않지만, 느리게 로드되는 이미지는 참여도를 해칩니다
애니메이션 GIF: 이메일용 1 MB 미만으로 유지. 많은 모바일 이메일 앱은 GIF가 너무 크거나 연결이 느린 경우 첫 번째 프레임만 표시합니다

이메일에 최적의 이미지 형식

JPEG: 사진과 그라디언트가 있는 이미지에 사용. 최고의 압축, 모든 이메일 클라이언트에서 범용 지원. 좋은 크기-품질 균형을 위해 80~85% 품질 사용
PNG: 투명 배경이 필요한 로고, 아이콘, 그래픽에 사용. 사진 콘텐츠의 경우 JPEG보다 크므로 투명도가 진짜로 필요한 에셋에만 사용
GIF: 광범위한 이메일 지원을 가진 유일한 애니메이션 형식. Windows용 Outlook 2007~2019는 첫 번째 프레임만 표시합니다 — 정적 이미지로서 의미가 있도록 첫 번째 프레임을 디자인하세요
WebP 및 AVIF: 이메일에 사용하지 마세요. 이러한 현대 형식은 이메일 클라이언트에서 지원이 낮습니다 — Outlook은 이를 완전히 무시합니다. JPEG, PNG, GIF만 사용하세요

레티나 및 고DPI 디스플레이

대부분의 최신 휴대폰과 많은 노트북은 2× 또는 3× 픽셀 밀도 화면을 갖고 있습니다. 이러한 화면에서 선명하게 표시하려면:

표시 너비의 2× 이미지 사용 — 600 px 넓은 이메일 이미지의 경우 1200 px 넓은 이미지를 업로드하고 HTML에서 width="600"으로 600 px 너비로 제한하세요
이미지 파일 크기가 두 배가 되므로 적극적으로 압축하세요. 이메일 표시를 위해 70% 품질의 1200 px JPEG는 여전히 선명하게 보이며 90% 품질의 600 px 이미지와 같은 파일 크기일 수 있습니다

항상 Alt 텍스트 작성

많은 이메일 클라이언트는 사용자가 명시적으로 승인할 때까지 기본적으로 이미지를 차단합니다. Android의 Gmail은 즉시 이미지를 표시하지만 Windows용 Outlook은 기본적으로 차단합니다. 이메일이 alt 텍스트 없이 이미지만 있는 경우 이미지를 차단한 수신자는 빈 이메일을 봅니다.

모든 이미지에 설명적인 alt 텍스트 작성: alt="image1.jpg"가 아닌 alt="여름 세일 - 모든 제품 40% 할인"
정보를 추가하지 않는 장식적인 이미지의 경우 빈 alt 태그 사용: alt=""
제목, CTA, 가격과 같은 핵심 텍스트를 표시하기 위해 이미지를 절대 사용하지 마세요 — 스크린 리더와 텍스트 전용 이메일 클라이언트는 이미지 내 텍스트를 읽을 수 없습니다

이미지 대 텍스트 비율 및 스팸 필터

스팸 필터는 텍스트가 거의 없고 완전히 이미지로만 구성된 이메일에 불이익을 줍니다 — 스팸 캠페인에서 일반적인 패턴입니다. 60/40 규칙을 따르세요:

이메일에서 텍스트 영역 최소 60%, 이미지 영역 최대 40% 목표
단일 이미지 이메일(주변 텍스트가 없는 이미지) 절대 보내지 마세요 — 스팸 필터를 트리거하고 접근성을 완전히 무시할 가능성이 높습니다
가격, 오퍼, CTA에 대한 눈에 보이는 텍스트 포함 — 이미지 콘텐츠와 시각적으로 겹치더라도

단계별: 이메일 마케팅 이미지 준비

히어로 이미지: 1200×600 px에서 디자인하고, 80~85% 품질의 JPEG로 내보내기. 100 KB 미만으로 줄이기 위해 이미지 압축 사용
제품 이미지: 정사각형 레이아웃에는 600×600 px, 그리드 레이아웃에는 300×300 px로크기 조정. 80% 품질의 JPEG
로고: 투명도가 있는 PNG로 내보내기. 200×50 px 또는 적절한 크기로 크기 조정. 20 KB 미만으로 유지
애니메이션 GIF: GIF 압축기를 사용해 1 MB 미만으로. Outlook 사용자를 위해 첫 번째 프레임이 전체 메시지를 전달하는지 확인
테스트: 목록에 보내기 전에 Outlook, Gmail, Apple Mail로 테스트 이메일 발송. 브라우저에서 잘 보이는 이미지가 이메일 클라이언트에서 다르게 렌더링될 수 있습니다

이메일 마케팅 이미지 빠른 참조

이메일 너비: 600 px (700 px보다 넓지 않게)
히어로 이미지: 600×200~300 px, 100 KB 미만, JPEG
제품 이미지: 600×600 px 또는 300×300 px, JPEG
로고: 가로 200×50 px, PNG, 20 KB 미만
애니메이션 GIF: 1 MB 미만; 첫 번째 프레임 = 정적 대체
사용할 형식: JPEG, PNG, GIF만 — WebP, AVIF 제외