GIF (Graphics Interchange Format)
특별한 플러그인 없이 바로 쓸 수 있는 간단함때문에 수십년동안 웹에서 가장 널리 사용되었던 포맷. 간단한 애니매이션이 가능하기 때문에 지금은 짤을 만들 때 주로 사용하는 것 같다.
최대 256개의 색을 가지는 팔레트를 만들어 두고, 각 픽셀에는 팔레트의 인덱스를 나타내는 8비트 값을 저장한다.
특징
- 무손실 압축
- 투명도를 지원하지 않는다
- 간단한 이미지 또는 애니메이션에 적합
JPEG (Joint Photographic Experts Group image)
현재 웹에서 가장 많이 사용되고 있는 포맷. JPEG는 사실 파일 포맷이라기 보다는 사진을 압축하는 방법을 의미한다.
특징
- 손실 압축
- 하지만 파일 크기가 작다
- 압축률을 높일수록 파일 크기는 작아지지만, 이미지 품질은 떨어진다
- 사진같은 이미지에 적합하며 도형, 차트와 같은 경계가 뚜렷한 이미지엔 적합하지 않다
PNG (Portable Network Graphics)
GIF 포맷의 특허 문제와 기능 개선을 위해 만들어졌다고 한다.
특징
- 무손실 압축
- 컬러 팔레트, 그레이스케일, 풀 컬러 방식 모두 지원한다
- 투명도 지원
- GIF에 비해 압축률이 좋다
- 애니메이션은 지원하지 않는다
- JPEG보다 파일 크기는 크지만, 이미지가 덜 뭉개진다
- 그러므로 경계가 뚜렷한 이미지에 비교적 더 적합하다
APNG (Animated Portable Network Graphics)
애니메이션을 지원하기 위해 PNG를 확장한 포맷
특징
- PNG의 특징과 동일
- 애니메이션을 만들기에 가장 이상적인 포맷
- APNG를 지원하지 않는 브라우저에서는 첫 프레임만 보여준다. 즉, 정적 이미지로 보인다.
WebP
구글이 2010년에 발표한 이미지 포맷으로, JPEG를 대체하기 위해 만들어졌다고 한다. 웹사이트의 트래픽 감소 및 로딩 속도 단축을 겨냥한 것으로, 주로 사진 이미지 압축 효과가 높은 것으로 알려졌다.
특징
- 손실/비손실 압축 모두 가능
- 손실 압축의 경우 JPEG에 비해 파일 크기가 25~35%정도 더 작음
- 비손실 압축의 경우 PNG에 비해 파일 크기가 26%정도 더 작음
- 애니메이션 기능 지원
- 일반적인 사진의 경우 가장 적합한 포맷
참조
https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
https://ko.wikipedia.org/wiki/WebP
https://ko.wikipedia.org/wiki/APNG
https://ko.wikipedia.org/wiki/PNG
https://ko.wikipedia.org/wiki/JPEG
https://ko.wikipedia.org/wiki/GIF
Engineer