웹사이트 이미지 크기: 적정 해상도와 용량 기준

규격이 정해져 있고 문서로도 잘 정리된 SNS와 달리, 웹사이트는 레이아웃이 제각각이고 반응형으로 바뀌며 쓰임새도 매우 다양합니다. 홈페이지 배너는 화면 가로를 100% 채우고, 상품 사진은 기기에 따라 400px로 보이기도 800px로 보이기도 하며, 블로그 이미지는 글 칸 안에 들어갑니다.

그래서 "웹사이트 이미지"에 정답인 크기가 하나로 정해져 있지는 않습니다. 다만 쓰임마다 권장 범위는 있고, 이를 아느냐 모르느냐가 빠르고 깔끔한 사이트와 느리고 흐릿한 사이트를 가릅니다.

이미지 크기가 사이트에 영향을 주는 이유

이미지를 최적화하지 않으면 서로 다른 두 가지 문제가 생깁니다.

픽셀이 너무 큰 이미지: 브라우저가 800px로 보여 주려고 4000px 사진을 내려받습니다. 전송된 데이터의 80%가 곧바로 버려지는 셈입니다. 보이는 화질은 그대로인데 사이트만 느려집니다.
용량이 너무 큰 이미지: 크기가 맞더라도 압축하지 않은 사진은 3MB까지 나갑니다. 화면에서 보이는 화질이 똑같은데도 150KB면 될 것을 그렇게 쓰는 것입니다.

두 문제는 해법이 다릅니다. 첫 번째는 크기 조절 (픽셀을 맞추는 일)이 필요하고, 두 번째는 압축 (픽셀은 그대로 두고 용량만 줄이는 일)이 필요합니다. 실제로는 두 가지를 차례로 적용할 때 가장 좋은 결과가 나옵니다.

💡 일반 원칙: 웹에 올리는 이미지의 가로 폭이 1920px 를 넘길 일은 거의 없습니다. Full HD 모니터의 가로 폭이기 때문입니다. 화면을 꽉 채우지 않는 이미지(본문 칸, 상품 목록, 썸네일)라면 기준은 더 내려갑니다. 그 이상은 대역폭만 낭비하고 로딩만 늦춥니다.

기준표 — 이미지 종류별 권장 크기

이미지 종류	권장 크기	적정 용량	형식
배너 / 히어로(전체 폭)	1920 × 600–900 px	100–200 KB	WebP / JPG
데스크톱 배너(고정 폭 레이아웃)	1200–1440 × 400–600 px	80–150 KB	WebP / JPG
모바일 배너	768 × 400–600 px	50–100 KB	WebP / JPG
상품 사진(이커머스)	800–1200 × 800–1200 px	60–150 KB	WebP / JPG
상품 썸네일	300–600 × 300–600 px	20–50 KB	WebP / JPG
블로그·기사 이미지	1200 × 600–800 px	60–120 KB	WebP / JPG
글 목록 썸네일	400–600 × 250–400 px	20–50 KB	WebP / JPG
헤더 로고	가로 200~400px	5–30 KB	SVG / PNG / WebP
인터페이스 아이콘	24–64 px	1–5 KB	SVG
파비콘	16, 32, 180, 192, 512px	각 1~10KB	.ico + PNG
Open Graph(공유 미리보기)	1200 × 630 px	80–150 KB	JPG / WebP
섹션 배경	가로 1920 × 세로 가변	100–300 KB	WebP / JPG
프로필 사진 / 아바타(사이트)	200–400 × 200–400 px	20–50 KB	WebP / JPG / PNG
후기·고객 사진	80–150 × 80–150 px	5–20 KB	WebP / JPG

사이트 유형별 권장 크기

기업 홈페이지와 포트폴리오

기업 홈페이지는 본문 영역의 최대 폭이 대개 960px에서 1440px 사이입니다. 배너나 히어로 이미지는 레이아웃 가로를 100% 채우므로, 요즘 모니터에는 가로 1440~1920px이면 충분합니다. 팀·사무실·서비스 사진 같은 섹션 이미지는 가로 800px을 넘길 일이 거의 없습니다.

