블로그에 사진 10장을 올렸더니 페이지 로딩이 5초를 넘긴다. 방문자 절반은 3초 안에 뒤로가기를 누른다. 원본 사진을 그대로 쓰면 이런 일이 생긴다. 스마트폰으로 찍은 사진 한 장이 4~8MB는 기본이고, 미러리스 카메라 사진은 20MB를 넘기는 경우도 흔하다.
사진 용량이 큰 이유
스마트폰 카메라 해상도가 높아지면서 사진 한 장의 용량도 같이 커졌다. 용량에 영향을 주는 요소는 크게 세 가지다.
- 해상도: 4000x3000 이상이면 기본적으로 용량이 크다. 웹에 올릴 거라면 1920px 너비면 충분하다.
- 파일 포맷: PNG는 무손실이라 같은 이미지라도 JPG보다 3~5배 크다. 사진이라면 JPG나 WebP가 적합하다.
- 메타데이터: 촬영 위치, 카메라 정보 등이 포함되면 수백 KB가 추가된다.
화질 손실 없이 용량 줄이는 방법
이미지 압축에는 두 가지가 있다. 무손실 압축은 화질 그대로 용량만 줄이는 방식이고, 손실 압축은 눈에 안 보일 정도로 화질을 살짝 낮춰서 용량을 크게 줄이는 방식이다. 실용적으로는 품질 80%의 손실 압축이 육안 차이가 거의 없고, 용량은 절반 이하로 떨어진다.
- 이미지 선택: 압축할 파일을 고른다. JPG, PNG, WebP, GIF 모두 가능하다.
- 품질 설정: 80% 전후가 화질과 용량의 균형점이다. 70% 이하로 내리면 텍스트가 포함된 이미지에서 깨짐이 보이기 시작한다.
- 압축 및 저장: 결과를 확인하고 다운로드한다.
여러 장을 한꺼번에 처리해야 할 때 직접 써본 건 온라인 이미지 압축 도구인데, 20장을 한 번에 넣고 품질 슬라이더로 강도를 조절할 수 있어서 일괄 작업이 빨랐다. 파일이 서버로 전송되지 않고 브라우저에서 처리되니 이력서 사진 같은 개인 이미지도 부담 없이 돌릴 수 있었다.
주의 압축률을 70% 이하로 설정하면 캡처 이미지나 문서 스캔본에서 글자가 뭉개질 수 있다. 텍스트가 포함된 이미지는 80% 이상을 유지하는 게 안전하다.
압축 전후 비교
스마트폰 원본 사진(JPG)을 80% 품질로 압축하고 리사이즈까지 적용한 결과다.
압축 전
- 파일 크기: 4.2MB
- 해상도: 4032 x 3024
- 포맷: JPG (스마트폰 원본)
압축 후 (품질 80%)
- 파일 크기: 420KB (90% 감소)
- 해상도: 1920 x 1440
- 육안 화질 차이: 거의 없음
블로그에 사진 10장을 올리면 원본 기준으로 50MB가 넘는다. 전부 압축하면 5MB 이내로 줄어들고, 페이지 로딩 속도가 눈에 띄게 빨라진다. 이미지 때문에 사이트가 느리다면 압축 한 번이면 해결된다.