차이점을 정확히 알기 위해서는 4개 (2개씩 짝지어서) 개념을 우선 알고 있어야 한다.
- Lossless / Lossy 압축방식
Lossless는 이미지를 압축해도 이미지의 Quality는 손상되지 않는 것을 말합니다. Lossy는 이미지를 압축하여 크기를 줄이고 Quality도 손상됩니다. Lossy 방식으로 계속 압축해나가면 Quality는 계속해서 손상됩니다.
- Indexed Color / Direct Color 색상 복잡도
Indexed는 생성자에 의해 미리 지정된 색상들만 사용된 이미지를 말한다. 해당 이미지 셋을 주로 Color Map이라고 부르고, 256가지 색인 경우가 대부분이다. Direct는 생성자에 의해 지정된 색상이 아닌 수천개의 색상들을 사용한 이미지이다.
그럼 정확히 무엇이 다른지 설명해 봅니다.
[BMP] - Lossless / Indexed, Direct
BMP는 Bit의 Map이다. 오래된 포맷이고 압축을 전혀 하지 않아서 파일 크기가 굉장히 크다. 크기때문에 웹보다는 윈도우 프로그래밍이나 모바일 초기 프로그래밍 때 쓰였다고 한다. 디코딩할게 별로 없어서 속도가 매우 빠르다는 장점도 있다.
[JPEG] - Lossy / Direct
JPEG 이미지는 사진 이미지를 최대한 상세하고 적은용량으로 표현하기 위해 사람의 눈으로는 인식할 수 없는 정보를 삭제한 방식을 말합니다. Lossy 압축 방식을 때문에 저장을 반복하다보면 점점 많은 데이터가 손실되게 됩니다. Direct 색상 팔레트를 가지기 때문에 사진 이미지에 적합하지만, Lossy 압축 방식을 사용하기 때문에 로고나 "정확한" 선을 표현하기에는 적합하지 않습니다. 만약 확대한다면 찌글찌글한 선을 가지고 있을 겁니다.
JPEG은 사진이나 그래디언트 색상을 표현할 때 좋습니다. iOS에서는 Launch Screen의 이미지는 JPEG도 괜찮겠습니다.
[PNG]
PNG는 상대적으로 새로운 형태의 이미지 포맷입니다. JPEG과 다른 점은 색상과 투명도 적용 여부입니다. PNG는 PNG-8, PNG-24 두 개로 나뉩니다.
[PNG-8] - Lossless / Indexed
GIF의 훌륭한 대체품으로 각광받고 있지만, 애니메이션 지원이 안되며(Fire Fox는 됨) IE6 같은 오래된 브라우저에서는 지원이 안되고 포토샵 등의 소프트웨어에서 아주 낮은 품질을 보여줍니다. Indexed Color Depth를 가지기 때문에 256개의 색상만 사용합니다(GIF와 같음).
PNG-8은 GIF에 비해 투명도를 적용할 수 있다는 장점을 제외하고는 다른 것이 없습니다.
[PNG-24] - Lossless / Direct
Lossless 압축방식(인코딩방식)과 Direct Color Depth를 결합한 포맷으로, PNG가 이미지를 압축한다는 것을 제외하면 BMP와 많은 유사성을 가집니다. 이미지를 압축하기 때문에 BMP보다 용량은 적습니다.
하지만 PNG-24는 JPEG/GIF/PNG-8 보다는 용량이 큽니다. 용량에 따라 적절한 옵션을 선택해야 할 것입니다.
PNG-24가 수천개의 색상을 사용하는 압축방식을 채택하고 있지만 JPEG 이미지를 대체하지는 않습니다. PNG-24로 저장된 사진 파일은 JPEG 이미지보다 보통 5배 정도 큽니다. 하지만 시각적으로 보이는 개선은 그리 크지 않습니다.
PNG-8처럼 투명도 적용이 가능하기 때문에 고품질의 이미지가 필요한 경우 적합합니다.
PNG JPG(JPEG) SVG 비손실압축 방식 손실압축 방식 - 데이터 손실 XML 기반 고품질 이미지가 필요한 곳 웹에서 널리 쓰임 벡터 그래픽 표현 투명도 적용 가능 투명도 적용 안됨 트루 컬러 사용 RGB 색상 사용 크기 큼 크기 작음 크기 작음 (로딩 시간은 오래 걸림) Reference: https://soeunlee.medium.com/web에서-png-gif-jpeg-svg-중-어떤-것을-사용하면-좋을까요-6936300e776 e http://stackoverflow.com/questions/2336522/png-vs-gif-vs-jpeg-vs-svg-when-best-to-use