메인 배너: 1920 × 700~900px, 200KB 미만
팀 사진: 400~600 × 400~600px, 60KB 미만
서비스·섹션 사진: 800~1200 × 500~700px, 100KB 미만

블로그와 콘텐츠 사이트

블로그의 본문 칸은 가로 760~800px을 넘는 경우가 드뭅니다. 대표 이미지는 1200px이면 어떤 반응형 레이아웃도 낭비 없이 감당하고도 남습니다. 글 목록의 썸네일은 더 작아서 보통 300~500px입니다.

대표 이미지: 1200 × 630px, 100KB 미만
본문 속 이미지: 가로 800~1200px, 각 80KB 미만
목록 썸네일: 400 × 250px, 30KB 미만

이커머스와 온라인 쇼핑몰

이커머스에서 가장 중요한 요소는 상품 사진입니다. 고객을 설득하는 핵심 수단이기 때문입니다. 확대 보기를 제공한다면 그에 맞는 해상도가 필요하지만, 이미지를 한꺼번에 불러오는 목록 페이지의 속도를 해치지 않도록 용량은 눌러 두어야 합니다.

대표 상품 사진(정사각형): 800~1200 × 800~1200px, WebP 기준 80~150KB
추가 상품 사진: 대표 사진과 같은 크기
상품 목록 썸네일: 300~500 × 300~500px, 20~50KB
카테고리·기획전 배너: 1440 × 400~600px, 80~150KB

🛍️ 이커머스라면: 상품 사진에는 늘 흰색이나 무채색 배경을 쓰세요. 넓고 균일한 색 면은 압축이 잘 되어 용량에도 유리하고, 공급처가 다른 상품들 사이에서도 화면이 통일되며, 장바구니에서 비교하기도 편해집니다.

랜딩 페이지

랜딩 페이지는 단 하나의 전환 행동을 위해 만들어지므로 속도가 결정적입니다. 로딩이 1초 늘어날 때마다 전환율이 7~12% 떨어진다는 조사 결과도 있습니다. 랜딩 페이지의 이미지는 과감하게 최적화해야 합니다.

히어로·배경 이미지: 가로 1440~1920px, 150KB 미만 — 최우선 항목
상품·서비스 사진: 600~800px, 80KB 미만
혜택 아이콘: 가능하면 항상 SVG
후기 사진: 원형 80~120px, 15KB 미만

2배 규칙의 영향(레티나와 HiDPI 화면)

애플의 레티나 화면과 다른 제조사의 HiDPI 화면은 픽셀 밀도가 두 배여서, 일반 모니터보다 1인치에 더 많은 픽셀을 담습니다. 이런 화면에서 이미지가 선명하게 보이려면 표시 영역의 두 배에 해당하는 픽셀이 필요합니다.

예를 들어 레티나 화면에서 가로 400px로 보이는 이미지는 실제로 가로 800px이어야 선명합니다. 400px짜리만 올리면 아이폰과 맥북에서 살짝 흐릿하게 보입니다.

가장 현실적인 해법은 최대 표시 폭의 두 배로 이미지를 준비하되, 용량까지 두 배가 되지 않도록 잘 압축하는 것입니다. WebP로 잘 압축한 800px 이미지는 최적화하지 않은 400px PNG보다 오히려 가벼운 경우가 많습니다.

상황에 맞는 형식 고르기

