이미지 확장자별 특징 정리

2021. 8. 29. 01:44웹 프론트엔드 개발 노하우/기타

이 글은 아래의 링크의 내용을 바탕으로 작성되었습니다.

https://www.youtube.com/watch?v=Z_28syzkv-0

 

최근엔 초월적인 압축률을 자랑하는 webp 이미지 형식이 등장하면서 웹에서 이 형식의 이미지를 활용하는 경우가 많아졌습니다. 하지만 무작정 webp 이미지를 사용해도 괜찮은 걸까요? 그러고보니 이미지 형식은 png 도 있고, jpg 도 있고 정말 많은 형식들이 있는데 이들의 차이점은 무엇이고 어떤 이미지가 어떤 경우에 적합하다고 볼 수 있는 것일까요?

 

JPG, JPEG

  • 높은 압축률 (손실이 생길 수 있음)
  • 투명 배경 사용 불가
  • 단조로운 컬러 팔레트

 

이미지 퀼리티가 크게 중요하지 않고 용량을 줄이는데 집중하고 싶을 때 사용합니다.

 

 

PNG

  • 낮은 압축률
  • 투명 배경을 사용 가능
  • 풍부한 컬러 팔레트

 

이미지 퀼리티가 크게 중요할 때 사용합니다.

 

 

Webp

  • 손실 없는 압축이 가능하면서도 엄청난 압축률
  • PNG 처럼 투명 배경 지원, PNG 와 거의 동일한 품질의 컬러 팔레트 제공
  • 구형 브라우저에서는 이 이미지 형식을 지원하지 않음

 

이미지 퀼리티와 용량 모두가 중요할 때 사용합니다. 그러나 구형 브라우저에서는 이미지를 보지 못할 수 있습니다.