홈페이지가 느린 이유의 절반은 이미지입니다 — 업로드 전 정리 기준

사이트는 그대로인데 어느 날부터 느려졌다면

홈페이지를 직접 운영하시는 분들께 가장 자주 듣는 말이 있습니다. "만들 때는 빨랐는데 요즘 왜 이렇게 느리죠?" 템플릿도 그대로고, 서버도 그대로입니다. 바뀐 것은 하나입니다. 그동안 신메뉴 사진, 매장 사진, 행사 배너를 계속 올리셨다는 점입니다.

그 사진들은 대부분 휴대폰이나 DSLR에서 나온 원본입니다. 가로 4000픽셀이 넘고 파일 하나가 몇 메가바이트씩 됩니다. 화면에서는 가로 600픽셀 칸에 얌전히 들어가 보이지만, 브라우저는 4000픽셀짜리 원본을 전부 내려받은 다음 축소해서 보여줍니다. 보이는 크기와 내려받는 크기는 전혀 다른 이야기입니다.

이미지는 웹페이지 전송량에서 가장 큰 비중을 차지하는 요소입니다. 코드를 만지지 않고도 체감 속도를 가장 크게 바꿀 수 있는 지점이 바로 여기입니다.

느린 페이지는 이탈로 끝나지 않습니다

속도가 문제인 이유는 단순히 답답해서가 아닙니다. 첫째, 방문자는 화면이 비어 있는 동안 뒤로가기를 누릅니다. 특히 모바일 데이터 환경에서는 몇 초의 공백이 곧 이탈입니다. 둘째, 검색엔진은 페이지 로딩 경험을 평가 요소 중 하나로 봅니다. 셋째, 광고를 집행하는 경우 클릭당 비용은 이미 지불했는데 도착 페이지가 늦게 뜨면 그 비용이 그대로 새어 나갑니다.

여기에 잘 언급되지 않는 손실이 하나 더 있습니다. 정리되지 않은 이미지는 나중에 찾을 수 없다는 점입니다. IMG_4821.jpg, KakaoTalk_20240513_1.jpg 같은 파일이 수백 개 쌓이면, 배너 하나 교체하는 데도 원본을 다시 찾아 헤매게 됩니다. 속도 문제와 관리 문제는 같은 원인에서 나옵니다.

정리 기준이 없으면 사이트는 시간이 갈수록 반드시 무거워집니다. 운영 기간이 길수록 손해가 누적되는 구조입니다.

업로드 전에 정하는 네 가지 — 크기, 포맷, 용량, 이름

첫째, 가로 픽셀입니다. 기준은 '그 이미지가 화면에서 차지하는 최대 가로 폭'입니다. 고해상도 화면을 고려해 그 폭의 약 2배까지 올리고, 그 이상은 의미가 없습니다. 출발점으로 쓰실 수 있는 기준은 다음과 같습니다. 화면 전체를 덮는 메인 비주얼은 가로 1920px, 본문 안에 들어가는 큰 이미지는 1200~1600px, 카드·목록 썸네일은 600~800px, 로고나 아이콘은 실제 쓰이는 크기의 2배, 모바일 전용 이미지는 750~1080px입니다.

둘째, 포맷입니다. 사진처럼 색이 복잡한 이미지는 JPG, 배경이 투명해야 하는 로고·아이콘은 PNG, 선과 도형으로 된 로고·그래프는 SVG가 기본입니다. 여기에 WebP를 더하면 대체로 JPG·PNG보다 같은 화질에서 파일이 가벼워집니다. 현재 주요 브라우저는 WebP를 지원하므로, 사용하시는 홈페이지 도구가 변환을 지원한다면 사진류는 WebP로 올리시는 편이 유리합니다.

셋째, 용량 상한입니다. 숫자를 미리 정해두지 않으면 압축은 늘 대충 끝납니다. 메인 비주얼은 300KB 이내, 본문 이미지는 150~200KB 이내, 썸네일은 80KB 이내를 목표선으로 잡고, 넘으면 가로 픽셀부터 다시 줄이는 순서로 가시면 됩니다.

