JPG, PNG, WebP... 도대체 뭘 써야 할까? (이미지 포맷 완전 정복)

웹사이트 성능 최적화의 첫걸음은 이미지 최적화입니다.

하지만 JPG, PNG, GIF, SVG, WebP 등 포맷이 너무 많아 무엇을 선택해야 할지 고민될 때가 많습니다.

각 포맷의 특징과 장단점을 명확히 정리해 드립니다.

1. JPG (JPEG): 사진의 제왕

• 특징: 손실 압축(Lossy Compression) 방식을 사용합니다.
• 장점: 사람이 인지하지 못하는 색상 정보를 제거하여 파일 용량을 획기적으로 줄입니다. 사진처럼 색상이 풍부하고 그라데이션이 많은 이미지에 적합합니다.
• 단점: 압축률을 높이면 '깍두기 현상(Block Artifacts)'이 발생하며 화질이 저하됩니다. 투명 배경을 지원하지 않습니다.

2. PNG: 투명 배경과 무손실

• 특징: 무손실 압축(Lossless Compression) 방식을 사용합니다.
• 장점: 원본 이미지를 손상 없이 그대로 보존합니다. **투명 배경(Alpha Channel)**을 지원합니다. 글자가 많은 이미지나 로고, 아이콘 등에 적합합니다.
• 단점: 사진 같은 복잡한 이미지를 저장하면 JPG보다 용량이 훨씬 커집니다.

3. WebP: 구글이 제안한 차세대 표준

• 특징: 구글이 웹 성능을 위해 개발한 포맷으로, 손실 압축과 무손실 압축을 모두 지원합니다.
• 장점:
  • 동일 화질 대비 JPG보다 25~34% 작습니다.
  • 동일 화질 대비 PNG보다 26% 작습니다.
  • 투명 배경과 애니메이션(움짤)까지 모두 지원합니다.
• 단점: 아주 구형 브라우저(IE 등)에서는 지원하지 않을 수 있습니다. (하지만 현대 브라우저는 거의 다 지원합니다.)

요약 가이드

1. 사진, 풍경, 인물: -> JPG (또는 WebP)
2. 로고, 아이콘, 텍스트가 포함된 이미지, 투명 배경: -> PNG (또는 WebP)
3. 움직이는 이미지: -> GIF (하지만 용량이 크므로 MP4나 WebP 추천)
4. 최신 웹사이트: -> 무조건 WebP를 우선 고려하세요.

결론

적절한 이미지 포맷 선택만으로도 웹사이트의 로딩 속도를 절반으로 줄일 수 있습니다.

가능하면 WebP를 기본으로 사용하고, 호환성을 위해 <picture> 태그를 사용하여 JPG/PNG를 대체 수단(Fallback)으로 제공하는 것이 베스트 프랙티스입니다.