이메일 헤더 이미지 사이즈 완벽 가이드 — 모바일 잘림 방지 체크리스트

대부분의 이메일 유형에서 헤더 이미지는 가로 600px × 세로 150–200px가 권장됩니다. 브랜드 중심의 비주얼 캠페인이라면 세로를 최대 250px까지 늘릴 수 있습니다. 템플릿 전체 너비는 600px가 10년 이상 업계 표준으로 자리 잡았으며, Gmail·Outlook·Yahoo·Apple Mail 등 주요 클라이언트와 모바일 기기에서 가로 스크롤 없이 깔끔하게 렌더링됩니다. 700px를 초과하면 구형 Outlook 및 소형 모바일 화면에서 가로 스크롤이 발생할 위험이 높아집니다.

모바일 세로 화면 기준 최소 너비는 320px이며, 480px까지 허용되지만 가로 방향 강제 전환으로 참여율이 떨어질 수 있습니다. 안전 영역 확보를 위해 로고·핵심 텍스트 등 중요 요소는 이미지 가장자리에서 최소 20–30px 안쪽에 배치하고, 세로 방향으로는 전체 높이의 상단 70% 이내에 집중시키는 것이 좋습니다. 또한 핵심 정보(프로모션 코드, 마감 일정 등)는 이미지 안에 넣지 말고 HTML 텍스트로 처리해야 이미지 차단 환경에서도 내용이 전달됩니다.

레티나 대응의 핵심은 이미지 에셋을 1,200px 너비로 제작한 뒤 이메일 HTML에서 표시 너비를 600px로 지정하는 것입니다. 이렇게 하면 2배 해상도(2×) 화면에서도 선명하게 렌더링됩니다. 이 규칙은 이미지 에셋에만 적용되며, 템플릿 컨테이너 자체의 너비를 바꾸는 것이 아닙니다. 즉, `<img width="600">` 속성을 유지하면서 실제 파일 해상도만 2배로 높이면 됩니다.

헤더 이미지 파일 크기는 이상적으로 100KB 미만, 최대 200KB 이하를 유지하는 것이 좋습니다. 용량이 크면 로딩 속도가 느려져 모바일 환경에서 특히 불리합니다. GIF를 사용하는 경우 500KB 미만을 권장하며 최대 1MB를 넘지 않아야 합니다. 또한 HTML 이메일 전체 파일 크기가 102KB를 초과하면 Gmail이 이메일 본문을 자동으로 잘라내므로, HTML 파일 자체는 75KB 이하로 유지하는 것이 안전합니다.

용도에 따라 다릅니다. 사진 이미지 기반 헤더에는 압축 효율이 높은 JPEG가 적합하고, 로고·텍스트 오버레이·투명 배경이 포함된 헤더에는 PNG를 사용해야 선명도와 투명도가 유지됩니다. 파일 용량 목표(200KB 이하)를 충족하는 범위 내에서 각 형식의 화질 설정을 조정하세요.

이미지 내 텍스트는 모바일에서 이미지가 축소될 때 가독성이 급격히 떨어집니다. 핵심 메시지는 가능하면 HTML 텍스트로 분리하고, 불가피하게 이미지에 텍스트를 넣는다면 ① 이미지 가장자리에서 20–30px 이상 여백 확보, ② 충분한 폰트 크기(모바일 기준 최소 14px 이상 권장), ③ 배경과 대비가 높은 색상 조합을 사용하세요. 또한 Outlook을 포함한 많은 클라이언트가 이미지를 기본 차단하므로, 헤더 이미지에는 반드시 내용을 설명하는 alt 텍스트를 추가해야 이미지가 표시되지 않는 환경에서도 메시지가 전달됩니다.

네, 클라이언트별로 차이가 있습니다. 특히 Outlook(Windows)은 Word 렌더링 엔진을 사용하기 때문에 비표준 너비에서 예측 불가능한 동작이 발생할 수 있으며, Outlook 사용자가 많은 경우 반드시 600–640px를 유지해야 합니다. Gmail은 HTML 파일이 102KB를 초과하면 본문을 클리핑합니다. 네이버 메일·다음 메일 앱 등 국내 클라이언트와 삼성 갤럭시 기본 이메일 앱, iPhone Mail 앱은 각각 이미지 스케일링 방식이 다를 수 있으므로, 발송 전 실제 기기 또는 이메일 미리보기 도구로 반드시 렌더링을 검증하는 것이 중요합니다.

발송 전 아래 항목을 순서대로 확인하세요. ① 너비 규격 — 이미지 가로 600px (최대 640px) 준수 ② 높이 규격 — 헤더 세로 150–200px (브랜드 캠페인 최대 250px) ③ 레티나 대응 — 실제 파일 1,200px 제작 후 HTML 표시 너비 600px 지정 ④ 파일 용량 — 100KB 미만 권장, 최대 200KB 이하 ⑤ 파일 형식 — 사진은 JPEG, 로고·투명 배경은 PNG ⑥ 안전 영역 — 중요 요소가 가장자리에서 20–30px 이상 안쪽에 위치 ⑦ alt 텍스트 — 헤더 내용을 설명하는 alt 속성 추가 ⑧ 핵심 정보 분리 — 프로모션 코드·마감일 등은 HTML 텍스트로 처리 ⑨ HTML 파일 크기 — 전체 이메일 HTML 75KB 이하 (Gmail 클리핑 방지) ⑩ 멀티 클라이언트 미리보기 — 모바일(세로/가로)·데스크톱·Outlook 등 실제 렌더링 확인

헤더 높이가 과도하게 크면 수신자가 스크롤하기 전에 볼 수 있는 '폴드 위(above the fold)' 영역을 헤더가 독점하게 됩니다. 권장 기준은 로고와 내비게이션 바를 포함해 100–150px(최대 200px)입니다. 중요한 콘텐츠는 세로 기준 상위 300–500px 이내에 배치해야 수신자가 스크롤 없이 핵심 메시지를 확인할 수 있습니다. 헤더가 200px를 초과하면 모바일 화면에서 본문 내용이 거의 보이지 않아 이탈률이 높아질 수 있습니다.