홈페이지 이미지 용량 줄이기, 형식·크기·압축 3단계

홈페이지 이미지 용량 줄이기는 이미지 성격에 맞는 형식을 고르고, 화면에 실제로 보이는 크기로 줄인 다음, 화질을 확인하며 압축하는 세 단계로 하면 됩니다. 이 글에서는 JPEG·PNG·WebP·SVG 선택 기준과 업로드 전 처리 순서, 올린 뒤 확인할 점을 정리했습니다.

이미지 용량이 홈페이지에 주는 영향

Google 검색 센터의 이미지 SEO 안내는 이미지가 페이지 전체 크기에서 가장 큰 부분을 차지하는 경우가 많아 페이지를 느리게 하고 데이터 비용을 늘릴 수 있다고 설명합니다. 휴대폰으로 접속하는 방문자에게는 사진 몇 장의 차이가 첫 화면이 뜨는 시간의 차이로 바로 이어집니다.

운영자가 가장 쉽게 바꿀 수 있는 것도 이미지입니다. 코드나 서버를 건드리지 않고 올리기 전에 한 번 손보는 습관만으로 페이지를 가볍게 유지할 수 있습니다. 속도 전체를 점검하는 방법은 홈페이지 속도 개선 방법에서 다뤘습니다.

1단계: 이미지 형식 고르기

MDN의 이미지 형식 안내는 사진 같은 일반 이미지에는 PNG·JPEG보다 압축 효율이 좋은 WebP나 AVIF를 우선 쓰고, 화면 캡처·도표·로고처럼 글자와 선이 선명해야 하는 이미지는 무손실 압축을 쓰라고 권합니다. 아래 표는 홈페이지에서 자주 쓰는 형식을 어울리는 이미지와 특징으로 비교한 것입니다.

형식	어울리는 이미지	특징
JPEG	사진	손실 압축, 투명 배경 없음. 사진의 대체 형식으로 쓰기 좋음
PNG	화면 캡처, 도표, 투명 배경 이미지	무손실 압축이라 글자와 선이 선명하지만 사진은 용량이 큼
WebP·AVIF	사진과 그래픽 모두	손실·무손실, 투명 배경 지원. 같은 화질에서 용량이 작은 편
SVG	아이콘, 로고, 단순 도형	벡터 형식이라 크기를 키워도 깨지지 않음

그림은 같은 내용을 한 장으로 요약한 것입니다. 오래된 브라우저까지 고려해야 한다면 picture 요소로 WebP와 함께 JPEG나 PNG를 대체 이미지로 넣는 방법이 있습니다. 업로드한 형식을 사이트가 그대로 쓰는지, 자동으로 변환하는지는 사이트마다 다르므로 제작 업체에 확인해 보세요.

2단계: 보이는 크기에 맞게 줄이기

휴대폰이나 카메라로 찍은 사진은 홈페이지에 보이는 크기보다 훨씬 큰 경우가 많습니다. 화면에 작게 보여도 원본 크기 그대로 올리면 방문자는 큰 파일을 모두 내려받아야 합니다. 그래서 형식보다 먼저 효과가 큰 것이 크기 조정입니다.

본문 사진, 첫 화면 배너, 목록 썸네일처럼 이미지가 들어갈 자리마다 표시되는 폭을 제작 업체에 물어 기준을 정해 두면 편합니다. 같은 이미지를 여러 화면 크기에 맞춰 여러 장으로 준비하는 반응형 이미지(srcset)를 쓰는 사이트라면 기준이 달라질 수 있습니다. 원본은 따로 보관하고, 줄인 사본을 올리는 것이 기본입니다.

3단계: 화질을 확인하며 압축하기

사진처럼 색이 부드럽게 이어지는 이미지는 일부 정보를 버리는 손실 압축을 해도 눈으로 차이를 느끼기 어렵습니다. 반대로 글자가 들어간 안내 이미지나 화면 캡처는 손실 압축을 강하게 하면 글자 주변이 번지기 쉬우므로 무손실 압축을 씁니다.