넷째, 파일명과 대체텍스트입니다. 파일명은 영문 소문자와 하이픈으로 내용을 적습니다. 'commin-package-design-sample-01.jpg' 같은 방식입니다. 한글·공백·괄호는 주소가 깨지는 원인이 되므로 피하시는 편이 안전합니다. 대체텍스트는 이미지를 볼 수 없는 사람에게 설명하듯 한 문장으로 씁니다. '사진', '이미지1' 같은 표기는 없는 것과 같습니다.

압축은 숫자가 아니라 눈으로 확인합니다

압축률 몇 퍼센트가 정답이라는 기준은 없습니다. 같은 설정이라도 사진의 내용에 따라 결과가 크게 달라지기 때문입니다. 그래서 실무에서는 세 곳만 확대해서 봅니다. 첫째, 하늘·벽·배경처럼 색이 완만하게 변하는 면입니다. 여기에 얼룩진 띠가 생기면 과압축입니다. 둘째, 글자나 로고의 가장자리입니다. 경계 주변에 지저분한 번짐이 보이면 되돌립니다. 셋째, 사람의 피부와 머리카락입니다. 뭉개짐이 가장 먼저 나타나는 자리입니다.

확인은 반드시 실제 사이트에 올린 상태에서, 휴대폰 화면으로 다시 봐야 합니다. 작업용 모니터에서는 괜찮아 보였는데 모바일에서 깨져 보이는 경우가 있고, 반대로 모니터에서 걱정했던 차이가 실제 사용 환경에서는 전혀 보이지 않는 경우도 많습니다. 판단 기준은 '원본과 같은가'가 아니라 '방문자가 보는 조건에서 문제가 없는가'입니다.

순서도 중요합니다. 압축을 먼저 하고 크기를 줄이면 손실이 두 번 쌓입니다. 크기를 먼저 맞추고, 포맷을 정하고, 그다음 압축하는 순서로 하시면 같은 용량에서 더 나은 화질이 남습니다. 그리고 원본은 절대 덮어쓰지 않고 별도 폴더에 보관합니다. 압축된 파일을 다시 키우는 것은 불가능합니다.

한 가지 더, 이미지가 뜨기 전 화면이 출렁이는 현상은 용량이 아니라 가로·세로 값이 지정되지 않아서 생깁니다. 크기를 정해두면 이미지가 도착하기 전에도 자리가 먼저 잡혀 화면이 흔들리지 않습니다.

COMMIN이 웹 이미지를 다루는 순서

COMMIN은 웹 작업에서 이미지를 '디자인 요소'이자 '운영 자산'으로 함께 봅니다. 그래서 시안 단계에서 이미 사용할 이미지의 표준 가로 폭과 비율을 페이지 구조에 맞춰 정합니다. 디자인이 끝난 뒤 이미지를 끼워 넣는 것이 아니라, 어떤 자리에 어떤 크기의 이미지가 들어가는지를 먼저 확정하는 방식입니다.

납품할 때도 완성 화면만 넘기지 않습니다. 용도별 규격, 권장 포맷, 파일명 규칙처럼 고객사가 스스로 운영할 때 필요한 기준을 함께 정리해 전달하는 것을 원칙으로 합니다. 로고를 납품할 때 용도별 파일과 최소 크기 규정을 함께 드리는 것과 같은 이유입니다. 기준이 없는 자산은 시간이 지나면 반드시 흐트러집니다.

AI로 생성한 이미지나 촬영 원본을 웹에 쓸 때도 같은 순서를 적용합니다. 원본은 최대 해상도로 보관하고, 웹에 올라가는 파일은 용도에 맞춰 따로 만듭니다. 원본과 배포본을 구분하는 것, 이것이 관리의 시작입니다.

제대로 정리된 사이트는 이렇게 확인됩니다

정리가 잘 된 사이트인지는 개발 지식 없이도 확인하실 수 있습니다. 방법 하나, 페이지에서 마우스 오른쪽 버튼을 눌러 '이미지 주소 복사'를 하고 주소창에 붙여 넣습니다. 열린 이미지의 실제 픽셀 크기가 화면에서 보이던 크기의 두 배를 크게 넘는다면 그 이미지는 과한 상태입니다.