상황	권장 형식	이유
사진(상품, 배너, 인물)	WebP 손실 압축	같은 화질에서 JPG보다 25~35% 가벼움
헤더 로고	SVG	벡터라 어떤 크기로도 손실이 없고 파일도 가벼움
SVG를 못 쓰는 곳의 로고	투명 배경 PNG	필요한 투명 배경을 그대로 유지
인터페이스 아이콘	SVG	크기 조절이 자유롭고 CSS로 움직일 수 있으며 파일이 매우 작음
글자가 있는 스크린샷	WebP 무손실 또는 PNG	글자가 또렷함. JPG는 글자 주변에 지저분한 자국이 생김
Open Graph·공유 미리보기	JPG 또는 WebP	미리보기 플랫폼과의 호환성이 가장 넓음
투명 배경 이미지	알파 채널이 있는 WebP 또는 PNG	PNG 외에 투명도를 지원하는 유일한 형식

올리기 전에 이미지를 준비하는 방법

웹사이트에 쓸 이미지라면 다음 순서를 권합니다.

쓰일 크기를 정합니다. 이 이미지가 레이아웃에서 차지할 최대 영역은 얼마인가요? 위 기준표를 참고하거나 브라우저에서 요소를 검사해 보세요(F12 → 이미지 자리 선택).
표시 영역의 두 배 크기로 조절합니다. 낭비를 크게 늘리지 않으면서 레티나 화면까지 감당하는 크기입니다. 이미지 크기 조절 도구로 가로 픽셀을 정확히 지정하세요.
WebP로 변환합니다. 사이트나 CMS가 WebP를 지원한다면(요즘 대부분 지원합니다) 올리기 전에 변환하세요. 이미지 변환 도구를 쓰면 금방 끝납니다.
압축합니다. 권장 범위 안으로 용량을 낮추세요. 이미지 압축 도구로 JPG, PNG, WebP를 눈에 띄는 화질 손실 없이 줄일 수 있습니다.
결과를 확인합니다. 압축한 이미지를 열어 원본과 비교해 보세요. 차이가 눈에 띄지 않는다면 잘된 것입니다.

지금 바로 사이트용 이미지를 준비하세요

설치도 가입도 없이 몇 초 만에 사이트 이미지의 크기를 줄이고 압축할 수 있습니다.

이미지 크기 조절 이미지 압축

지금 사이트 이미지의 상태 점검하기

운영 중인 사이트의 이미지가 최적화되어 있는지 확인하려면 다음 도구를 써 보세요.

Google PageSpeed Insights (pagespeed.web.dev): 주소를 분석해 줄일 여지가 있는 이미지를 뽑아 주고, 각각 몇 KB를 아낄 수 있는지 알려 줍니다.
Chrome 개발자 도구 → Network → Img: 요청을 이미지 종류로 걸러 각 파일의 용량을 확인하세요. 용량순으로 정렬하면 무거운 것부터 바로 보입니다.
WebPageTest.org: 워터폴 그래프로 어떤 이미지가 먼저 불러와지고 얼마나 걸리는지 자세히 보여 줍니다.

웹사이트 이미지 크기에서 흔한 실수

카메라 사진을 그대로 올리기: 카메라 사진은 용량이 3~12MB, 가로가 4000~8000px입니다. 크기를 줄이고 압축하지 않은 채 그런 이미지가 필요한 사이트는 없습니다.
사진에 PNG 쓰기: PNG로 저장한 사진은 화질 이득 없이 JPG나 WebP보다 5~10배 무거워집니다. PNG는 투명 배경이 필요하거나 경계가 또렷한 그래픽에만 쓰세요.
모바일용 이미지를 두지 않기: 390px짜리 휴대폰 화면에 1920px 이미지를 내려보내는 것은 순수한 낭비입니다. HTML의 srcset 속성을 쓰면 자동으로 해결됩니다.
Open Graph 이미지를 잊기: 미리보기 이미지를 지정하지 않은 페이지를 카카오톡이나 링크드인에 공유하면, 밋밋한 기본 썸네일이 뜨거나 아예 비어 보입니다. 반드시 메타 태그 og:image 에 1200×630px 이미지를 지정하세요.
로고를 JPG로 저장하기: JPG는 배경을 흰색으로 강제하므로, 색이 있거나 투명한 배경 위에서는 흰 사각형이 드러납니다. 로고는 언제나 SVG나 PNG로 저장하세요.

