JPEG vs PNG vs BMP vs GIF vs SVG


40

이러한 형식 중 어느 것이 동일한 화질의 메모리를 위해 더 적은 메모리를 필요로하는지, 그리고 이러한 형식의 주요 차이점은 무엇인지 알고 싶습니다.


15
Btw, JPG 및 JPEG는 모두 같은 것을 참조 하므로 (예 : en.wikipedia.org/wiki/JPEG 참조 ) 제목을 약간 단순화 할 수 있습니다.
Jonik

1
내 답변이 귀하의 원래 질문에 어떻게 대답하지 못하는지, 선택한 답변이 어떻게 수행되는지 잘 모르십니까? :-/
Django Reinhardt

4
>이 형식 중 어느 것이 더 적은 메모리를 필요로 하는가? "더 적은 메모리"를 정의하십시오. 디스크 공간을 덜 차지한다는 의미입니까? (JPEG는 사진, PNG 및 / 또는 GIF는 스크린 샷입니다.) 압축 파일의 메모리 공간이 줄어 듭니까? (. 디스크 공간과 동일)는 디코딩 된 이미지가 메모리에 더 적은 공간을 차지하지 의미합니까 ( 없음 , 그들은 원시 디코딩 할 때 모든 본질적으로 동일합니다.)
Synetech

답변:


54

에서 TIFF, GIF, JPG, JPEG, PNG, 그리고 BMP 파일의 차이점은 무엇입니까?

BMP- 비트 맵. 이것은 아마도 내가 기억할 수있는 첫 번째 유형의 디지털 이미지 형식 일 것입니다. 그 당시 컴퓨터의 모든 그림은 BMP 인 것처럼 보였습니다. Windows XP에서 Paint 프로그램은 이미지를 BMP로 자동 저장합니다. 그러나 Windows Vista 이상에서는 이제 이미지가 JPEG로 저장됩니다. BMP는 다른 많은 파일 형식의 기본 플랫폼입니다.

JPG / JPEG- (Joint Photographic Experts Group) Jpeg 형식은 컬러 사진 또는 블렌드 나 그라데이션이 많은 사진에 사용됩니다. 가장자리가 예리하지 않고 고품질로 저장하지 않으면 가장자리가 약간 흐려지는 경향이 있습니다. 이 형식은 디지털 카메라의 발명에 널리 보급되었습니다. 전부는 아니지만 대부분의 디지털 카메라는 사진을 컴퓨터에 Jpeg 파일로 다운로드합니다. 분명히 디지털 카메라 제조업체는 궁극적으로 공간을 덜 차지하는 고품질 이미지의 가치를 봅니다.

GIF- (Graphics Interchange Format) GIF 형식은 텍스트, 선화, 스크린 샷, 만화 및 애니메이션에 가장 적합합니다. GIF는 총 256 색 이하로 제한되므로 GIF 이미지는 상대적으로 작습니다. 일반적으로 웹 페이지를 빠르게로드하는 데 사용됩니다. 또한 웹 페이지에 훌륭한 배너 또는 로고를 만듭니다. 애니메이션 사진은 일련의 정적 이미지로 GIF 형식으로 저장할 수도 있습니다. 예를 들어, 깜박이는 배너는 Gif 파일로 저장됩니다.

PNG- (Portable Networks Graphics)이 무손실 형식은 최고의 이미지 형식 중 하나입니다. 모든 웹 브라우저 또는 이미지 소프트웨어와 항상 호환되는 것은 아니지만 요즘에는 웹 사이트에 사용하기에 가장 적합한 이미지 형식입니다. 로고와 스크린 샷에 .png를 사용합니다. 최종 압축 크기는 이미지 편집기마다 다르지만 가장 놀라운 능력 중 하나는 이미지를 손실없이 (픽셀 손실없이) 압축 할 수 있다는 것입니다.