방법 둘, 휴대폰 데이터 환경에서 와이파이를 끄고 주요 페이지를 열어봅니다. 메인, 소개, 제품·메뉴, 문의 네 페이지면 충분합니다. 텍스트보다 이미지가 눈에 띄게 늦게 채워진다면 정리 대상이 있다는 신호입니다.

방법 셋, 관리자 화면의 파일 목록을 정렬해 용량이 큰 순서로 봅니다. 상위 20개만 정리해도 체감이 달라지는 경우가 많습니다. 이 세 가지는 도구 없이, 오늘 바로 하실 수 있는 점검입니다. 숫자를 믿기 전에 직접 확인해 보시는 편이 정확합니다.

업로드 전 10항목 체크리스트

1. 이 이미지가 화면에서 차지하는 최대 가로 폭을 먼저 확인했습니까.

2. 가로 픽셀을 그 폭의 2배 이내로 줄였습니까(메인 1920 / 본문 1200~1600 / 썸네일 600~800).

3. 포맷을 용도에 맞게 정했습니까(사진 JPG·WebP / 투명 PNG / 로고·아이콘 SVG).

4. 파일 용량이 목표선 안에 들어옵니까(메인 300KB / 본문 150~200KB / 썸네일 80KB).

5. 크기 조정 → 포맷 변환 → 압축 순서를 지켰습니까.

6. 압축 후 배경 면, 글자 가장자리, 피부·머리카락 세 곳을 확대해 확인했습니까.

7. 실제 사이트에 올린 뒤 휴대폰으로 다시 봤습니까.

8. 파일명이 영문 소문자와 하이픈으로 내용을 설명하고 있습니까.

9. 대체텍스트를 한 문장으로 적었습니까('이미지1' 금지).

10. 원본은 덮어쓰지 않고 별도 폴더에 보관했습니까.

속도는 기술이 아니라 습관에서 갈립니다

홈페이지 속도를 개선한다고 하면 대개 서버나 플러그인부터 떠올리십니다. 하지만 직접 운영하는 사이트에서 가장 큰 몫을 차지하는 것은 매일 올리는 이미지 한 장의 습관입니다. 업로드 전 2~3분, 크기와 포맷과 이름을 정리하는 것만으로 1년 뒤 사이트의 무게가 완전히 달라집니다.

중요한 것은 완벽한 최적화가 아니라 반복 가능한 기준입니다. 위 열 가지 항목을 메모장에 붙여두고 그대로 따르시면 충분합니다. 기준이 손에 붙으면 판단에 걸리는 시간도 점점 짧아집니다.

그리고 하나만 기억해 주시기 바랍니다. 화면에 보이는 크기와 방문자가 내려받는 크기는 다른 값입니다. 이 한 문장을 놓치지 않으시면 대부분의 문제는 미리 막을 수 있습니다.

직접 정리하기 어렵다면, 기준부터 잡아드립니다

이미 올라간 이미지가 수백 장이어서 어디부터 손대야 할지 막막하시거나, 새 홈페이지를 만들면서 처음부터 운영 기준까지 함께 정리하고 싶으시다면 상담해 주시기 바랍니다. COMMIN은 웹디자인 단계에서 페이지별 이미지 규격과 파일 관리 규칙을 함께 설계해 드립니다.

작업 범위와 대략의 비용이 먼저 궁금하시다면 자동견적에서 조건을 입력해 보시기 바랍니다. 제작 범위, 페이지 수, 준비된 자료 상태를 선택하시면 예상 범위를 바로 확인하실 수 있습니다. https://www.commin.biz/자동견적?utm_source=blog&utm_medium=owned_blog&utm_campaign=commin_blog_2026w38&utm_content=website-image-optimization-before-upload

견적 화면에서 조건을 고르시는 것만으로도, 지금 우리 사이트에 무엇이 준비되어 있고 무엇이 비어 있는지 스스로 정리하실 수 있습니다.