홈페이지 사진 용량 때문에 화면이 느려진 적 있으신가요? 새 메뉴 사진을 올렸더니 화면이 한참 하얗게 비어 있었다면 사진이 문제일 때가 많습니다.
사진 용량은 줄이는 순서만 알면 5분이면 정리됩니다. 이 글에서는 사진을 올리기 전에 할 일을 5단계로 나눠 알려 드립니다.
홈페이지 사진 용량, 왜 줄여야 하나요?
사진이 무거우면 손님이 화면을 보기도 전에 나가 버리기 때문입니다.
용량은 사진 파일의 무게입니다. 단위는 KB(킬로바이트)와 MB(메가바이트)를 씁니다. 1MB는 약 1,000KB입니다.
비유하면 사진은 택배 상자입니다. 같은 물건도 큰 상자에 담으면 배송이 늦어지죠. 홈페이지도 무거운 사진을 휴대폰까지 실어 나르느라 시간이 걸립니다.
특히 손님 대부분은 휴대폰 데이터로 접속합니다. 와이파이보다 느린 환경이라 사진 무게가 더 크게 느껴집니다.
| 사진 종류 | 흔한 용량 | 홈페이지에 맞는 용량 |
|---|---|---|
| 휴대폰 원본 사진 | 3~5MB | 300~500KB |
| 메인 배너(가로 꽉 찬 사진) | 2~4MB | 500KB 안팎 |
| 본문·상품 사진 | 1~3MB | 200~300KB |
| 로고·아이콘 | 수십~수백KB | 50KB 안팎 |
이 글에 나오는 말을 먼저 정리해 두면 읽기 편합니다.
| 용어 | 쉬운 뜻 | 비유·예시 |
|---|---|---|
| 용량(KB·MB) | 사진 파일의 무게 | 택배 상자의 무게 |
| 픽셀(px) | 화면을 이루는 작은 점 | 모자이크 타일 한 칸 |
| 파일 형식 | 사진을 담는 포장 방식 | 진공 포장과 일반 포장 |
| 디자인 모드 | 화면 위에서 바로 고치는 편집 기능 | 매장 간판을 직접 바꿔 다는 것 |
한 줄 정리: 사진 한 장을 500KB 안쪽으로 맞추는 것이 가장 쉬운 속도 개선입니다.
1단계: 가로 크기부터 줄이면 되나요?
네, 크기를 먼저 줄이는 것이 용량을 가장 많이 줄이는 방법입니다.
사진 크기는 픽셀(px, 화면을 이루는 아주 작은 점)로 셉니다. 요즘 휴대폰 사진은 가로가 4,000px을 넘습니다. 그런데 홈페이지 화면은 넓어도 가로 2,000px 안팎이면 충분합니다.
가로를 절반으로 줄이면 점의 개수는 4분의 1로 줄어듭니다. 그래서 크기만 줄여도 용량이 눈에 띄게 가벼워집니다.
| 사진이 들어갈 자리 | 권장 가로 크기 |
|---|---|
| 메인 배너 | 1,920px |
| 본문 사진 | 1,200px |
| 상품·갤러리 사진 | 1,000px |
| 휴대폰 화면만 보는 사진 | 800px |
PC 사진 편집 프로그램이나 휴대폰 사진 앱의 크기 조절 기능으로 바꾸면 됩니다. 가로만 정하면 세로는 비율에 맞춰 자동으로 바뀝니다.
한 줄 정리: 배너는 1,920px, 나머지 사진은 1,200px 이하로 맞추면 됩니다.
2단계: JPG, PNG, WebP 중 무엇으로 저장할까요?
사진은 JPG나 WebP, 글자가 들어간 그림은 PNG로 저장하세요.
파일 형식은 사진을 담는 포장 방식입니다. 같은 사진이라도 포장 방식에 따라 무게가 달라집니다.
| 형식 | 쉬운 뜻 | 이럴 때 쓰세요 |
|---|---|---|
| JPG | 사진을 살짝 눌러 담는 방식 | 음식·매장·상품 사진 |
| PNG | 선과 글자를 또렷하게 담는 방식 | 로고, 글자가 많은 안내 그림 |
| WebP | JPG보다 더 가볍게 담는 새 방식 | 용량을 더 줄이고 싶은 사진 |
| HEIC | 아이폰 기본 저장 방식 | 홈페이지에는 바로 쓰지 않기 |
아이폰은 사진을 HEIC로 저장하는 경우가 많습니다. 잇다웹 디자인 모드는 JPG·PNG·WEBP·GIF를 받으므로 HEIC는 바꿔서 올려야 합니다. 아이폰 설정의 카메라 메뉴에서 포맷을 「높은 호환성」으로 바꾸면 처음부터 JPG로 찍힙니다.
한 줄 정리: 사진은 JPG, 로고는 PNG, 더 가볍게는 WebP로 기억하세요.
3단계: 캔바에서 만든 이미지는 어떻게 저장하나요?
사진이 중심이면 JPG, 글자와 도형이 중심이면 PNG로 내려받으세요.
캔바는 배너나 안내 그림을 쉽게 만드는 온라인 디자인 도구입니다. 다운로드 버튼을 누르면 파일 형식을 고르는 칸이 나옵니다.
여기서 무심코 PNG를 고르면 사진이 큰 배너는 용량이 몇 MB까지 커집니다. 사진 위에 짧은 문구만 얹은 배너라면 JPG가 훨씬 가볍습니다.
예를 들어, 동네 빵집에서 「가을 신메뉴」 배너를 캔바로 만들었다고 해 볼게요. 빵 사진이 화면 대부분이라면 JPG로 받으세요. 반대로 영업시간 표처럼 글자뿐인 그림이라면 PNG가 더 선명합니다.
- 캔바 디자인 크기를 처음부터 가로 1,920px로 만든다.
- 다운로드에서 파일 형식을 JPG로 고른다.
- 받은 파일의 용량을 확인한다.
- 500KB가 넘으면 크기를 한 번 더 줄인다.
한 줄 정리: 캔바에서는 처음부터 크기를 정하고, 사진 배너는 JPG로 받으세요.
4단계: 줄인 사진은 홈페이지에 어떻게 올리나요?
잇다웹 홈페이지라면 디자인 모드에서 사진을 눌러 바로 바꿀 수 있습니다.
디자인 모드는 홈페이지 화면 위에서 문구와 사진을 직접 고치는 기능입니다. 배너나 섹션 사진 위의 「이미지 교체」를 누르고 내 파일을 고르면 됩니다.
2026년 10월 잇다웹 공식 페이지 기준으로 5MB 이하 JPG·PNG·WEBP·GIF를 올릴 수 있습니다. 5MB는 올릴 수 있는 한계일 뿐입니다. 손님 화면을 생각하면 500KB 안쪽이 좋습니다.
| 방법 | 비용 | 걸리는 시간 |
|---|---|---|
| 디자인 모드로 직접 교체 | 0원 | 저장하면 바로 반영 |
| 이미지·배너 교체 맡기기 | 건당 30,000원 | 당일~1일 |
| 메인 슬라이드 배너 교체 맡기기 | 3장 세트 50,000원 | 1일 |
맡기는 비용은 2026년 10월 홈페이지 유지보수 단가표 기준이며 VAT 포함입니다. 디자인 모드가 어떤 기능인지는 무료 제공 서비스에서 먼저 볼 수 있습니다.
한 줄 정리: 직접 바꾸면 0원, 맡기면 건당 30,000원이라고 보면 됩니다.
5단계: 다 올렸다면 무엇을 확인하나요?
휴대폰 데이터로 내 홈페이지를 열어 첫 화면이 바로 뜨는지 보세요.
PC와 매장 와이파이로만 보면 느린 줄 모릅니다. 손님과 같은 환경에서 확인해야 진짜 속도가 보입니다.
확인할 것은 세 가지입니다.
- 와이파이를 끄고 휴대폰 데이터로 첫 화면이 3초 안에 보이는가
- 배너 사진이 흐리거나 깨져 보이지 않는가
- 사진 속 글자가 휴대폰에서도 읽히는가
사진이 흐리게 보이면 너무 많이 줄인 것입니다. 그 사진만 크기를 조금 키워 다시 올리면 됩니다.
한 줄 정리: 손님처럼 휴대폰 데이터로 열어 봐야 사진 정리가 끝납니다.
실행 체크리스트
오늘 바로 할 수 있는 순서입니다.
- □ 홈페이지 메인 배너 사진의 용량 확인하기
- □ 500KB가 넘는 사진 목록 적어 두기
- □ 배너는 가로 1,920px, 본문은 1,200px로 줄이기
- □ 사진은 JPG나 WebP, 로고는 PNG로 저장하기
- □ 아이폰 카메라 포맷을 「높은 호환성」으로 바꾸기
- □ 휴대폰 데이터로 첫 화면 다시 열어 보기
한 줄 정리: 배너 사진 한 장만 바꿔도 첫 화면 속도가 달라집니다.
자주 묻는 질문
홈페이지 사진 용량은 몇 KB가 적당한가요?
한 장에 500KB 안쪽이면 대부분 충분합니다. 메인 배너는 500KB 안팎, 본문 사진은 200~300KB를 목표로 하세요. 로고처럼 작은 그림은 50KB 안팎이면 됩니다. 사진이 흐려 보이면 그 사진만 조금 키우면 됩니다.
사진 용량을 줄이면 화질이 나빠지지 않나요?
가로 크기를 화면에 맞게 줄이는 정도로는 눈에 띄게 나빠지지 않습니다. 휴대폰 화면은 가로 1,000px 안팎이면 충분히 선명합니다. 다만 같은 사진을 여러 번 줄였다 키우면 흐려집니다. 원본은 따로 보관하고 원본에서 한 번만 줄이세요.
아이폰 HEIC 사진은 홈페이지에 바로 올릴 수 있나요?
잇다웹 디자인 모드에는 바로 올리기 어렵습니다. 2026년 10월 기준 받는 형식은 JPG·PNG·WEBP·GIF입니다. 앞으로 찍을 사진은 카메라 포맷을 「높은 호환성」으로 바꾸면 JPG로 저장됩니다. 이미 찍은 사진은 JPG로 내보내서 올리세요.
WebP로 저장하면 무엇이 좋은가요?
WebP는 같은 화질에서 JPG보다 가볍게 저장되는 경우가 많습니다. 그래서 사진이 많은 갤러리나 상품 페이지에 잘 맞습니다. 잇다웹 디자인 모드도 WEBP 파일을 받습니다. 저장할 프로그램이 없다면 JPG로 올려도 괜찮습니다.
한 줄 정리: 크기 줄이기, 형식 고르기, 휴대폰으로 확인하기 세 가지만 기억하세요.
사진이 많은 홈페이지를 처음부터 가볍게 만들고 싶다면 무료 견적 상담에서 업종과 사진 수를 알려 주세요.
사진: Unsplash (photo-1544633909-3de7702b9602, photo-1543525469-65b61cc2bc06, photo-1758272422305-39a02e94273c)