이미지 용량 줄이는 방법

상황별 처방 예시

채용 포털 증명사진 200KB 제한: 얼굴이 가운데 오도록 크롭 → 가로 700~1000px로 리사이즈 → JPG 품질을 중간부터 올려가며 판독 가능한 최소 지점 탐색. 배경 정리보다 해상도·품질 순서가 먼저인 경우가 많습니다.

쇼핑몰 상세 이미지 10장: 공통 가로폭 결정 → WEBP/JPG 파생본 생성 → 히어로만 품질 여유 → 썸네일은 더 작게. 전체 합계 MB를 기준 KPI로 삼으면 한 장만 예쁘게 남기고 나머지가 무거운 상태를 예방합니다.

블로그에 올린 아이폰 사진: HEIC 원본 보관 → 본문 폭에 맞게 리사이즈 → WEBP 또는 JPG로 게시 → 필요 시 추가 압축. 원본을 직접 올리는 습관이 용량 문제의 시작인 경우가 많습니다.

측정 없이 최적화하지 않기

감으로 품질을 낮추기 전에 현재 페이지의 이미지 총량을 재세요. 브라우저 개발자 도구 네트워크 패널이면 충분합니다. 가장 큰 파일 3개를 해결하면 나머지 자잘한 최적화보다 효과가 큰 경우가 많습니다. 최적화 티켓은 ‘모든 이미지’보다 ‘상위 N개’로 끊는 것이 완료율이 높습니다.

최적화 후에는 실제 기기에서 스크롤하며 흐림·밴딩을 확인하세요. 데스크탑에서 멀쩡한 이미지가 모바일 저사양에서 더 지저분해 보일 수 있습니다. 특히 그라데이션 배경의 히어로는 모바일에서 먼저 검수하세요.

보안·프라이버시와 함께 줄이기

용량을 줄이는 김에 공개할 사진의 메타데이터를 정리하면 일석이조인 경우가 있습니다. 다만 재인코딩 방식은 화질에 영향을 줄 수 있으므로, 용량 최적화 패스와 동일하게 확대 확인을 하세요. 원본 보관 원칙은 여기에도 동일하게 적용됩니다.

일주일 안에 끝내는 경량화 스프린트

1일차: 상위 랜딩 3개의 이미지 바이트를 측정해 가장 큰 자산 15개를 목록화합니다. 2일차: 해상도부터 잘라 재업로드하고 효과를 측정합니다. 3일차: 포맷 전환(JPG/WEBP)을 적용합니다. 4일차: 남은 항목만 품질 조정합니다. 5일차: 전후 지표와 샘플 이미지를 공유하고 운영 규칙으로 고정합니다.

이 스프린트의 핵심은 ‘모든 이미지를 완벽히’가 아니라 ‘영향 큰 것부터 완료’입니다. 완료 정의가 없으면 최적화는 끝나지 않는 취향 논쟁으로 변합니다. KPI는 총 이미지 KB와 LCP, 보조 지표는 CS 깨짐 제보로 두세요.

스프린트 후에도 신규 업로드가 원본 해상도로 들어오면 효과가 후퇴합니다. CMS 업로드 가이드에 최대 가로와 권장 포맷을 적어 두고, 가능하면 업로드 시점에 리사이즈되도록 시스템을 보완하세요. 사람이 매번 완벽히 지키는 것보다 기본값을 고치는 편이 오래갑니다.

자동화를 도입하기 전에 수동 규칙이 필요한 이유

리사이즈 봇이나 CDN 변환을 도입해도, 팀이 ‘원본을 그대로 올리면 안 된다’는 감각이 없으면 시스템이 잘못된 입력을 계속 가공합니다. 먼저 수동 규칙(최대 가로, 포맷, 샘플 QA)을 정착시킨 뒤 자동화하세요. 자동화는 규칙을 확대하는 수단이지, 규칙의 대체재가 아닙니다.

수동의 첫 성공 사례를 남기는 것이 중요합니다. 예를 들어 특정 랜딩 총 이미지 용량을 8MB에서 3MB로 줄이고 LCP가 개선된 스크린샷을 공유하면, 다음 팀도 같은 순서를 따릅니다. 도구 링크(압축·리사이즈·포맷 변환)를 그 성공 사례 문서에 같이 두세요.

한 페이지 요약

용량을 줄이는 순서는 리사이즈 → 포맷 → 품질입니다. 큰 자산부터 처리하고, 원본은 지키며, 성공 사례를 수치로 남기세요. 자동화 전에 수동 규칙을 정착시키고, 메타데이터 정리는 공개 사진에 한해 같은 흐름으로 처리해도 됩니다. 목표가 KB 제한이든 LCP든, 측정 없는 최적화는 취향 논쟁으로 끝납니다. 지금 가장 무거운 이미지 세 장부터 관련 도구로 줄여 보세요.

오늘 가장 무거운 파일 이름과 용량을 메모해 두면, 다음 점검 때 개선 여부를 바로 비교할 수 있습니다.