웹사이트나 블로그를 운영하다 보면 로딩 속도 문제에 부딪히곤 한다. 대부분의 원인은 용량이 큰 이미지 파일에 있으며, 이를 해결하기 위한 구체적인 방법은 웹사이트 속도 개선을 위한 이미지 용량 줄이기 실무 가이드에서 확인할 수 있다. 무작정 용량을 줄이려고 압축률만 높이면 이미지가 깨지거나 뭉개지기 쉽다. 따라서 화질을 지키면서 용량을 최소화하려면 이미지 성격에 맞는 포맷을 먼저 선택해야 한다.
이미지 압축 포맷 비교: JPG vs PNG vs WebP
MDN의 이미지 파일 형식 가이드에 따르면 이미지 포맷은 크게 손실 압축과 무손실 압축으로 나뉜다. 손실 압축은 사람이 인지하기 어려운 미세한 색상 데이터를 버려 용량을 크게 줄이는 방식이고, 무손실 압축은 원본 데이터를 그대로 보존하는 방식이다.
| 포맷 | 압축 방식 | 투명도(알파 채널) | 주요 용도 | 장점 | 단점 |
|---|---|---|---|---|---|
| JPG (JPEG) | 손실 압축 | 지원 안 함 | 일반 사진, 복잡한 색상의 이미지 | 범용성이 매우 높고 용량 대비 화질이 무난함 | 텍스트나 경계선이 뚜렷한 이미지에서 픽셀이 깨질 수 있음 |
| PNG | 무손실 압축 | 지원함 | 로고, 아이콘, 텍스트가 포함된 그래픽 | 화질 손상이 전혀 없고 투명 배경 처리가 가능함 | 복잡한 사진에 사용할 경우 용량이 매우 커짐 |
| WebP | 손실 및 무손실 모두 | 지원함 | 고성능 웹 최적화용 이미지 | JPG 대비 25~34%, PNG 대비 26% 뛰어난 압축 효율 | 아주 오래된 구형 브라우저에서는 지원하지 않을 수 있음 |
상황에 따른 최적의 포맷 선택 기준
포맷의 특성을 파악했다면, 이제 자신이 업로드할 이미지의 종류에 맞춰 최선의 선택을 내릴 차례다.
다채로운 색상과 복잡한 피사체가 포함된 일반적인 사진이라면 손실 압축 방식의 포맷이 유리하다. 이때 최신 웹 환경을 겨냥한다면 구글의 WebP 가이드에서 강조하듯 압축 효율이 월등한 WebP를 선택하는 것이 가장 좋다. 기존 JPG와 비슷한 화질을 유지하면서도 파일 크기를 30%가량 더 줄일 수 있기 때문이다.
반면, 선명한 텍스트가 포함된 스크린샷이나 파비콘처럼 경계선이 뚜렷한 로고, 배경이 투명해야 하는 그래픽 리소스라면 PNG가 적합하다. 물론 WebP의 무손실 압축 옵션을 사용해도 PNG보다 약 26% 적은 용량으로 투명 배경을 처리할 수 있으므로, 브라우저 호환성에 문제가 없다면 이 역시 좋은 대안이다.
만약 극도의 효율을 추구한다면 AVIF 포맷을 고려할 수도 있으나, 아직 모든 브라우저가 지원하는 것은 아니므로 MDN의 picture 요소 문서에서 설명하는 것처럼 HTML의 picture 태그를 이용해 대체 이미지를 제공하는 방식을 병행해야 한다.
안전하고 빠른 클라이언트 사이드 압축 적용하기
최적의 포맷을 결정했다면 이제 실제로 파일 크기를 줄여야 한다. 압축 과정에서 가장 우려되는 부분은 원본 파일이 외부 서버로 전송될 때 발생하는 개인정보 유출과 처리 지연이다.
이런 문제를 해결하려면 브라우저 자체 연산 능력을 활용하는 클라이언트 사이드 이미지 압축 (용량 줄이기) 도구를 사용하는 것이 좋다. 파일이 단 1바이트도 외부 서버로 업로드되지 않으므로 사진에 포함된 촬영 위치나 기기 정보(EXIF)가 유출될 위험이 없고, 오프라인 환경에 가까운 속도로 즉각적인 결과물을 얻을 수 있다. 또한 회원가입이나 결제 없이 무제한으로 사용할 수 있어 대량 작업에도 적합하다.
- 변환하고 싶은 사진이나 그래픽 파일을 브라우저 화면에 그대로 끌어다 놓는다.
- 앞서 확인한 기준에 따라 목표 품질을 선택한다. 일반적인 웹용 사진이라면 품질을 75~85% 정도로 설정해도 시각적인 화질 저하를 느끼기 어렵다.
- 불필요한 메타데이터가 남아있다면 제거 옵션을 활성화한 뒤 압축을 진행한다.
- 변환된 결과물을 다운로드하여 바로 웹에 적용한다.
이처럼 콘텐츠 특성에 맞는 포맷을 고르고 적절한 품질로 압축하는 과정만 거쳐도, 웹페이지의 핵심 성능 지표인 LCP 점수를 손쉽게 개선할 수 있다.