Home > 웹 칼럼 > 홈페이지에 모든 것

홈페이지에 모든 것

홈페이지가 느린 진짜 이유, 이미지 최적화와 WebP — 고객은 3초 안에 로딩하지 않으면 떠난다. 주식회사 도도컴즈

  • 관리자 (dodo0)
  • 2026-10-06 10:00:00
  • hit20
성능 최적화

홈페이지가 느린 진짜 이유, 이미지 최적화와 WebP

고객은 3초 안에 로딩하지 않으면 떠난다. 대부분의 성능 문제는 이미지에 있습니다. 효과 입증된 최적화 방법을 정리했습니다.

작성 · 주식회사 도도컴즈발행 · 2026년 10월 6일
 
핵심 요약

홈페이지 로딩 속도의 70~80%는 이미지 때문입니다. 원본 이미지를 그대로 업로드하면 수십 MB에 달하는 반면, 적절히 압축하고 WebP 포맷으로 변환하면 용량을 90% 이상 줄일 수 있습니다. 도도컴즈는 2013년부터 200곳 이상 병원·기업의 홈페이지 성능을 개선해 왔으며, 이미지 최적화만으로도 평균 로딩 시간을 2초 이상 단축한 사례를 보유하고 있습니다.

📌 기준 — Google PageSpeed Insights · Core Web Vitals · W3C 웹 표준
홈페이지 이미지 최적화

01이미지 최적화란?

이미지 최적화(Image Optimization)는 웹사이트의 이미지 파일 크기를 줄이면서도 시각 품질을 유지하는 기술입니다. 단순히 "이미지를 작게 자르는 것"이 아니라, 해상도, 파일 포맷, 압축 수준을 체계적으로 관리하는 것입니다.

많은 원장님·대표님들이 "홈페이지가 느려요"라고 호소하지만, 대부분 기술 문제가 아니라 이미지 관리 문제입니다. 카메라나 핸드폰으로 찍은 원본 사진은 2~5MB 수준이고, 이를 10~20장 올리면 페이지 전체가 50~100MB가 됩니다.

최적화 vs 최소화의 차이: 최소화는 품질을 무시하고 크기만 줄이는 것이지만, 최적화는 "허용 범위 내에서 최적의 용량"을 찾는 것입니다. 사람 눈에는 보이지 않지만 파일은 90% 줄어드는 마법입니다.

다음 표는 포맷별 용량과 품질을 비교한 것입니다.

포맷 장점 단점 권장 용도
JPG 호환성 우수 · 용량 작음 무손실 불가 · 반복 저장 시 화질 저하 사진, 의료 이미지
PNG 무손실 · 투명도 지원 용량 큼 · 로딩 느림 로고, 일러스트
WebP 최고 압축률 · 모든 기능 지원 구형 브라우저 미지원 (폴백 필요) 모든 이미지 (권장)
AVIF WebP보다 더 우수한 압축 지원도가 낮음 · 아직 신기술 차세대 표준 (미리 준비)
이런 고민이 있다면
  • 모바일에서 홈페이지가 로딩되는 데 5초 이상 걸립니다
  • Google PageSpeed에서 "성능" 점수가 50점 이하입니다
  • 이미지 많은 페이지(갤러리, 시술 전후)가 특히 느립니다
  • 호스팅 용량이 자꾸 부족해집니다
  • 이미지를 줄이는 방법을 모릅니다
하나 이상 해당한다면, 즉시 이미지 최적화를 시작해야 합니다.

02도도컴즈 소개

주식회사 도도컴즈 제작 12년 · 온라인 마케팅 2013년~

도도컴즈는 2013년부터 병원·기업 홈페이지의 기술적 성능과 검색 엔진 최적화를 동시에 달성해 온 회사입니다. 단순히 "빠른 홈페이지"가 아니라 "환자와 고객이 원하는 정보를 빨리 찾을 수 있는 홈페이지"를 설계합니다. 홈페이지 로딩 속도 개선만으로 문의율 15~30% 증가를 경험한 병원 사례가 다수이며, 이미지 최적화는 도도컴즈가 모든 프로젝트의 기본 원칙입니다.

2013년~ 마케팅제작 200곳+전 과정 전담모든 상담 무료

03이미지 최적화 5단계

이미지 최적화는 단순하지만 단계별로 정확히 해야 효과가 납니다. 다음 5단계를 순서대로 진행하세요.

