PNG JPG SVG WebP GIF characteristic, pros and cons

웹 환경에서 이미지는 전체 페이지 용량의 큰 비중을 차지하기 때문에, 상황에 맞는 포맷을 선택하는 것이 개발자의 핵심 역량 중 하나입니다.

각 파일 형식의 특징과 현재 모던 웹의 흐름을 정리해 드릴게요.

---

1. 주요 이미지 포맷 비교

포맷	특징	장점	단점	주요 용도
JPG (JPEG)	손실 압축 방식	사진처럼 색상이 다양한 이미지에 최적화, 용량이 작음	투명 배경 불가능, 압축 반복 시 화질 저하	실사 사진, 배경 이미지
PNG	무손실 압축 방식	투명 배경(Alpha) 지원, 문자나 로고가 선명함	사진의 경우 JPG보다 용량이 훨씬 큼	로고, 아이콘, 투명도가 필요한 이미지
GIF	256색 제한	짧은 애니메이션(움짤) 가능, 투명 배경 지원	색상 표현 한계로 화질이 낮고 용량이 비효율적	간단한 배너 애니메이션, 유머 짤
SVG	벡터(Vector) 방식	아무리 확대해도 깨지지 않음, 코드로 제어 가능	복잡한 사진 표현 불가, 파일이 커지면 연산 부담	로고, 아이콘, 인포그래픽
WebP	구글 제작(차세대)	JPG/PNG보다 용량이 30% 이상 작음, 투명/애니메이션 지원	구형 브라우저(IE 등)에서 지원 안 함	모던 웹의 거의 모든 이미지

---

2. 모던 웹의 트렌드와 전략

현재 웹 개발 현장에서는 다음과 같은 방식이 표준으로 자리 잡고 있습니다.

WebP로의 전환

이제 대부분의 모던 브라우저가 WebP를 완벽히 지원하기 때문에, 기존의 JPG와 PNG를 WebP로 변환하여 사용하는 것이 기본입니다.

똑같은 화질에 용량만 획기적으로 줄어들어 페이지 로딩 속도가 빨라지기 때문입니다.

SVG의 활용 극대화

고해상도 디스플레이(Retina 등)가 보편화되면서, 조금만 확대해도 깨지는 비트맵(PNG) 대신 SVG를 아이콘과 로고에 적극 사용합니다.

SVG는 텍스트 형태의 코드라 압축률이 좋고, CSS나 JavaScript로 색상이나 크기를 자유롭게 바꿀 수 있다는 강력한 장점이 있습니다.

하위 호환성 대응 (<picture> 태그)

최신 포맷인 WebP를 지원하지 않는 일부 환경을 위해, 브라우저가 스스로 판단해서 최적의 파일을 골라가게 하는 코드를 작성합니다.

HTML

 

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="설명">
</picture>

브라우저가 WebP를 지원하면 위쪽 파일을, 아니면 아래쪽 JPG를 불러옵니다.

---

💡 실무자의 시선

실무에서는 단순히 포맷만 정하는 것이 아니라 '최적화' 단계까지 고려해야 합니다.

• 이미지 다이어트: TinyPNG 같은 도구를 사용하여 파일의 메타데이터를 제거하고 용량을 최소화한 뒤 배포합니다.
• CDN 활용: 사용자의 위치에 따라 가장 가까운 서버에서 최적화된 포맷으로 이미지를 내려주는 이미지 전용 CDN 서비스를 사용하기도 합니다.
• 애니메이션의 변화: 화질이 낮고 용량이 큰 GIF 대신, 최근에는 **Lottie(JSON 방식)**나 소리 없는 MP4 비디오를 사용하여 훨씬 고화질의 애니메이션을 가볍게 구현합니다.

---

이미지 포맷 선택은 '사용자의 데이터'와 '시각적 경험' 사이의 균형을 잡는 일입니다.

---