이미지 용량 줄이기 — JPG·PNG·WebP 언제 무엇을 쓰나

이미지 형식은 압축 방식이 다릅니다. 손실 압축은 사람 눈이 잘 알아채지 못하는 정보를 버려 용량을 크게 줄이고, 무손실 압축은 원본을 그대로 복원할 수 있게 저장합니다.

용량은 픽셀 수에 비례합니다. 가로세로를 각각 절반으로 줄이면 픽셀 수는 4분의 1이 되므로 용량도 그만큼 떨어집니다. 품질 슬라이더를 아무리 내려도 이만한 효과는 나오지 않습니다.

휴대폰 사진은 보통 4000px 안팎입니다. 그런데 블로그 본문 폭은 대개 800~1200px이고, 화면에는 그 크기로 축소돼 보입니다. 원본을 그대로 올리면 보이지도 않는 픽셀을 방문자에게 전송하는 셈입니다.

고해상도 화면을 고려하더라도 표시 폭의 두 배면 충분합니다. 본문 폭이 800px이라면 1600px 이하로 줄여도 화질 차이를 느끼기 어렵습니다.

JPG와 WebP의 품질 값은 얼마나 많은 정보를 버릴지를 정합니다. 100에 가까울수록 원본에 가깝고 용량이 큽니다.

실무에서는 75~85 사이가 균형점입니다. 이 구간에서는 원본과 나란히 놓고 봐도 차이를 알기 어려우면서 용량은 크게 줄어듭니다. 60 아래로 내려가면 하늘이나 피부처럼 색이 완만하게 변하는 부분에서 얼룩이 보이기 시작합니다.

주의할 점은 손실 압축이 누적된다는 것입니다. JPG를 열어 다시 JPG로 저장할 때마다 정보가 조금씩 더 사라집니다. 편집은 원본에서 하고 저장은 마지막에 한 번만 하세요.

페이지 로딩 시간의 상당 부분을 이미지가 차지합니다. 구글은 페이지 경험을 검색 순위 신호로 쓰고 있고, 특히 화면에서 가장 큰 요소가 그려지는 시간(LCP)이 대개 대표 이미지에 좌우됩니다.

모바일 환경에서는 차이가 더 큽니다. 3MB짜리 이미지 하나가 느린 회선에서는 몇 초를 잡아먹고, 그 사이에 방문자가 떠날 수 있습니다.

이미지에 가로·세로 크기를 지정해 두는 것도 중요합니다. 크기를 모르면 브라우저가 자리를 비워 두지 못해 이미지가 로드되는 순간 아래 내용이 밀리는데, 이 레이아웃 이동도 순위 신호로 측정됩니다.