1
이미지 해상도 리사이징
화면에 필요한 크기만 저장합니다. 예를 들어 1920px 폭의 배너 이미지는 1920x1080을 초과할 필요가 없습니다. 원본 4000x2250인 사진을 웹용 1920x1080으로 리사이징하면 용량은 75% 줄어듭니다.
2
포맷 선택: 최상의 호환성을 위해 WebP 폴백 구조
WebP는 같은 품질일 때 JPG 대비 30~40% 작지만, 구형 브라우저(IE 11 이하, 일부 모바일)에서 미지원입니다. 따라서 "WebP 우선 + JPG 폴백" 구조를 만들어야 합니다. HTML에서 <picture> 태그를 사용하면 자동으로 지원 여부에 따라 파일을 선택합니다.
3
품질 수준 조정
JPG 품질을 100에서 75~85로 낮춰도 인간의 눈으로는 구별할 수 없습니다. Photoshop의 "웹용으로 저장" 기능이나 온라인 도구(TinyJPG, Squoosh)를 사용하면 됩니다. 이 단계만으로 50% 이상 용량이 줄어듭니다.
4
Lazy Loading 적용
페이지에 로드되지 않은 이미지는 아예 다운로드하지 않도록 설정합니다. 사용자가 스크롤해서 이미지가 보일 때만 다운로드합니다. HTML의 loading="lazy" 속성을 추가하면 됩니다.
5
CDN 활용 (선택사항)
전국에서 접속할 때마다 서버에서 이미지를 다시 전송하는 것보다, 이미지 전용 CDN 서비스(Cloudflare, AWS CloudFront)를 사용하면 사용자와 가까운 서버에서 빠르게 전송됩니다.

다음 표는 최적화 전후의 실제 변화 사례입니다.

사항 최적화 전 최적화 후 개선율
페이지 전체 용량 45.3 MB 3.8 MB 91.6% 감소
로딩 시간 (3G) 12.5초 2.1초 83.2% 단축
PageSpeed 점수 28점 84점 +56점
모바일 방문자 이탈률 68% 42% -26%p

04실제 최적화 사례

다양한 병원과 기업이 이미지 최적화로 어떤 성과를 얻었는지 정리했습니다.

정형외과 (고화질 수술 이미지 다수) 원본 사진 80장을 WebP + 90% 품질 압축. 페이지당 25MB → 2.5MB. 검색 순위 상승으로 월 방문자 40% 증가.
피부과 (시술 전후 갤러리) Lazy Loading 적용 + 이미지 리사이징. 모바일 로딩 시간 8초 → 1.5초. 온라인 상담 요청 28% 증가.
한의원 (의료진 사진과 시술 영상) 배너 이미지를 WebP로 변환 + 주요 콘텐츠만 선택적 로딩. 호스팅 비용 월 30만 원 절감 (용량 초과비).
치과 (임플란트 케이스 200건) 모든 사진을 TinyJPG로 일괄 압축. 총 용량 350MB → 32MB. 웹하드 비용 폐지 + 검색 유입 증가.
요양병원 (회원 갤러리) 사용자가 업로드한 이미지 자동 최적화 설정. 관리자 부담 제거 + 홈페이지 안정성 향상.
소상공인 회사 (상품 이미지 300+) WebP 폴백 구조 구축 + Lazy Loading. 평균 로딩 시간 7초 → 0.8초. SEO 점수 70 → 92점.
공통점: 이미지 최적화만으로도 검색 유입, 사용자 체류 시간, 문의율이 동시에 개선되었습니다.
이런 상태라면 점검을 미루지 마십시오
  • Google PageSpeed의 성능 점수가 50점 이하입니다
  • 모바일에서 이미지가 로드되지 않은 상태로 몇 초간 보입니다
  • 홈페이지 이미지가 너무 선명해야 한다고 생각해 원본으로 올립니다
  • 호스팅 업체에서 "용량 초과" 경고를 받습니다
성능 개선은 검색 알고리즘과 사용자 경험 모두에 영향을 줍니다.

05이미지 최적화 체크리스트

지금 바로 시작할 수 있는 실행 항목들입니다.

  • 1단계 — 현 상태 진단: Google PageSpeed Insights(pagespeed.web.dev)에서 자신의 홈페이지를 검색하고 "성능" 점수를 확인합니다.
  • 2단계 — 이미지 목록화: 홈페이지에 올려진 모든 이미지를 스크린샷으로 캡처하고, 각각의 파일 크기를 확인합니다 (브라우저 개발자도구 > Network 탭).
  • 3단계 — 리사이징 도구 사용: ImageMagick, GraphicsMagick 같은 무료 도구나 온라인 리사이저(Resize Image, PIXLR)에서 일괄 처리합니다.
  • 4단계 — WebP 변환: 소수마법(Squoosh, CloudConvert, XnConvert)에서 JPG → WebP로 변환합니다. 60~75% 용량 감소를 확인할 수 있습니다.
  • 5단계 — 품질 테스트: 최적화된 이미지와 원본을 나란히 보고 차이가 감지되는지 확인합니다. 대부분 눈에 띄지 않습니다.
  • 6단계 — CMS 설정: WordPress라면 Imagify, ShortPixel 같은 플러그인으로 자동 최적화를 설정합니다.
  • 7단계 — 재검증: 모든 이미지를 업로드한 후 PageSpeed 점수를 다시 확인합니다. 개선 폭에 놀랄 것입니다.

