이미지 사이즈 가이드: 크기, 용량, 포맷 총정리
이미지 크기를 제대로 맞추는 건 웹 디자인을 훨씬 넘어서는 문제입니다. 지나치게 큰 이미지는 웹페이지가 느려지는 가장 흔한 원인이고, “용량이 너무 크다”는 이유로 업로드가 거부되거나 이메일 첨부파일이 반송되는 원인이기도 합니다. 웹사이트를 만들든, 온라인 양식을 작성하든, 그냥 친구에게 사진을 보내든, 결국 두 가지 질문이 성패를 가릅니다: 크기(치수)가 얼마나 큰가, 그리고 파일이 얼마나 많은 데이터를 차지하는가?
헷갈리는 부분은 “이미지 사이즈”가 사실 두 가지 다른 것을 의미하고, 이 둘을 따로 다뤄야 한다는 점입니다.
치수 vs 파일 용량
**치수(Dimensions)**는 이미지의 픽셀 가로×세로 크기입니다 — 예를 들면 1920 × 1080. 이 값이 흐려 보이지 않고 표시할 수 있는 최대 크기를 결정합니다.
**파일 용량(File size)**은 이미지가 차지하는 데이터의 양입니다 — 예를 들면 450 KB. 이 값이 다운로드에 걸리는 시간을 결정합니다.
둘은 관련은 있지만 같지 않습니다. 1920 × 1080 사진이 압축 방식에 따라 4 MB일 수도, 300 KB일 수도 있습니다. 치수를 줄이면 거의 항상 파일 용량도 줄지만, 치수를 그대로 유지한 채 파일 용량만 크게 줄일 수도 있습니다.
올바른 접근은 먼저 치수를 정하고, 그다음 압축하는 것입니다.
1단계: 올바른 치수 정하기
규칙은 간단합니다: 표시될 크기보다 큰 이미지를 유지하지 마세요. 블로그의 콘텐츠 영역이 800픽셀 폭이라면, 4000픽셀 폭의 사진은 데이터의 90% 이상을 낭비하는 셈입니다. 양식 업로드나 이메일 첨부파일도 같은 논리가 적용됩니다 — 필요 이상으로 크면 눈에 보이는 이득 없이 느리고 무거워질 뿐입니다.
웹사이트와 디지털 용도
| 용도 | 권장 폭 | 참고 |
|---|---|---|
| 전체 폭 히어로 / 배너 | 1920 px | 대형 데스크톱 모니터를 쓰는 방문자가 많다면 2560 px |
| 블로그 본문 이미지 | 1200 px | 대부분의 콘텐츠 영역을 커버하고 레티나 디스플레이 여유도 있음 |
| 제품 사진(이커머스) | 1000~1500 px 정사각형 | 페이지 용량을 늘리지 않으면서 확대해도 충분한 디테일 |
| 블로그 썸네일 / 카드 | 600 px | 실제로 카드가 400 px보다 넓은 경우는 드묾 |
| 아바타 / 프로필 이미지 | 400 px 정사각형 | 실제 표시는 보통 40~150 px |
| 오픈 그래프(소셜 공유 미리보기) | 1200 × 630 px | 페이지가 소셜 플랫폼에 공유될 때 사용됨 |
| 파비콘 | 32 × 32, 16 × 16 px | 디자인을 단순하게 — 이 크기에서는 미세한 디테일이 사라짐 |
플랫폼별 소셜미디어 사이즈(인스타그램, 페이스북, 링크드인 등)는 소셜미디어 이미지 사이즈 가이드를 참고하세요.
문서와 양식용
| 용도 | 권장 크기 | 참고 |
|---|---|---|
| 이메일 첨부파일 | 전체 5 MB 이하 유지 | 대부분의 제공업체는 10~25 MB까지 허용하지만, 작을수록 빠르고 거부될 확률도 낮음 |
| 온라인 양식 / 문서 업로드 | 양식에 명시된 제한을 따를 것 | 크기 명시가 없다면 폭 1200 px, 2 MB 이하면 대부분의 양식을 만족 |
| 신분증·지원서 사진 | 발급 기관의 정확한 요구사항 확인 | 픽셀 치수는 국가와 문서 종류마다 다름 — 일반 가이드가 아니라 항상 공식 출처로 확인할 것 |
레티나 디스플레이에 대한 참고
고밀도 화면은 같은 공간에 더 많은 물리적 픽셀을 담기 때문에, 800px 폭으로 표시되는 이미지가 해당 기기에서는 픽셀 데이터가 충분하지 않으면 약간 흐릿하게 보일 수 있습니다.
흔한 권장 사항은 표시 폭의 약 2배로 이미지를 준비하는 것입니다. 다만 주의하세요: 폭을 2배로 하면 픽셀 수는 대략 4배가 되어, 파일 용량에서 아낀 만큼을 전부 상쇄할 수 있습니다. 실제로는 1.5배~2배 정도면 충분하고, 큰 크기에서 압축을 더 세게 거는 쪽이 작은 크기에서 고화질을 유지하는 것보다 더 나은 결과를 내는 경우가 많습니다.
2단계: 올바른 포맷 고르기
| 포맷 | 적합한 경우 | 피해야 할 경우 |
|---|---|---|
| JPG | 사진, 그라데이션이 있는 이미지 | 투명도가 필요한 경우 |
| PNG | 로고, 아이콘, 스크린샷, 선명한 경계선이나 투명도가 있는 모든 것 | 사진인 경우 — PNG 파일이 훨씬 커짐 |
| WebP | 거의 모든 경우 — 비슷한 화질에서 JPG보다 보통 25~35% 더 작음 | 아주 오래된 소프트웨어와의 최대 호환성이 필요한 경우 |
| GIF | 짧고 단순한 애니메이션만 | 정적인 이미지 — PNG나 WebP가 모든 면에서 더 나음 |
가장 흔하고 손실이 큰 실수는 사진을 PNG로 저장하는 것입니다. 사진을 PNG로 저장하면 같은 사진을 JPG로 저장했을 때보다 5~10배 커질 수 있는데, 화질상 눈에 보이는 이득은 전혀 없습니다.
3단계: 파일 용량 목표 설정하기
치수와 포맷이 정해졌다면, 다음 목표치에 맞춰 압축하세요:
| 이미지 종류 | 목표 파일 용량 |
|---|---|
| 히어로 / 배너 이미지 | 200 KB 이하 |
| 블로그 본문 이미지 | 150 KB 이하 |
| 제품 사진 | 100 KB 이하 |
| 썸네일 | 30 KB 이하 |
| 아이콘 / 로고 | 15 KB 이하 |
유용한 전체 원칙: 가능하다면 페이지 전체 용량을 1 MB 이하로 유지하고, 2 MB를 절대적인 상한선으로 여기세요. 한 페이지가 500 KB짜리 이미지 5개를 불러온다면, 나머지가 아무리 잘 만들어졌어도 그 페이지는 느리게 느껴질 겁니다.
압축을 얼마나 해야 과한 걸까?
JPG의 경우 대부분의 사진에서 품질 75~85 사이가 최적점입니다. 약 70 이하로 내려가면 선명한 경계선 주변과 단색 영역에서 압축 아티팩트가 나타나기 시작합니다 — 보통 하늘에서 가장 먼저 눈에 띕니다.
품질 수치를 추측하기보다는, 이미지를 압축한 다음 원본과 100% 확대해서 비교하세요. 차이를 구별할 수 없다면 더 압축해도 괜찮을 가능성이 높습니다.
흔한 실수
휴대폰이나 카메라에서 바로 업로드하기. 요즘 스마트폰 카메라는 1200만 화소 이상, 종종 4 MB를 넘는 이미지를 만들어냅니다. 웹페이지 근처에 가기 전에 반드시 크기를 조절해야 합니다.
실제 파일이 아니라 HTML이나 CSS로 크기 조절하기. 4000픽셀짜리 이미지에 width="400"을 설정하면 표시는 작게 되지만, 브라우저는 여전히 4 MB 전체를 다운로드합니다. 절약은 파일 자체를 조절할 때만 일어납니다.
이미 압축된 이미지를 반복해서 압축하기. JPG 압축은 손실 압축이라, 저장할 때마다 데이터가 영구적으로 사라집니다. JPG를 저장하고, 다시 압축하고, 또 압축하기를 반복하면 매번 화질이 떨어집니다. 항상 원본에서 작업하세요.
HTML에서 이미지 치수를 생략하기. 크기가 올바른 파일이라도 width와 height 속성을 생략하면 이미지가 로드되면서 페이지가 흔들립니다. 이는 구글 코어 웹 바이탈 지표 중 하나인 누적 레이아웃 이동(CLS) 점수를 떨어뜨립니다.
실용적인 작업 순서
- 먼저 크기를 조절하세요. 실제로 표시될 가장 큰 크기로 이미지를 줄이세요. 크기 조절 도구로 정확한 폭을 지정하거나 퍼센트로 조절할 수 있습니다.
- 그다음 압축하세요. 눈에 띄는 변화 없이 파일 용량을 줄이세요. 압축 도구가 브라우저 안에서 이를 처리합니다.
- 결과를 확인하세요. 위의 목표 용량과 비교하세요. 여전히 초과한다면, 압축을 더 세게 걸기보다 치수를 조금 더 줄여보세요.
이 순서가 중요합니다. 큰 이미지를 먼저 압축한 다음 크기를 조절하면 압축 작업이 낭비됩니다. 크기 조절 자체가 이미지를 다시 인코딩하기 때문입니다.
빠른 참고
- 폭 1200 px가 대부분의 콘텐츠 이미지를 커버함
- 전체 폭 히어로에는 1920 px
- 사진은 JPG, 투명도 있는 그래픽은 PNG, 가능하면 WebP
- 콘텐츠 이미지 하나당 150 KB 이하를 목표로
- 압축하기 전에 먼저 크기 조절
- 소셜 플랫폼별 사이즈는 SNS 이미지 사이즈 가이드 참고