홈페이지 이미지 규격 — 폭·용량·형식

홈페이지 이미지는 세 가지만 정하면 됩니다 — 자리마다 가로 폭 · 한 장 용량 목표 · 파일 형식. 폭은 화면에 보이는 크기의 2배로 만들고, 용량은 한 장 200KB 안팎을 목표로 하고, 형식은 사진이면 WEBP 나 JPG 를 씁니다. 이 세 값을 표로 적어 두면 페이지가 늘어나도 이미지 때문에 처음부터 다시 만드는 일이 없습니다.

자리마다 가로 폭을 얼마로 잡나요

자리	화면에 보이는 폭	만들어 둘 폭	형식
첫 화면 배경 사진	화면 전체	1,920~2,400px	WEBP · JPG
본문 안 사진	700~900px	1,400~1,800px	WEBP · JPG
목록 카드 썸네일	300~400px	600~800px	WEBP · JPG
아이콘 · 로고	24~200px	SVG, 없으면 2배 크기	SVG · PNG
인물 사진	80~160px	정사각 320px	WEBP · JPG

대체로 통하는 범위입니다. 홈페이지를 만든 도구에 이미 정해진 폭이 있는 경우가 많으니, 첫 장을 올리기 전에 그 도구의 안내를 한 번 확인하고 이 표를 고쳐 씁니다.

자리마다 폭을 다르게 두는 이유는 하나입니다. 첫 화면 배경은 화면 전체를 채우니 크게 필요하고, 목록 썸네일은 손톱만 하게 보이니 크게 만들 이유가 없습니다. 모든 이미지를 배경 사진 기준으로 만들어 올리면 목록 카드 한 장이 배경만큼 무거워져 목록 전체가 늦게 뜹니다.

왜 보이는 크기의 2배로 만드나요

요즘 화면은 점 하나를 두 개 이상으로 쪼개 그립니다. 폭 800px 자리에 800px 이미지를 넣으면 글자가 없는 사진도 어딘가 무르게 보입니다. 2배로 넣으면 그 자리에서 선명해집니다.

3배 이상은 대체로 의미가 없습니다 — 용량만 늘고 눈에 보이는 차이는 거의 없습니다. 반대로 작은 이미지를 늘려 쓰면 어떤 방법으로도 선명해지지 않습니다. 필요한 크기는 올릴 때가 아니라 만들 때 정해집니다.

크기를 맞출 때는 가로 값 하나만 넣고 비율을 잠가 둡니다. 가로와 세로를 함께 지정하면 사진이 눌리거나 늘어나 사람 얼굴과 제품 모양이 달라집니다. 세로는 가로를 따라오게 두는 것이 기본입니다.

한 장 용량은 어디까지 줄이나요

자리	한 장 목표	넘어가면
첫 화면 배경	300KB 이하	첫 화면이 늦게 뜹니다
본문 사진	200KB 이하	내리다가 빈칸이 보입니다
목록 썸네일	80KB 이하	목록 전체가 한꺼번에 늦어집니다
아이콘	10KB 이하	개수가 많아 합계가 커집니다
한 페이지 합계	2MB 이하	느리다는 말이 나옵니다

합계가 기준입니다. 한 장씩은 가벼워도 스무 장이 모이면 첫 화면이 늦어집니다. 용량은 화질 문제가 아니라 기다리는 시간 문제입니다 — 같은 사진의 200KB 와 2MB 는 화면에서 잘 구분되지 않지만 뜨는 시간은 크게 벌어집니다. 사람은 화질이 조금 낮은 것보다 늦게 뜨는 것을 먼저 알아챕니다.

용량은 어떤 순서로 줄이나요

화질을 가장 덜 깎는 순서가 있습니다. 위에서부터 차례로 하고 목표에 닿으면 멈춥니다.

1. 안 쓰는 이미지를 뺍니다 — 장식으로 넣은 사진 한 장이 본문 사진 다섯 장보다 무거운 경우가 있습니다
2. 폭을 실제 쓰는 크기의 2배로 줄입니다 — 가장 크게 줄고 화질은 그대로입니다
3. 형식을 WEBP 로 바꿉니다 — 같은 화질에서 파일이 작아집니다
4. 품질 값을 80% 로 낮춥니다 — 사진은 눈에 잘 띄지 않습니다
5. 그래도 무거우면 사진을 바꿉니다 — 잔가지나 군중처럼 자잘한 무늬가 많은 사진은 압축이 잘 안 됩니다

4번과 5번을 먼저 하면 화질만 깎이고 용량은 덜 줄어듭니다. 순서를 지키는 것이 요령의 전부입니다.

비율은 왜 통일하나요

목록에 카드가 나란히 놓이면 이미지가 정해진 틀에 맞춰 잘립니다. 비율이 제각각이면 어떤 카드는 제품이 잘리고 어떤 카드는 여백만 보입니다. 자리마다 비율을 하나씩 정해 두면 사진을 찍거나 고를 때부터 그 비율로 담게 됩니다.

자리	정해 둘 비율	만들 크기
목록 카드	4:3 또는 1:1	800 × 600px · 800 × 800px
본문 사진	3:2	1,800 × 1,200px
첫 화면 배경	16:9 안팎	2,400 × 1,350px
인물 사진	1:1	320 × 320px

잘리는 것을 감안해 주요 피사체는 가운데 80% 안에 둡니다. 가장자리에 걸친 글자나 로고는 어느 화면에서든 먼저 잘려 나갑니다. 비율을 정해 두면 사진을 새로 찍을 때도 그 비율로 담게 되어, 나중에 잘라 맞추는 손이 아예 없어집니다.

올리기 전에 무엇을 확인하나요

• 폰에서 한 번 열어 봅니다 — 컴퓨터 화면에서는 무거운 이미지도 빨리 뜹니다
• 대체 텍스트를 적습니다 — 이미지가 안 뜰 때 대신 보이는 글이고, 화면을 읽어 주는 도구가 이 글을 읽습니다. 「사진」 「이미지1」 대신 무엇이 담겼는지 한 줄로 적습니다
• 글자는 이미지에 굽지 않습니다 — 이미지 안의 글자는 확대해도 선명해지지 않고 검색에도 잡히지 않습니다
• 세로로 아주 긴 이미지는 내용 단위로 나눠 올립니다
• 올린 뒤 그 페이지를 다시 열어 봅니다 — 올릴 때 이미지를 자동으로 줄이는 도구가 있어, 만든 크기와 실제로 올라간 크기가 다를 수 있습니다
• 같은 이미지를 여러 페이지에서 쓸 때는 한 파일을 나눠 씁니다 — 같은 그림이 여러 벌 올라가면 합계만 늘어납니다

오늘 할 일

홈페이지 첫 화면을 폰에서 열고 이미지가 다 뜰 때까지 몇 초 걸리는지 세어 봅니다. 3초를 넘으면 그 화면에 있는 이미지의 용량부터 확인하고, 200KB 를 넘는 사진을 위 다섯 단계 순서대로 줄여 다시 올립니다. 이미지 다섯 장이면 40분 안에 끝납니다.