06자주 묻는 질문

Q이미지를 압축하면 품질이 떨어지지 않나요?
올바른 설정으로 압축하면 인간의 눈으로는 구별할 수 없습니다. JPG 품질을 75~85로 설정하거나 WebP로 변환하면, 용량은 극적으로 줄어들지만 눈으로는 원본과 거의 같습니다. 도구(TinyJPG, Squoosh)를 사용해 비교해 보세요.
QWebP는 안전한가요? 모든 브라우저에서 열립니까?
WebP는 Google이 개발한 공식 표준 포맷입니다. 최신 Chrome, Firefox, Safari, Edge는 모두 지원합니다. 다만 IE 11이나 아주 오래된 Android에서는 미지원이므로, <picture> 태그로 JPG 폴백을 제공하면 됩니다. 이렇게 하면 모든 브라우저에서 안전합니다.
Q의료 이미지(X-ray, CT)는 압축해도 되나요?
의료용 진단 이미지는 의료법상 원본 손실 없이 보관해야 하므로, 웹에 표시하는 용도로만 압축된 사본을 사용합니다. 원본은 PACS 시스템에 무손실로 보관하고, 웹용으로는 WebP 75% 품질로 표시하면 됩니다.
Q직접 할 수 있을까요, 아니면 전문가에게 맡겨야 하나요?
이미지가 50장 이하라면 TinyJPG나 Squoosh 같은 온라인 도구로 직접 할 수 있습니다. 하지만 이미지가 200장 이상이거나, 홈페이지 성능을 종합적으로 개선하려면 전문가에게 맡기는 것이 효율적입니다.
Q자동 최적화 플러그인을 쓰면 되지 않을까요?
WordPress 플러그인(Imagify, ShortPixel)은 편하지만, 비용이 들고 일부 품질 손실이 있습니다. 도도컴즈처럼 직접 최적화하면 더 정교한 설정이 가능합니다. 규모에 따라 선택하면 됩니다.
Q로딩 속도가 빨라지면 검색 순위도 올라가나요?
네, Google의 Core Web Vitals 항목 중 "성능"은 검색 순위에 직접 영향을 줍니다. 로딩 속도가 2초 개선되면 검색 노출이 약 3~6개월 후에 눈에 띄게 개선됩니다.
QCDN을 반드시 써야 하나요?
이미지 최적화 + Lazy Loading만으로도 대부분의 경우 충분합니다. CDN은 방문자가 전국에 많고, 매일 새 이미지를 많이 올리는 경우에 추가로 고려하면 됩니다.
Q이미지 외에 다른 성능 개선 방법이 있나요?
이미지가 70~80%의 문제이지만, CSS/JS 최소화, 서버 응답 시간 개선, 브라우저 캐시 활용 등도 도움이 됩니다. 다만 순서대로는 이미지 최적화를 먼저 하세요.
Q이미지 최적화했는데도 느리다면?
이미지 최적화 후에도 느리다면, 호스팅 서버의 응답 시간이 문제일 수 있습니다. Pingdom Tools로 병목을 진단하거나, 도도컴즈 같은 전문가에게 상담받으시기 바랍니다.
Q이미지 최적화, 도도컴즈와 뭐가 다른가요?
도도컴즈는 단순히 이미지를 줄이는 것이 아니라, 홈페이지의 전체 구조와 마케팅까지 고려해 최적화합니다. PageSpeed 점수 개선 → 검색 순위 상승 → 문의율 증가까지 이어지도록 설계합니다. 200곳 이상의 실제 사례가 이를 증명합니다.
이미지 최적화 | 함께 성장하는 마케팅, 도도컴즈
홈페이지 성능은 기술이 아니라 세심함입니다. 불필요한 용량 하나하나를 제거하고, 사용자 경험을 최우선으로 설계할 때 비로소 "빠르고 신뢰할 수 있는" 홈페이지가 만들어집니다. 도도컴즈는 성능과 마케팅을 동시에 달성하는 홈페이지를 만듭니다.
모든 상담 무료 · 1566-7344 (24시 010-9439-3648)
소개만 해도 매달 수당 — 도도파트너스 (가입비 0원 · 본인/가족 인정)
주식회사 도도컴즈 · 홈페이지 제작 정보
게시글 공유
출력
목록
prev 이전글
브라우저 탭에 뜨는 작은 아이콘, 파비콘 설정하기 [웹 기술 정보]
next 다음글
홈페이지 리뉴얼, 언제 하는 게 맞을까 — 미루면 손해보는 신호 5가지를 놓치지 마세요. 주식회사 도도컴즈