이미지 편집 프로그램이나 압축 도구에서 화질 값을 조금씩 낮추며 저장한 뒤, 원본과 나란히 놓고 실제 표시 크기로 비교해 보세요. 사진 파일에는 촬영 기기나 촬영 위치 같은 부가 정보가 담기는 경우가 있어, 저장할 때 이런 정보를 빼는 옵션이 있다면 함께 쓰는 것이 좋습니다.

업로드 전 이미지 처리 순서

세 단계를 실제 작업 순서로 풀면 다음과 같습니다. 아래 그림은 이 순서를 한 장으로 정리한 것입니다.

1. 원본 이미지를 별도 폴더에 보관합니다.
2. 필요 없는 가장자리를 잘라 구도를 정리합니다.
3. 들어갈 자리의 표시 폭에 맞게 크기를 줄입니다.
4. 사진은 WebP나 JPEG, 캡처·도표는 PNG나 무손실 WebP로 저장합니다.
5. 화질 값을 조절해 압축하고 실제 크기로 확인합니다.
6. 파일 이름을 내용을 알 수 있는 영문 소문자와 하이픈으로 바꿉니다.
7. 올릴 때 그림 내용을 설명하는 대체 텍스트를 입력합니다.

파일 이름과 대체 텍스트

Google 이미지 안내는 IMG00023.JPG 같은 이름 대신 짧고 내용을 알 수 있는 파일 이름을 쓰고, 대체 텍스트(alt)는 키워드를 채워 넣지 말고 맥락 안에서 이미지를 설명하라고 권합니다. 대체 텍스트는 화면을 볼 수 없는 방문자에게도 필요하므로 웹 접근성 기본 점검법과 함께 챙기면 좋습니다.

올린 뒤 확인할 점

MDN의 img 요소 문서는 이미지에 width와 height를 지정하면 브라우저가 이미지를 불러오기 전에 자리를 잡아 두어 화면이 밀리는 현상을 줄일 수 있다고 설명합니다. 또 loading="lazy"를 쓰면 화면에 가까워질 때까지 이미지를 늦게 불러옵니다. 첫 화면에 바로 보여야 하는 이미지는 늦게 불러올 이유가 없으므로 아래쪽 이미지에만 쓰는 것이 자연스럽습니다.

• 휴대폰에서 페이지를 열어 이미지가 흐리거나 깨지지 않는지 봅니다.
• 이미지가 늦게 뜨며 글이 밀리지 않는지 확인합니다.
• 관리자 화면에서 올린 이미지가 자동으로 줄어드는지, 원본 그대로인지 확인합니다.

디코랩이 돕는 방식

디코랩은 홈페이지 제작과 운영 중인 사이트의 유지보수·개선을 합니다. 이미 운영 중인 사이트의 이미지 처리나 화면 오류는 유지보수 접수 게시판에 비밀글로 요청할 수 있습니다. 제작과 관리 범위는 디코랩 서비스 소개에서 확인할 수 있습니다.

자주 묻는 질문

이미지는 몇 KB 이하로 올려야 하나요?

모든 사이트에 맞는 하나의 기준은 없습니다. 이미지가 보이는 크기와 페이지에 들어간 이미지 수에 따라 달라지므로, 표시 크기에 맞춰 줄이고 PageSpeed Insights 진단에서 큰 이미지로 지적되지 않는지 확인하는 방식이 현실적입니다.

WebP로 올리면 오래된 브라우저에서 안 보이나요?

현재 주요 브라우저는 대부분 WebP를 지원합니다. 오래된 환경까지 고려해야 한다면 picture 요소로 JPEG나 PNG를 대체 이미지로 함께 제공하는 방법이 있습니다.

로고는 어떤 형식이 좋나요?

벡터 원본이 있다면 SVG가 크기를 바꿔도 선명합니다. SVG가 없다면 투명 배경을 지원하는 PNG나 WebP를 씁니다.

이미 올린 이미지도 다시 줄여야 하나요?

방문이 많은 페이지와 첫 화면 이미지부터 바꾸면 효과가 큽니다. 같은 파일 이름으로 바꿔 올릴 수 있는지, 새로 올려 연결을 바꿔야 하는지는 사이트 구조에 따라 다릅니다.

운영 중인 홈페이지의 이미지가 무거운지 점검받고 싶다면 사이트 주소를 적어 디코랩 프로젝트 문의로 보내 주세요.