Web에서 PNG , GIF, JPEG , SVG 중 어떤 것을 사용하면 좋을까요?

디자이너 분들과 협업을 하다보면 이런 질문을 주실 때가 있습니다.

이미지를 어떤 걸로 드리면 될까요?

처음에 이 질문을 받았을때, 어떠한 상황에서 각각의 이미지 타입(PNG,GIF,JPEG,SVG)를 사용하면 좋은지 정확히 알지 못해 찾아보게 되었고, 찾아본 내용과 실무에서 어떻게 적용하고 있는지 정리해 보고자 합니다.

이 4가지의 이미지 타입을 알기전에 먼저 알아야 할 몇가지 요소들이 있습니다.

첫번째, Lossless 와 Lossy입니다. 일명 무손실 압축, 손실 압축이라고 하는데요.

• Lossless는 이미지를 압축해도 이미지의 Quaility는 손상 되지 않는 것을 말하고
• Lossy는 이미지를 압축하여 크기를 줄이지만 이미지의 Quaility는 손상되는 것을 말합니다. 만약 이미지를 손실 압축 포맷으로 변환하여 계속해서 저장하게 되면 이미지의 퀄리티는 점점 나빠지게 됩니다.

두번째, Indexed color 와 Direct color입니다.

• Indexed Color는 제작자에 의해 Color Map이라는 곳에 제한된 수의 색상(즉 256가지의 색상)을 가진 palette로만 저장할 수 있는 속성입니다.
• Direct Color는 제작자가 직접 선택하지 않은 수천가지의 컬러를 저장할 수 있는 속성입니다.

그럼 이제 하나씩 알아볼까요?

BMP — Lossless / Indexed and Direct

BMP는 말그대로 Bit 들의 Map이고, 오래된 포맷입니다.압축을 전혀 하지 않는 BMP로 저장하면 아주 큰 사이즈로 저장이 되는데요. Indexed color, Direct color 속성을 가지고 있는게 그나마 위안이라 할 수 있을 것 같습니다. 파일 사이즈가 불필요하게 커서 이 포맷은 웹에서 요즘 많이 사용하지 않습니다.

좋은점: 실제 실무에서도 BMP를 한번도 사용해 본적이 없는데, 시니어 개발자님이 조언해 주신 이야기로는 디코딩할게 별로 없어서 속도가 매우 빠르고, 여러가지 masking 등의 작업에서 편하고 해서, 예전 윈도우 프로그래밍, 모바일 초기 프로그래밍에서는 bmp를 많이 썼다고 합니다. 웹에서는 bmp는 잘 사용되지 않지만, 내부적으로는 사용되고 있다고 합니다.

GIF — Lossless / Indexed only

GIF 는 이미지를 저장해도 데이터가 손실 되지 않는 무손실 압축을 사용합니다. 파일 사이즈는 BMP보다 적은데, 좋은 압축 알고리즘을 사용하기 때문입니다. 하지만 Indexed color 속성을 가지고 있어서 최대 256가지의 컬러로만 저장 할 수 있습니다.

좋은점: 로고, 라인 그리기 등 간단한 이미지에 사용하면 좋습니다. 또한 GIF는 에니메이션이 가능하고, 투명한 것을 표현 할 수 있습니다! 회사 서비스에서는 SNS 기능 중 에니메이션이 필요한 컨텐츠인 경우 이 파일 포맷을 사용하고 있습니다.

JPEG — Lossy / Direct

JPEG 이미지는 인간의 눈으로 확인 할 수 없는 정보를 제거하는 방법으로 디테일한 사진 이미지를 가능한한 작게 만들도록 디자인 되었습니다. 이런 이유 때문에 손실 압축이고, 같은 파일을 JPEG로 변환하여 저장할 수록 시간이 지남에 따라 데이터를 손실하는 결과가 나오게 됩니다. 수천가지의 Color Palette를 가지고 있어서 사진 이미지에 적합하고 로고나 라인 그리기에는 부족합니다. 그라데이션이 표현된 이미지가 있다고 가정하면 GIF 타입 보다 JPEG 타입으로 된 이미지가 더 적은 파일 사이즈와 좋은 퀄리티를 가지고 있습니다. 사진이나 그라데이션이 표현된 이미지에 적합합니다!

회사 서비스에서도 경험상 랜딩페이지의 메인 배경이미지에 주로 JPEG 타입을 사용하곤 합니다.