자주 묻는 질문

사이트가 빠르게 열리려면 이미지 용량은 최대 얼마여야 하나요?

하나의 기준으로 못 박을 수는 없고, 이미지 종류와 쓰임에 따라 달라집니다. 실무 기준을 들자면, 사진이나 배너, 상품 이미지 같은 본문 이미지는 보통 300KB를 넘지 않는 것이 좋습니다. 화면을 꽉 채우는 히어로 배너는 200KB까지 잡을 수 있고, 썸네일이나 글 속 사진은 80KB 아래가 적당합니다. 구글 페이지스피드는 3G 환경에서 2초 안에 열리는 이미지를 "효율적"이라고 보는데, 대부분의 이미지에서 이는 100~200KB 정도에 해당합니다.

이커머스 상품 사진은 어느 크기가 가장 좋나요?

1:1 정사각형의 800×800px 또는 1000×1000px이 이커머스에서 가장 널리 쓰입니다. 상품 페이지에 표시하기에 넉넉하고, 기본 확대 보기에도 대응되며, WebP로 압축하면 80~150KB에 들어갑니다. 100%까지 확대되는 고급 확대 기능을 제공한다면 1200×1200px까지 올려도 좋습니다. 그 이상은 늘어난 용량만큼의 이득을 보기 어렵습니다.

Open Graph 이미지란 무엇이고 왜 설정해야 하나요?

Open Graph는 카카오톡, 페이스북, 링크드인, 텔레그램 등에 링크를 공유했을 때 미리보기에 어떤 이미지가 뜰지 정하는 규약입니다. 이 이미지를 지정해 두지 않으면 플랫폼이 페이지에 있는 아무 이미지나(대개 가장 먼저 찾은 것) 골라 쓰고, 그 결과는 볼품없거나 아예 비어 있기 일쑤입니다. 사이트의 주요 페이지마다 og:image 메타 태그에 1200×630px 이미지를 지정하세요.

이미지마다 모바일용과 데스크톱용을 따로 만들어야 하나요?

대부분의 사이트에서는 손으로 따로 만들 필요가 없습니다. HTML의 srcset 속성으로 여러 버전을 선언해 두면 브라우저가 기기에 맞는 것을 알아서 고릅니다. 워드프레스나 쇼피파이 같은 플랫폼은 이런 변형본을 자동으로 만들어 줍니다. 중요한 것은 원본 이미지가 가장 큰 표시 크기를 감당할 만큼 픽셀을 갖추는 일이며, 보통 배너는 1920px, 본문 이미지는 1200px면 충분합니다.

워드프레스로 만든 사이트인데 이미지 크기를 신경 써야 하나요?

네, 특히 파일을 올리는 시점이 중요합니다. 워드프레스는 작은 크기의 변형본을 자동으로 만들지만 언제나 원본에서 출발합니다. 카메라로 찍은 8MB 사진을 그대로 올리면 변형본은 만들어지되 원본도 서버에 그대로 남고, 변형본의 품질도 원본 해상도에 좌우됩니다. 가장 좋은 방법은 올리기 전에 크기를 줄이고 압축하는 것입니다. WebP로 잘 압축한 1200px 이미지는 카메라 원본보다 좋은 변형본을 만들면서 서버 공간도 훨씬 적게 씁니다.

내 레이아웃에 맞는 이미지 크기는 어떻게 알 수 있나요?

가장 정확한 방법은 크롬에서 요소를 검사하는 것입니다. 이미지가 들어갈 영역에서 마우스 오른쪽 버튼을 눌러 검사를 선택한 뒤, CSS 속성에서 요소의 가로와 세로를 픽셀 단위로 확인하세요. 레티나 화면까지 감안해 여기에 2를 곱하면, 그 레이아웃의 그 자리에 딱 맞는 크기가 나옵니다. 대부분의 경우에는 이 글의 기준표만으로도 출발점으로 충분합니다.