홈페이지 메인 이미지 크기,
몇 px로 만들어야 할까?
웹즐 템플릿 8종에 실제로 들어간 이미지 크기를 모두 재 봤습니다. 메인 첫 화면은 1920×1080, 서브 페이지 띠는 1920×520, 본문은 1200×900이 가장 많았습니다. 자리별로 정리합니다.
aiartshare · 2026-10-24
한눈에 보는 크기표
왼쪽의 권장 크기로 만들면 대부분의 홈페이지 이미지 자리에 그대로 맞습니다. 오른쪽은 웹즐 템플릿에서 같은 자리에 실제로 쓰인 크기입니다.
| 자리 | 권장 크기 | 비율 | 웹즐 템플릿 실측 |
|---|---|---|---|
| 메인 히어로 | 1920×1080 | 16:9 | 1920×1080 11곳, 1920×980 등 |
| 메인 슬라이드 | 1920×900 | 32:15 | 1920×880~950 |
| 서브 비주얼 | 1920×520 | 약 3.7:1 | 1920×520 18곳, 1920×600 7곳 |
| 본문 가로 | 1600×900 | 16:9 | 1600×900, 1280×720 |
| 본문·갤러리 | 1200×900 | 4:3 | 1200×900 389곳 (가장 많음) |
| 카드 썸네일 | 800×600 | 4:3 | 800×600, 800×500 |
| 정사각 SNS | 1080×1080 | 1:1 | 900×900, 1024×1024 |
| 공유 미리보기 | 1200×630 | 1.91:1 | og-default 1200×630 |
| 세로 카드 | 1600×2000 | 4:5 | 1600×2000 30곳 |
| 모바일 첫 화면 | 1080×1920 | 9:16 | 휴대폰 전체 화면 표준 |
| 사이드 배너 | 600×1200 | 1:2 | 표준 300×600의 2배 |
2026년 10월 웹즐 템플릿 8종 집계 기준입니다.
히어로는 1920×1080, 선명하게 하려면 2880px까지
히어로는 화면 폭을 꽉 채우므로 1920px 폭으로 만듭니다. 고해상도 화면에서 선명하게 보이도록 2배 크기를 함께 두되, 히어로·슬라이드·서브 비주얼은 2880px 폭까지만 둡니다. 그보다 크면 용량만 늘어납니다.
첫 화면 이미지가 무거우면 페이지가 늦게 뜬 것처럼 보입니다. WebP로 저장하고 아래 용량을 넘지 않게 맞추세요.
휴대폰에서는 9:16을 따로 준비하세요
가로 히어로를 휴대폰 화면에 그대로 채우면 가운데만 남아 주인공이 잘리거나, 글자 자리가 사라집니다. 같은 장면을 세로로 다시 만든 이미지를 휴대폰용으로 따로 지정하는 것이 가장 확실합니다.
<picture>를 쓰면 화면 폭에 따라 이미지가 저절로 바뀝니다. 크기를 적어 두면 이미지가 뜨는 동안 화면이 밀리지 않습니다.
<picture>
<source media="(max-width: 767px)"
srcset="main-mobile-hero-1080x1920.webp"
width="1080" height="1920">
<img src="main-hero-1920x1080.webp"
width="1920" height="1080" alt="[장면 설명]">
</picture>글자 얹을 자리를 먼저 보세요
히어로에는 보통 제목과 버튼이 올라갑니다. 크기만큼 중요한 것이 비어 있는 자리입니다. 주인공이 한쪽에 있고 반대쪽이 벽이나 하늘처럼 비어 있어야 글자가 읽힙니다. 밝은 이미지에는 검은 글씨, 어두운 이미지에는 흰 글씨를 씁니다.
함께 그리는다음 10년
함께 성장하는든든한 파트너
파일 이름과 대체 텍스트
파일 이름에 장면과 자리, 크기를 넣어 두면 나중에 바꿀 때 헷갈리지 않습니다. 대체 텍스트에는 이미지에 무엇이 보이는지 한 문장으로 적습니다. 화면 읽기 프로그램과 검색에 모두 쓰입니다.