Web Guide이미지 최적화웹 이미지 용량페이지 속도

이미지 최적화 : 화질은 유지하고 용량은 줄이는 방법

홈페이지가 느린 원인의 절반 이상은 이미지입니다.

카메라에서 바로 나온 5MB 사진을 그대로 올리면 페이지 하나가 수십 MB가 되고, 모바일에서는 열리기 전에 방문자가 떠납니다. 화질을 유지하면서 용량을 줄이는 실무 규칙입니다.

크기부터 맞춘다

화면에 800픽셀로 보이는 이미지에 4000픽셀 원본을 쓰는 것이 가장 흔한 낭비입니다. 실제 표시 크기의 2배(고해상도 화면 대응) 정도로 줄이면 용량이 크게 떨어집니다.

1920px

메인 배너 가로

1200px

본문 이미지 가로

×2

표시 크기 대비 상한

형식을 용도에 맞게

WebP는 같은 화질에서 JPG보다 용량이 작아 현재 대부분의 브라우저에서 권장됩니다.

사진

JPG 또는 WebP

로고 · 아이콘처럼 선이 분명한 이미지

SVG 또는 PNG

투명 배경이 필요 없는 이미지를 PNG로 저장하는 것은 용량 낭비입니다.

이미지 최적화 비교 예시

원본: 4000px · 5.2MB · PNG

최적화 예시: 1200px · 180KB · WebP

표시 크기와 형식, 압축 품질을 함께 조절합니다.

크기와 형식만 바꿔도 첫 화면 로딩이 몇 초 단위로 줄어듭니다.

압축 품질은 80 전후

JPG 품질을 100에서 80으로 낮추면 눈으로는 차이를 느끼기 어렵지만 용량은 절반 가까이 줄어듭니다. 무료 압축 도구나 이미지 편집 프로그램의 웹용 저장 기능을 쓰면 됩니다.

웹비스타가 제작한 사이트는 관리자에서 업로드 시 자동 리사이즈가 적용되지만, 원본 자체를 적정 크기로 준비하면 더 좋습니다.

지연 로딩과 캐시

화면 아래쪽 이미지는 스크롤할 때 불러오는 지연 로딩을 적용하면 첫 화면이 빨라집니다. 자주 바뀌지 않는 이미지는 브라우저 캐시 설정으로 재방문 시 다시 내려받지 않게 합니다.

이 두 가지는 제작 단계에서 적용되는 기술 설정이니 제작사에 확인하세요.

CHECK POINT

□ 이미지가 실제 표시 크기의 2배 이내로 줄여져 있는가

□ 사진은 JPG/WebP, 로고는 SVG/PNG로 형식이 맞는가

□ 첫 화면 아래 이미지에 지연 로딩이 적용되어 있는가

화질을 포기하지 않아도
용량은 얼마든지 줄일 수 있습니다.

크기 맞추기, 형식 고르기, 품질 80, 지연 로딩 — 네 가지면 충분합니다.

관련 FAQ 탭 | 운영 및 유지보수

#이미지 최적화 #웹 이미지 용량 #페이지 속도 #WebP #지연 로딩 #브라우저 캐시 #이미지 리사이즈 #압축 품질 #모바일 속도