TIFF- (Tagged Image File Format)이 파일 형식은 1992 년 이후로 업데이트되지 않았으며 현재 Adobe에서 소유하고 있습니다. 하나의 파일에 이미지와 데이터 (태그)를 저장할 수 있습니다. TIFF는 압축 할 수 있지만 표준 JPEG 파일과 달리 손실없는 압축을 사용하는 TIFF 파일 (또는 없음)을 편집하여 다시 저장할 수 있기 때문에 TIFF 파일을 유용한 이미지 아카이브로 만드는 무손실 형식으로 이미지 데이터를 저장하는 기능입니다. 화질을 잃지 않고 절약. 이 파일은 일반적으로 스캔, 팩스, 워드 프로세싱 등에 사용됩니다. jpeg는 품질이 우수하고 공간을 덜 차지하기 때문에 더 이상 디지털 사진에 사용되는 일반적인 파일 형식이 아닙니다.


1
"해킹"이 없으면 IE6는 PNG 파일에서 알파 투명도를 지원하지 않습니다. 즉 반투명 한 투명 영역
Josh Comley

2
... 그리고 놀라운 사람들이 여전히 IE6 ( tinyurl.com/56kp )을 사용합니다. 그리고 MS는 2014 년까지 지원하고 싶습니다! :( ( tinyurl.com/qvdyn5 )
Josh Comley

9
BMP : 이것은 다른 파일 형식의 기초 가 아닙니다 . 내가 아는 한 BMP 헤더와 파일 구조는 다른 형식과 공유되지 않습니다 (예 : TIFF와 달리). JPEG : 디지털 카메라가 널리 보급되기 전에 웹 방식으로 만들어졌습니다. 또한 많은 디지털 카메라를 사용하면 공급 업체별 내용이 있지만 TIFF 인 "원시"형식을 저장할 수 있습니다. GIF : 이미지 당 256 색으로 제한되지 않고 프레임 당 256 색으로 제한됩니다 ( en.wikipedia.org/wiki/Graphics_Interchange_Format#True_color 참조 ).
Joey

4
TIFF : 디지털 카메라의 원본 이미지 (일반적으로 촬영하지 않은 이미지)의 일반적인 파일 및 컨테이너 형식입니다. TIFF은 (따라서 거의 임의의 데이터를 허용 태그 는 JPEG 등으로 LZW (GIF), LZ77 (PNG)에서 임의의 압축 방법을 지원하는 것이하는 수단 그것에). 또한 TIFF는 하나의 파일 에 여러 이미지 (페이지) 를 허용 합니다.
Joey

4
대답은 역사와 일반적인 사용의 관점에서 그림 형식의 차이에 대답하는 데 능숙하지만, 원래의 대답은 상대적인 크기와 품질에 대해서도 물었습니다.
camster342

76

lbrandy.com의 xkcd 스타일 :

대체 텍스트


4
잘 지점 :) 보여줍니다 (I 누구 옹호 등 본 적이 경우에도 정책 '항상 JPEG를!')
Jonik

7
+1이 그림은 jpeg 문제를 잘 보여주기 때문에 ...
Johan

5
나는 두 배로 투표 할 수 있으면 좋겠다! 나는 이것을 으스스한 jpeg를 보내는 모든 사람에게 보낸다!
Tim Büthe

3
© 2008 루이 브랜디. 판권 소유....?
Arjan

3
페이스 북에는 예를 들어 '항상 JPEG'정책이 있습니다. 멋진 99KB 무손실 PNG 이미지를 업로드하면 Facebook에서이를 175KB JPEG로 변환합니다.
Paul

63

몇 가지 핵심 요소를 알고 있어야합니다 ...

먼저, LosslessLossy 의 두 가지 압축 유형이 있습니다.

  • 무손실 은 이미지가 더 작게 만들어 지지만 품질에는 해가되지 않음을 의미합니다.
  • 손실 은 이미지가 작지만 품질이 떨어짐을 의미합니다. 이미지를 Lossy 형식으로 반복해서 저장하면 이미지 품질이 점점 더 나빠질 수 있습니다.

색인 색상직접 색상 과 같은 다른 색상 심도 (팔레트)도 있습니다 .

  • 색인 은 이미지가 색상 맵이라는 무언가에 제한된 수의 색상 (보통 256)을 작성자가 제어 할 수 있음을 의미합니다.
  • 직접 은 저자가 직접 선택하지 않은 수천 가지 색상을 저장할 수 있음을 의미합니다.

BMP- 무손실 / 인덱싱 및 직접

이것은 오래된 형식입니다. 무손실 (저장시 이미지 데이터가 손실되지 않음)이지만 압축이 거의 또는 전혀 없으므로 BMP로 저장하면 파일 크기가 매우 커집니다. Indexed와 Direct의 팔레트를 가질 수 있지만 약간의 위안입니다. 파일 크기가 너무 커서 아무도이 형식을 실제로 사용하지 않습니다.

장점 : 실제로는 없습니다. BMP가 뛰어나거나 다른 형식으로 더 잘 수행되지 않는 것은 없습니다.

BMP 대 GIF


GIF- 무손실 / 색인 만

GIF는 무손실 압축을 사용하므로 이미지를 계속 저장하고 데이터를 잃지 않을 수 있습니다. 파일 크기는 실제로 압축이 사용되기 때문에 BMP보다 훨씬 작지만 인덱스 팔레트 만 저장할 수 있습니다. 이는 대부분의 사용 사례 에서 파일에 최대 256 가지 색상 만있을 수 있음을 의미 합니다. 그것은 꽤 적은 양으로 들립니다.

GIF 이미지는 애니메이션이 가능하고 투명도를 가질 수 있습니다.

장점 : 로고, 선 그리기 및 기타 작은 이미지가 필요합니다. 웹 사이트에만 실제로 사용됩니다.

GIF 대 JPEG


JPEG- 손실 / 직접

JPEG 이미지는 육안으로 알 수없는 정보를 제거하여 세부적인 사진 이미지를 가능한 한 작게 만들도록 설계되었습니다. 결과적으로 손실 형식이며 동일한 파일을 반복해서 저장하면 시간이 지남에 따라 더 많은 데이터가 손실됩니다. 수천 가지 색상의 팔레트가 있으므로 사진에는 적합하지만 손실이 많은 압축은 로고와 선 그리기에 좋지 않다는 의미입니다.

효능 : 사진. 또한 그라디언트.

JPEG와 GIF


PNG-8- 무손실 / 색인

PNG는 최신 형식이며 PNG-8 (인덱스 버전의 PNG)은 GIF를 대체하기에 좋습니다. 그러나 슬프게도 몇 가지 단점이 있습니다. 먼저 GIF와 같은 애니메이션을 지원할 수 없습니다 (물론 가능하지만 모든 브라우저에서 지원하는 GIF 애니메이션과 달리 Firefox 만 지원하는 것으로 보입니다). 둘째, IE6과 같은 구형 브라우저에서 지원 문제가 있습니다. 셋째, Photoshop과 같은 중요한 소프트웨어는 형식 구현이 매우 불량합니다. PNG-8은 GIF와 같은 256 색만 저장할 수 있습니다.

장점 : PNG-8이 GIF보다 나은 점은 알파 투명도를 지원하는 것입니다.

PNG-8 vs GIF

중요 참고 : Photoshop은 PNG-8 파일에 대해 알파 투명도를 지원하지 않습니다. (Photoshop, 젠장!) 투명성을 유지하면서 Photoshop PNG-24를 PNG-8 파일로 변환하는 방법이 있습니다. 한 가지 방법은 PNGQuant 이고 다른 방법은 Fireworks로 파일을 저장하는 것 입니다.


PNG-24- 무손실 / 직접

PNG-24는 무손실 인코딩과 직접 색상 (JPEG와 같은 수천 가지 색상)을 결합한 훌륭한 형식입니다. PNG는 실제로 이미지를 압축하므로 파일 크기가 훨씬 작다는 점을 제외하면 BMP와 매우 비슷합니다. 불행하게도 PNG-24 파일은 여전히 ​​JPEG, GIF 및 PNG-8보다 훨씬 큽니다. 실제로 파일을 사용하고 싶은지 고려해야합니다.

PNG-24는 압축하는 동안 수천 가지 색상을 허용하지만 JPEG 이미지를 대체하지는 않습니다. PNG-24로 저장된 사진은 가시적 인 품질이 거의 향상되지 않으면 서 동일한 JPEG 이미지보다 5 배 이상 커질 수 있습니다. (물론 파일 크기에 대해 걱정하지 않고 최상의 이미지를 얻으려는 경우 바람직한 결과 일 수 있습니다.)

PNG-8과 마찬가지로 PNG-24도 알파 투명도를 지원합니다.


SVG - 무손실 / 벡터

현재 인기가 높아지고있는 파일 형식은 SVG이며, 이는 벡터 파일 형식 이라는 점에서 위의 형식 과 다릅니다 (위의 모든 래스터 ). 이것은 실제로 픽셀 대신 선과 곡선으로 구성되어 있음을 의미합니다. 벡터 이미지를 확대해도 여전히 곡선 또는 선이 나타납니다. 래스터 이미지를 확대하면 픽셀이 나타납니다.

예를 들면 다음과 같습니다.

PNG vs SVG

SVG 대 PNG

이는 SVG가 Retina 화면에서 또는 다른 크기로 선명도를 유지하려는 로고 및 아이콘에 적합하다는 것을 의미합니다.

또한 SVG 파일은 XML을 사용하여 작성되므로 원하는 경우 텍스트 편집기에서 열어서 편집 할 수 있습니다. 예를 들어, 자바 스크립트를 사용하여 웹 사이트에서 SVG 아이콘의 색상을 텍스트처럼 (예 : 두 번째 이미지가 필요하지 않은) 색상으로 변경할 수 있습니다.

도움이 되길 바랍니다.


좋은 그림. 압축으로 인한 아티팩트를 조심하십시오. 비디오 압축 형식과 같은 JPEG는 빨간색 영역이 가장자리에서 "번지는"문제가 있다고 생각합니다.
James P.

1
PNG가 애니메이션을 지원하지 않는 것이 잘못되었습니다. PNG는 잘 할 수 있으므로 대부분의 뷰어와 브라우저는 지원하지 않습니다. en.wikipedia.org/wiki/APNG Firefox는이를 지원합니다. people.mozilla.com/~dolske/apng/demo.html
Rob

1
@ DjangoReinhardt 나는 당신이 당신의 대답에 예를 포함하고 있다는 것을 알고 있지만 SVGs vs PNG와 관련하여 어떤 상황에서 PNG보다 큰 SVG (파일 크기)를 볼 수 있습니까?
한나

1
@Johannes 좋은 질문입니다. SVG가 특히 복잡하거나 잘못 저장되면 SVG의 단점이 있습니다.하지만 파일 형식이 아니라 저자의 잘못입니다. SVG가 항상 PNG보다 작거나 크기가 같다고 생각하지만 이것에 대답하는 것을 추가하려고 노력할 것입니다.
Django Reinhardt

1
또 다른 재미있는 사실 : BMP 파일은 압축하면 PNG와 비슷한 크기를 갖습니다.
jiggunjer

28

기존 답변에는 기술 데이터가 거의 포함되어 있지 않으므로 여기에 포함하겠습니다.

  • JPEG : 최대 24 비트 컬러 (아마도 더 많습니까?), 가변 (보통 높음) 압축, 손실, 알파 지원 없음
  • PNG : 최대 48 비트 컬러, 보통 압축, 무손실, 알파 지원
  • BMP : 최대 24 비트 컬러, 압축률이 거의없고 무손실 알파 지원
  • GIF : 최대 8 비트 컬러, 적은 압축, 무손실, 투명도 지원, 애니메이션 지원

색심도

  • 8 비트 색 == 256 색
  • 24 비트 색상 == 16,777,216 색상
  • 48 비트 색상 == 281,474,976,710,656 색상

대부분의 컴퓨터 모니터는 24 비트 색 농도로 실행됩니다. 인간의 눈은 그 많은 색을 구별 할 수 있습니다. 추가 색상 심도는 대부분 센서의 정보를 유지하여 사진을 조작 할 때 더 많은 데이터를 처리 할 수 ​​있도록하는 것입니다. 사진을 8 비트 색상으로 표현하려고하면 입자가 거칠어집니다.

압축

이것은 기본적으로 최종 파일의 크기를 나타냅니다. 압축률이 높을수록 파일 크기가 작아집니다. 그러나 JPEG는 데이터를 버림으로써 작은 파일 크기를 얻습니다. 압축되지 않은 원본 데이터를 다시 가져올 수 없기 때문에이를 "손실"압축이라고합니다. 압축률은 고 대비 가장자리가 드문 사진에 최적화되어 있습니다. 다른 답변에서 언급했듯이 사진 이외의 다른 것은 좋지 않습니다.

알파 / 투명도

알파는 투명도를 의미하지만, 투명성이 두 개 이상 있음을 의미합니다. GIF는 투명 픽셀을 정의 할 수 있지만 불투명하거나 100 % 투명하며 "투명"은 256 색 중 하나로 사용됩니다. PNG 및 BMP는 각 픽셀을 컬러 유리처럼 불투명, 투명 또는 부분적으로 투명하게 표시 할 수 있습니다. PNG는 실제로 최대 65,536 레벨을 가질 수 있지만 가장 일반적으로 256 레벨의 투명도가 있습니다. JPEG는 투명도를 지원하지 않습니다.

생기

실제로 이러한 형식 중 GIF 만 애니메이션을 지원합니다. PNG (MNG, APNG) 및 JPEG (MJPEG)를 사용하는 애니메이션에 대한 사양이 있지만 널리 지원되지는 않습니다. (APNG는 최신 버전의 Firefox 및 Opera에서 작동합니다.) 실제로 웹 페이지에 표시되는 대부분의 애니메이션은 Flash로 구현됩니다.


APNG는 많은 지원을 받고 있습니다.
Phoshi

충분합니다. 나는 눈치 채지 못했다.
wfaulk 2009

대부분의 최신 브라우저는 지원하지만 거의 알려져 있지 않습니다. IE8은 그것을 지원하지 않습니다, 나는 생각하지 않습니다 (하지만 PNG로 읽을 수 있으므로 첫 번째 프레임을 표시합니다)
Phoshi

훌륭한 사고 처리 ..
InfantPro'Aravind '

25
  • 이미지에 색상이 거의없는 경우 GIF를 사용하십시오 (예 : 아이콘). 광고 배너와 같은 애니메이션 이미지에도 사용할 수 있습니다.
  • 이미지에 사진과 같은 많은 색상이있는 경우 JPG를 사용하십시오. JPEG도 마찬가지입니다.
  • 압축하지 않고 이미지를 저장하려면 BMP를 사용하십시오. 훨씬 더 큰 파일 크기!
  • 웹에 이미지를 게시하고 최신 표준을 준수하려면 PNG를 사용하십시오. 장점 : GIF와 JPG를 현대적으로 대체하는 데 적합하며 공개 표준이며 투명성을 허용합니다. 단점 : 이전 소프트웨어에서는 지원되지 않으며 파일 크기는 비슷한 GIF 또는 JPG보다 클 수 있습니다.

3
각각의 사용시기에 대한 실질적인 고려 사항에 +1
Andrew Coleson

4
PNG 사용에주의하십시오. 무손실 형식으로 파일 크기 때문에 일반적으로 사진 등에 적합하지 않습니다. 모든 목적을위한 "현대 교체"는 아닙니다. JPG에서 PNG로 코드 변환하는 것은 정말 어리 석습니다.
Paul McMillan

@Paul-나는 모든 목적, 특히 사진에 유용하지는 않지만 웹 그래픽에 사용될 때 JPG를 대체한다고 동의합니다.
Torben Gundtofte-Bruun

2
요즘에는 BPM이 필요하다고 생각하지 않습니다.
Arjan

1
PNG는 거의 항상 GIF보다 작습니다. 압축 방식이 우수합니다. 같은 모양의 GIF보다 크면 일반적으로 소프트웨어가 까다 롭습니다 (예 : CS2 이전의 Photoshop). 팔레트 (24 비트가 아님) PNG를 사용하고 PNG 최적화 프로그램 ( imageoptim.pornel.net)으로 수정하면 GIF의 대역폭을 다시 낭비하지 않을 것입니다.
Kornel

13

여기에 이미지 설명을 입력하십시오


BMP :

  • 이전 형식. 데이터 손실이 없습니다.
  • 압축되지 않음-각 픽셀의 값을 저장합니다. 따라서 동일한 크기의 그림은 동일한 파일 크기 (킬로바이트 / 메가 바이트)를 갖습니다. 예를 들어 800 × 600 BMP 이미지는 항상 인기있는 WinXP 벽지 "Bliss"롤링 힐과 같은 1.37MiB입니다.
  • 투명도 / 반투명도 지원되지 않습니다
  • 아무것도 권장하지 않습니다

JPG :

  • 압축 손실.
  • 손실량은 예를 들어 그래픽을 만들고 Photoshop에서 저장하는 동안 설정할 수 있습니다.
  • 더 높은 품질로 저장하면 색상 / 깊이 손실이 적고 파일 크기가 커지고 그 반대도 마찬가지입니다.
  • 투명도 / 반투명도 지원되지 않습니다
  • 그래픽 / 아이콘이 아닌 사진에 권장

PNG :

  • 무손실 압축 (예, WORDS / 월드 중 최고)
  • 투명성과 반 투명성을 지원합니다.
  • 사진이 아닌 정적 그래픽 / 아이콘에 권장

GIF :

  • 투명성을 지원하지만 반투명은 지원하지 않습니다
  • 애니메이션 그래픽 / 아이콘에만 권장
  • 아마 Harry Potter의 프레임에있는 움직이는 사진은 GIF 일 것입니다 : D

1
좋은 개요. 그러나 왜 표에서 BMP가 "lossless : false"로 표시되어 있습니까? 본문에서 당신은 BMP가 실제로 무손실 임을 IMHO에 정확하게 기술합니다 .
mpy

2
나는 이것이 오래된 스레드라는 것을 알고 답변에 감사드립니다. 그러나 BMP는 선택적으로 매우 단순하고 무손실 RLE 압축으로 압축됩니다.
ysap December

JPEG와 비교하여 파일 크기가 더 큰 경우를 제외하고 PNG가 사진에 권장되지 않는 다른 이유는 무엇입니까? 먼저 오래된 사진을 JPEG 형식으로 스캔 한 다음 손실 된 형식으로 저장된 사진을 스캔한다는 사실을 알고 나중에 PNG로 다시 스캔했습니다.
JAT86

4

BMP는 작은 헤더가있는 원시 비트 또는 Run-length Encoding을 사용 합니다. JPEG는 이산 코사인 변환을 사용합니다 . 다른 압축 / 인코딩 알고리즘에 대해서는 Wikipedia 기사 하단의 블록을 참조하십시오.


나는 PCX를 좋아한다. 첫 번째 프로그램을 위해 어셈블러를 배우기로 결정했을 때 돌아가서 PCX 뷰어를 작성했습니다. 꽤 교육적이었습니다. ( JPG 뷰어를 작성 하지 않았습니다 ). :-D
Synetech

3

간단한 안내 :

  • 사진의 경우 다음을 사용하십시오.
    • 전문 장비가 있고 많은 사후 처리를 원할 경우 카메라 별 원시 형식
    • 그렇지 않은 경우 JPEG (웹에 사진을 게시하려면 원시 형식도 JPEG로 변환해야 함)
  • 날카로운 모서리,가는 선 및 색상이 거의없는 (예 : 스크린 샷 또는 로고)에는 다음을 사용하십시오.
    • 매우 오래된 브라우저 (주로 IE 6)를 지원해야하는 웹 페이지를 수행하거나 간단한 애니메이션을 수행하려는 경우 GIF
    • 그렇지 않으면 PNG
  • 특정 프로그램이 다른 형식을 허용하지 않는 한 BMP를 사용해야 할 이유가 없습니다.

1
IE는 일부 버전 4.x (Mac의 경우 5)부터 PNG를 지원했지만 투명 PNG는 아닙니다.
Arjan

1
IE6는 GIF와 같은 투명도를 가진 투명 PNG도 실제로 지원합니다. 전체 알파를 가진 PNG 지원되지 않습니다.
Kornel

1
실제로 8 비트 PNG 인 경우 알파 투명도 IS가 지원됩니다. 이상하지만 사실입니다.
Django Reinhardt 2016 년
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.