웹을 위한 이미지 압축과 크기 조정
이미지는 대개 페이지에서 가장 무거운 요소이고, 그 무게의 대부분은 피할 수 있는 것입니다. 휴대폰에서 바로 나온 사진은 가로 4,000픽셀에 수 메가바이트일 수 있는데, 정작 화면에서는 600픽셀 남짓한 자리에 표시됩니다. 해법은 마법 같은 설정 하나가 아니라 짧은 순서의 결정들이며, 사람들이 보통 가장 먼저 손대는 항목이 실은 가장 덜 중요합니다.
압축보다 크기 조정이 먼저
가장 큰 효과는 거의 언제나 품질이 아니라 해상도에서 나옵니다. 파일 크기는 픽셀 수에 비례하므로 가로세로를 각각 절반으로 줄이면 압축을 하기도 전에 데이터의 약 4분의 3이 사라집니다. 화면에서 800픽셀보다 크게 표시되지 않는 이미지를 4,000픽셀로 저장하는 것은 아무도 보지 않는 픽셀에 네다섯 배를 지불하는 셈입니다.
순서를 지키세요. 거대한 이미지를 압축한 뒤 브라우저에서 줄이면 아끼려던 대역폭을 그대로 낭비하는 것이고, 강하게 압축한 뒤에 축소하면 아티팩트가 줄기는커녕 오히려 도드라지는 경우가 많습니다. 실제로 표시될 최대 크기를 먼저 정하고, 그 크기로 줄인 다음에 품질을 고민하세요.
포맷 고르기
JPEG는 사진용입니다. 사람 눈이 잘 알아채지 못하는 정보를 버리는 방식이라 그라데이션과 피부톤에서는 훌륭하지만 선명한 경계에서는 취약합니다. PNG는 무손실로 모든 픽셀을 그대로 보존하므로 스크린샷·로고·선화, 그리고 투명도가 필요한 경우에 적합하고, 사진에는 부적합합니다 — 필요한 것보다 몇 배 큰 파일이 나오니까요.
WebP는 두 경우를 모두 커버하며, 비슷한 체감 품질에서 JPEG보다 보통 25~35% 작고 PNG처럼 투명도도 지원합니다. 브라우저 지원은 이미 수년째 사실상 보편적이므로 대부분의 사이트에서 정직한 답은 이렇습니다 — WebP를 쓰고, 아주 오래된 환경을 지원해야 할 때만 원본을 폴백으로 남기세요.
품질 슬라이더가 실제로 하는 일
품질 값은 무언가의 백분율이 아닙니다. 얼마나 공격적으로 정보를 버릴지 조절하는 손잡이이고, 그 척도는 선형이 아닙니다. 의미 있는 구간은 좁습니다 — 대략 75에서 85 사이면 대부분의 사진이 일반적인 보기 크기에서 원본과 구분되지 않으면서 파일은 품질 100의 일부에 불과합니다. 90을 넘으면 대체로 눈에 보이는 품질이 아니라 용량을 사는 것입니다.
고르는 올바른 방법은 추측이 아니라 직접 보는 것입니다. 두어 가지 설정으로 내보낸 뒤 확대한 상태가 아니라 **실제 표시될 크기**에서 비교하세요. 400% 확대에서 명백한 아티팩트가 제자리에서는 보이지 않는 경우가 흔하며, 잘못된 배율로 판단하는 것이 필요보다 두세 배 큰 이미지를 배포하게 되는 가장 흔한 이유입니다.
재압축은 공짜가 아닙니다
손실 포맷은 다시 인코딩할 때마다 열화됩니다. JPEG를 열어 조금 손보고 다시 저장하면 정보가 두 번째로 버려지고, 손실은 누적됩니다 — 여러 번 거친 이미지 특유의 뭉개지고 각진 모습이 그것입니다. 원본을 최고 품질로 보관하고 파생본은 항상 원본에서 내보내야 하는 이유입니다.
이미 작아진 파일은 더 압축해도 의미 있는 이득이 없을 수 있다는 뜻이기도 합니다. 한 번 압축을 거친 이미지를 다시 돌리면 눈에 보이는 품질을 몇 킬로바이트와 맞바꾸는 일이 잦습니다. 결과를 받아들이기 전에 실제로 얼마나 줄었는지 확인하세요.
쓰지 않는 정보는 지우기
사진에는 공개하고 싶지 않은 메타데이터가 따라붙습니다 — 카메라 기종, 촬영 설정, 시각, 그리고 휴대폰이라면 촬영 위치의 GPS 좌표까지 자주 포함됩니다. 용량이면서 동시에 프라이버시 문제이고, 앱 사이를 복사해 다녀도 살아남습니다.
공개 전 짧은 체크리스트:
- 실제로 표시될 최대 크기에 맞춰 해상도를 줄인다.
- 사진은 WebP를 우선, 스크린샷·로고·투명도는 PNG를 유지한다.
- 품질 75~85로 내보내고 확대가 아닌 표시 크기에서 비교한다.
- 파생본은 항상 원본에서 내보내고, 이미 압축된 사본에서 만들지 않는다.
- 공개용이라면 EXIF 메타데이터, 특히 위치 정보를 제거한다.