이미지 포맷 형식 ( JPG, JPEG, PNG, WEBP )

📌배경

프론트엔드 개발자로 근무하다 보면 여러가지 이미지를 다뤄야 할 때가 있다. 대표적으로 많이 사용되는 이미지 포맷형식으로 

JPG(JPEG), PNG, WEBP, GIF 가 있다. 물론 그 외에도 엄청 많긴하지만 대표적으로 사용되는 몇가지를 정리하려고 한다.

📌JPG (JPEG)

- joint photographic experts group 의 약자로 손실 압축 포맷이다.

- 압축 손실 포맷이지만 크기가 작기 때문에 웹에서 널리 쓰인다.

- 용량 대비 이미지 품질이 괜찮다. 

- 압축률을 높이면 파일 크기는 작아지지만 이미지 품질은 더욱 떨어진다. 

- 투명도는 지원 하지 않는다. 

📌PNG 

- Portable Network Graphic 의 약자로 jpg보다 용량이 크지만 비손실 압축 방식으로 품질 저하가 없다

- 알파 채널을 이용한 투명층을 지원해서 이미지 합성 등에 많이 사용된다.

📌GIF

- Graphics Interchange Format의 약자로 1987년에 개발된 포맷

- 움직이는 애니메이션을 표현할 수 있기 때문에 움짤로 많이 사용됨

- 비손실 압축 알고리즘을 사용하는 무손실 압축 포맷이기에 압축과정에서 손실은 발생하지 않는다.

- 포맷 자체가 256 색상 밖에 지원하지 않으므로 256 색상보다 섬세하게 색을 표현해야할 경우 부적합하다.

📌webP

- 손실/비손실 압축 이미지 파일을 위한 이미지 포맷이다.

- 2010년에 만들어진 비교적 최신에 나온 형식이기에 구형 브라우저에서 호환이 안될 수 있음 

- 알파 채널을 이용한 투명층을 지원한다.

- gif, png, jpeg 포맷 모두 대체할 수 있다. 

- 손실 압축을 사용할 경우 jpeg 포맷보다 30% 정도 파일 크기가 작다

- 무손실 압축을 사용할 경우도 png 포맷보다 20~30% 정도 파일 크기가 작다

- gif처럼 움직이는 영상을 지원하는데 gif 대비 압축률이 높아 파일 크기가 작고 색상 수에 제한이 없으므로 색상이 깨지는 일도 없다.

📌정리

위 내용을 표로 정리해 봤다.