웹용 이미지 압축하는 방법

작성 Piano Garden 편집팀 · 검수 Piano Garden 도구 검수 · 게시 2026-08-05 · 수정 2026-08-25

카메라나 스마트폰으로 찍은 원본은 웹에 올리기엔 거의 항상 과합니다. 수 메가바이트짜리 파일이 본문·썸네일·히어로에 그대로 들어가면 첫 화면이 늦게 그려지고, 모바일 데이터 요금에도 부담이 됩니다. 압축은 ‘예쁘게 보이게’보다 ‘필요한 픽셀만 남기기’에서 시작하는 작업입니다.

먼저 실제로 화면에 보이는 가로 폭을 정하세요. 모바일 본문 이미지는 가로 1000~1400px면 충분한 경우가 많고, 레티나 대비를 고려해도 표시 폭의 1.5~2배면 대개 충분합니다. 그보다 큰 해상도는 화면에 보이지 않으면서만 용량을 키웁니다.

해상도를 줄인 뒤 품질(퀄리티) 슬라이더로 용량을 조절합니다. JPG·WebP는 품질 70~85 구간에서 사진이 자연스럽게 보이는 경우가 많고, 스크린샷·UI 캡처는 조금 더 높게 두는 편이 안전합니다. 한 번에 최솟값까지 내리지 말고, 가장자리·작은 글자·피부톤을 확대해서 비교하세요.

용도별로 목표 용량을 정해 두면 의사결정이 빨라집니다. 썸네일은 50~150KB, 본문 사진은 150~400KB, 히어로는 네트워크와 디자인을 보고 상한을 정하는 식이 실무에서 흔합니다. 같은 장면이라도 어두운 밤 사진·그라데이션이 많은 이미지는 압축 아티팩트가 잘 보이니 여유를 둡니다.

로고·아이콘·선이 중요한 그래픽은 사진과 같은 공격적 손실 압축을 피하세요. 단색·텍스트가 많은 이미지는 PNG 또는 SVG가 낫고, 사진류는 WebP나 JPG가 유리합니다. 투명 배경이 필요하면 PNG·WebP의 알파를 유지하는지 결과 파일에서 확인합니다.

배치 작업 전에는 원본 폴더와 웹용 폴더를 분리하세요. 압축본을 원본에 덮어쓰면 나중에 인쇄·재편집이 어려워집니다. 파일명은 용도와 가로 폭을 넣으면(예: product-hero-1200.webp) CDN·CMS에서 관리하기 쉽습니다.

업로드 후 Lighthouse나 네트워크 탭으로 실제 전송 크기를 한 번 더 보세요. CMS가 자동으로 리사이즈하더라도 원본이 거대하면 서버·빌드 시간이 늘어납니다. 캐시 헤더와 lazy-loading은 압축과 별개로 속도를 돕지만, 무거운 원본을 대체하지는 않습니다.

흔한 실수는 ‘품질 100으로 저장한 JPG’와 ‘이미 압축된 파일을 다시 여러 번 재압축’입니다. 전자는 용량만 커지고, 후자는 블록 노이즈가 누적됩니다. 가능하면 무손실에 가까운 원본에서 한 번만 웹용으로 내보내세요.

체크리스트로 정리하면 다음과 같습니다. 표시 폭 결정, 불필요 메타데이터·EXIF 제거 여부 확인, 포맷 선택, 품질 스팟체크, 목표 KB 충족, 원본 보관, 실제 페이지에서 로드 확인. 이 순서만 지켜도 대부분의 속도 이슈는 줄어듭니다.

Piano Garden의 이미지 압축·JPG/WebP/PNG 압축·이미지 자르기 도구로 브라우저에서 바로 해상도와 품질을 맞출 수 있습니다. 민감한 사진은 로컬 처리 흐름을 선호한다면 업로드 정책을 확인한 뒤 사용하세요.