PNG-8 — Lossless / Indexed

PNG는 새로운 포맷입니다. PNG-8은 GIF의 대체품으로 좋은데요. 슬프게도 문제점이 있어요. 첫번째는 GIF같이 에니메이션을 지원하지 않는점입니다.(파이어폭스에서는 지원되는 데, 거의 모든 브라우저에서 해당 포맷의 에니메이션이 지원되지 않습니다.) 두번째는 IE6같은 오래된 브라우저에서 지원 문제가 있습니다. 세번째는, 포토샵같은 중요한 소프트웨어에서 이 포맷을 구현하기가 어렵다는 점입니다. PNG-8은 GIF와 같이 256 색상으로만 저장이 되고, PNG-8이 GIF보다 더 나은 점은 Alpha Transparency를 지원하는 점이라고 할까요

아 근데 포토샵이 더이상 PNG-8의 alpha Transparency를 지원하지 않는다고 하네요!

PNG-24 — Lossless / Direct

PNG 24는 JPEG처럼 수천가지의 컬러를 가지면서 무손실 압축인 훌륭한 포맷입니다. 이미지를 압축하는 면을 제외하면 BMP와 유사한데, 파일을 좀 더 작게 만드는 것입니다. 하지만, JPEG ,GIF,PNG-8보다 파일사이즈가 커서 이 포맷을 사용하길 원한다면 좀 더 고려해봐야 할 것입니다.

PNG24가 압축을 하면서 수천가지의 컬러를 허용한다고 하더라도, JPEG를 대체하기는 좀 그렇습니다. 보여지는 퀄리티는 조금 상승되었을 뿐, PNG24로 저장된 이미지는 JPEG로 저장된 사진 보다 5배이상으로 큽니다. 물론 파일사이즈 염두해 두지 않고, 퀄리티 좋은 이미지를 원한다면 제격입니다. 보통 회사 서비스에서는 간단한 배너이미지에 이 이미지 포맷을 씁니다.

SVG — Lossless / Vector

SVG의 인기는 점점 증가하고 있는데요. 앞에서 설명한 이미지 타입과는 다른 vector 파일 포맷입니다. 위에서 설명한 것들이 래스터 이미지이죠. Vector 파일 포맷은 실제로 픽셀 대신에 라인과 곡선들로 이루어져 있는데, 백터이미지를 줌인 했을때, 곡선과 선들을 볼수 있다면, 래스터 이미지를 줌 인 햇을 때는, 픽셀들이 보이게 됩니다.

이런 점에서 Retina screens 이나 사이즈가 변경되어도 모양을 유지 하고 싶을때, 즉 로고나 아이콘에 알맛습니다. 또한 작은 SVG 로고를 훨씬 더 큰 크기로 사용할 수 있는데요, 래스터 이미지같은 경우에는 이를 위해 별도의 파일이 필요합니다.

SVG파일 사이즈는 작은 편에 속합니다. 비록 육안으로 봤을 땐 크더라도요. 하지만 모양이 얼마나 복잡하냐에 따라 달라진 다는 것을 명심해야합니다. SVG는 곡선과 선을 그릴 때 수학 계산이 필요하기 때문에 래스터 이미지보다 더 많은 계산 능력이 필요합니다. 로고가 많이 복잡하다면 사용자의 컴퓨터 속도가 느려지고 파일 크기가 매우 커질 가능성이 있습니다. 그래서 가능한 한 벡터 모양을 단순화하는 것이 중요합니다.

또한 SVG 파일은 XML로 작성되므로 텍스트 편집기에서 열고 편집 할 수 있어요. 즉, 값을 즉시 조작 할 수 있습니다. 예를 들어, 자바 스크립트를 사용하여 웹 사이트에서 SVG 아이콘의 색상을 변경할 수 있고 애니메이션을 적용 할 수도 있습니다. 실제로 회사서비스 내부에서 아이콘들이나, 간단한 벡터이미지들은 SVG 파일 포맷을 가지고 있습니다.

로고나 그래프같은 flat한 느낌의 간단한 이미지가 제격입니다.

이렇게 정리해 보았는데요! 여러분이 이미지를 쓰실 때 도움이 되었으면 좋겠습니다!

Reference: http://stackoverflow.com/questions/2336522/png-vs-gif-vs-jpeg-vs-svg-when-best-to-use