본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

이미지 포맷

최초 작성일
최종 수정일
이번 시간에는...
웹 페이지에서 주로 사용되는 이미지 포맷인 GIF, JPG, PNG(PNG8bit, PNG24bit) 포맷들의 주요 특징을 살펴보고, 비교해 봅니다. 또한 포토샵과 김프에서 이를 어떻게 저장하는 지 알아보고, 이를 통해 보다 현명한 이미지 사용과 웹 디자인을 할 수 있도록 알아봅니다.

'백 번 읽는 것이 한 번 보는 것만 못하다'라는 말이 있습니다. 그만큼 콘텐츠에 있어서 이미지는 많은 것을 담고 있습니다. 이 이미지를 담는 요소가 img 요소입니다. 이번 장에서는 img 요소를 통해 들어가는 이미지 파일 포맷의 종류와 특징을 알아보도록 하겠습니다. (원래는 img 요소와 같이 하려고 했으나, 분량이 많은 관계로 img 요소는 다음에 살펴 보겠습니다.)

우리가 보통 알고 있는 이미지 포맷에는 gif, jpg, png가 있습니다. 각 포맷의 특징을 잘 모르고 사용하는 경우가 많습니다. 심지어 이미지를 주로 다루는 웹 디자이너 중에서도 은근 잘 모르고 사용하는 경우가 많습니다. 특히 이미지는 웹 페이지 내에서 차지하는 용량이 매우 크기 때문에, 이미지 포맷을 효율적으로 사용하지 않으면 웹 페이지가 매우 무거워 질 수 있습니다. 참고로 이미지 포맷이라는 것은 이미지를 압축하는 방식을 말합니다.

JPEG (jpg)

보통 .jpg 파일로 많이 쓰는 JPEG은 정지된 사진을 위해 만들어진 손실 압축 방법입니다. 공식적으로는 '제이펙'이라고 발음합니다. 이 포맷을 사용하면 이미지가 별로 안 깨져 보이는 데도, 용량이 확연히 줄어들기 때문에 사진 이미지에서 주로 이 jpg 이미지를 많이 사용합니다.

이 jpg 포맷의 압축은 잘 눈에 띄지는 않지만, 손실되는 방식의 포맷입니다. 압축률이 높아질 수록 노이즈 같은 것이 생성되는데, 사진과 같이 복잡하고 많은 색을 담고 있는 이미지 같은 경우에 잘 드러나지 않는 것 입니다. 때문에 로고나 선, 글자 등을 담고 있는 단순한 이미지의 경우 자칫 지글지글해 보일 수 있습니다. 또한 손실되는 방식이기 때문에 원본파일을 저장하는 데에는 적합하지 않습니다. 원본을 jpg로 저장하고, 이 jpg를 수정하여 또 다시 저장하면, 저장 할 때마다 이미지에 손실이 일어납니다.

jpg로 저장한 것을 확대해보면 의도치않은 노이즈가 들어간 것을 확인할 수 있습니다.
원본과 JPG 포맷 비교

이 jpeg 방식의 포맷이 정확히 어떠한 원리인지는 잘 모르지만, 이 포맷방식은 이미지가 뿌옇게 될수록 용량이 작아집니다. 이런 특성을 이용해서 이미지의 용량을 더 줄이기 위해, 필요한 부분만을 선명하게 놔두고 나머지 부분을 블러(blur, 뿌옇게 하기)처리를 하기도 합니다.

중요 부분만 초점을 맞추고 나머지 부분을 뿌옇게 처리했습니다.
원본과 흐리게 하기의 용량 차이

이미지 에디터에서 저장 방법

포토샵(Photoshop)에서의 저장 방법

이미지 작업을 마친 후, 저장을 할 때에 파일(File) 메뉴에서 '웹 용으로 저장하기(Save for Web.)'로 저장하셔야 합니다. 다른 이름으로 저장하는 방식에서도 jpg를 저장 가능하지만, '웹 용으로 저장하기'로 저장을 해야 압축이 더 일어나 용량이 줄어듭니다. 앞으로 보게 될 gif, png도 마찬가지 입니다. '웹 용으로 저장하기(Save for Web..)'을 선택하시면 저장을 위한 새로운 창이 나타납니다.

창의 좌측에는 이미지를 미리 보기 할 수 있으며, 압축 정도에 따라 원본과 얼마나 차이가 있는지 확인할 수 있습니다.

우측 패널에서 파일 포맷을 선택할 수 있습니다. 포맷을 JPEG을 선택하시면 하단 메뉴에 '화질(Quality)'과 '부드럽게(Blur)'가 있습니다. 화질이 높아질 수록 용량이 늘어나며, '부드럽게' 수치가 높아질 수록 용량이 줄어듭니다.

좌측, 이미지 바로 아래에 예상되는 용량이 표시되니, 이미지 상태와 용량을 확인해 가면서 적정선으로 맞추고 저장하시면 됩니다. 웹은 때때로 좋은 화질보다 손실된 화질이지만 가벼운 용량이 우선되기도 합니다.

포토샵에서 웹용 저장 창과 각 옵션의 명칭을 정리했습니다
포토샵의 웹 용으로 저장하기 창

김프(Gimp)에서의 저장 방법

김프에서 이미지 작업을 마친 후, 파일 메뉴에서 이미지 내보내기(Export As)로 저장합니다. gif, png 역시 동일합니다. 내보내기 창에서 파일 형식을 jpg로 선택한 뒤, 또는 파일명을 .jpg로 바꾸신 뒤 확인을 누르시면 옵션 창이 나옵니다.

여기서 화질을 조절할 수 있으며, 그 아래에 이미지 미리 보기를 체크하면 작업창의 이미지로 저장시의 화질을 확인할 수 있습니다. 또한, 체크 시에 화질 조절 바 바로 밑에 예상되는 저장 용량도 표기 됩니다. 고급 옵션 보기를 누르시면 부드럽게를 포함한 더 많은 옵션들을 볼 수 있습니다.

김프에서 내보내기 클릭 후 나타나는 JPG 옵션 창
김프에서 JPG 저장 옵션

GIF

보통 움직이는 이미지로 알고 있는 gif 포맷입니다. 그래픽 인터체인지 포맷(Graphics Interchange Format)의 약자로 '지프' 또는 '기프'라고 읽습니다.

이 포맷은 jpg와는 달리 비 손실 방식입니다. 하지만, 색을 최대 256개까지 밖에 사용할 수 없습니다. 이 색이 256개까지라고 하면 왠지 거의 모든 색을 표현할 수 있을 거 같이 들립니다만, 사실 굉장히 부족한 개수입니다.

다음 이미지를 봐 주시기 바랍니다.

빨강, 청록, 노랑, 검정으로 이루어진 원형 띄

위의 이미지를 보시고 위 이미지에 들어간 색은 몇 가지 일 지 예상해 보시기 바랍니다. 그냥 언 듯 보기에 저 이미지는 4개 또는 흰색까지 포함해서 5개라고 생각할 수 있습니다.

하지만 위의 이미지에 들어간 색상은 총 64개입니다. 그나마도 256개까지 다 가질 수 있었지만 제가 줄인 것입니다. 위의 이미지를 확대해서 보겠습니다.

이미지를 확대해보면 검정색에도 여러 음영이 들어가 있습니다
원형 띠 확대한 모습

위의 보시면 검은색부분도 그냥 검은색이 있는가 하면, 하얀 배경에 닿는 부분에서 조금 밝은 검은색들도 보입니다. 빨간 색 역시 마찬가지이고요. 저런 부분들이 다 색상입니다. 아래는 이 이미지에 들어간 색상 팔레트 입니다.

원형띠 이미지에 쓰인 64개의 색 정보
이미지에 쓰인 색상 팔레트

아래는 위의 이미지를 64개의 색과, 5개의 색만을 사용했을 때의 차이를 보여줍니다.

색상 수가 64개인 것에 비해 5개인 것의 가장자리가 투박해 보이는 것을 확인할 수 있습니다.
64개의 색상과 5개의 색상의 이미지 차이

이러한 이유로 256개의 색상은 사진 등의 색상이 많은 이미지를 표현하는 데는 불충분합니다. 아래는 사진을 gif로 저장 했을 때입니다.

GIF 포맷이 원본의 색상을 다 담아내지 못하고 있습니다.
GIF 포맷의 사진 표현

대신에 로고나 색상이 적은 이미지에선 매우 선명하게 나타납니다.

JPG 포맷보다 GIF 포맷이 더 선명한걸 알 수 있습니다.
JPG와 GIF의 로고 이미지 표현

또한 gif는 이미지에 투명도를 줄 수 있습니다.

로고 이미지 사이에 투명한 공백이 들어가있습니다.
투명도를 가진 GIF 이미지

대신 투명도가 투명한지, 불투명한지의 두 가지 경우 밖에 없기 때문에, 투명영역이 투박하게 보입니다. 투명도에 대해서는 잠시 후 PNG에서 좀 더 다루겠습니다.

그리고 gif는 움직이는 애니메이션을 구현할 수 있습니다. 하지만, gif의 애니메이션에 속도가 초당 20프레임을 넘어설 경우, 브라우저가 속도를 늦출 수 있습니다. 참고로 웹 페이지 내에 움직이는 이미지가 너무 많을 경우, 특히나 화면변화가 심한 애니메이션이 많을 경우, 웹 페이지가 몹시 산만해 질 수 있습니다. 또한, 이러한 페이지는 누군가에게 강박장애를 일으킬 수 있으므로, 최대한 gif 애니메이션은 자제하는 것이 좋습니다. 페이지 내에 한 개 이하로 가지는 것이 가장 좋습니다.

gif는 이와 같이 웹 페이지에 쓰임이 많은 포맷입니다. 하지만, 이 포맷에는 특허권이 있습니다. 실제로 사용하는데 비용이 드는 것은 아니지만, 그렇다고 사용이 완전히 자유롭다고 할 수도 없습니다.

이미지 에디터에서의 저장 방법

포토샵에서의 저장

포토샵에서는 일단 아까 jpg 저장과 같이 '웹 용으로 저장(Save for Web)'으로 들어갑니다. 거기서 우측 패널에서 gif를 선택하시면, 하위 메뉴들이 바뀝니다. 색상(Colors)의 숫자가 색상팔레트 개수를 나타내며 색상 수가 줄어들 수록 용량은 줄어듭니다. 또한, 하단에 투명도 (Transparency)를 체크하면 이미지 내에 투명도를 표현할 수 있습니다.

포맷을 GIF 로 선택한뒤 나오는 저장 옵션창의 일부
포토샵 GIF 저장 옵션

김프에서의 저장

이전에 jpg 저장하듯이 메뉴에서 내보내기(Export as)로 들어가셔서 gif로 저장을 하면 됩니다. 하지만 여기서 바로 gif를 저장하는 것은 별다른 옵션이 나타나지 않습니다. 때문에 색상 수를 제대로 조절할 수가 없는데요, 김프에서는 색상 수를 먼저 줄이고서 저장을 해야 합니다.

이미지 작업을 완료 후에 저장하기 전, '이미지(Image)'메뉴에서 '모드(Mode)'로 들어가 '인덱스(Index)'로 들어갑니다. 거기서 최대 색상 수를 조절하시면 색상팔레트의 수를 조절할 수 있습니다. 이렇게 조절 후에 gif로 저장하시면 됩니다.

아무래도 김프는 무료 소프트웨어라 이런 부분에서 불편함이 있습니다만, 김프의 '웹 용으로 저장하기(Save for Web)' 플러그인도 있으니, 김프 사용자는 이 플러그 인을 추천 드립니다.

PNG

앞서 GIF에 대해 살펴 보았듯이 GIF 포맷은 여러 가지 이점이 있으나, 특허권이 완전히 자유롭지는 못 합니다. 그래서 이에 대한 대안 포맷이 나왔는데 바로 'PNG'입니다. PNG는 Portable Network Graphics의 약자로, '핑'이라고 읽거나 '피엔지'라고 철자 그대로 읽습니다.

이 PNG 포맷은 두 가지 종류가 있습니다. 하나는 8비트이고, 다른 하나는 24비트입니다.

PNG 8bit

PNG 8비트는 GIF 포맷을 거의 대체하는 포맷입니다. GIF의 애니메이션을 제외하고는 모두 같습니다. 이 PNG 8비트 역시 최대 256개의 색상을 지원합니다. (사실 8비트라는 것이 2의 8승이기 때문에, 2^8 = 256이 됩니다.) 게다가 대부분의 경우 GIF보다 압축률이 더 높다고 알려져 있습니다. 여러분들도 GIF 보다는 이 PNG 8비트로 쓰실 것을 권장합니다.

PNG 24bit

8비트 보다 더 높은 배수이기 때문에 더 많은 이미지 정보를 담는 포맷입니다. 때문에 이 24비트 포맷은 256개의 색 제한이 아닌, 원본의 색을 다 저장합니다. 게다가 투명도 역시 지원을 하는데, GIF와 PNG 8bit 처럼 투박한 투명도(오로지 투명 또는 불투명)가 아닌 부드러운 투명도를 표현해냅니다. (예를 들어 50%의 투명도 같은 표현) 아래의 이미지를 보시면 투명도의 차이를 알 수 있으실 겁니다.

8비트에 비해 24비트는 투명단계가 훨씬 높아 이미지 경계가 더욱 부드럽게 표현됩니다.
8비트와 24비트의 투명도 차이

PNG 24비트는 이와 같이 비 손실이기 때문에 나중에 편집을 할 생각이라면, JPG보다는 PNG를 권장합니다. 다만 이러한 PNG 24bit 방식은 아무래도 정보량이 많기 때문에 이미지 용량이 크게 나옵니다. 그래서 위의 이미지와 같이 자연스러운 투명도가 꼭 필요한 경우가 아니라면 PNG 8비트나, JPG 포맷을 사용하기 바랍니다.

또한 GIF의 애니메이션을 대체 하기 위해서 APNG같은 파일 형식도 제안되었었으나, 호환되는 브라우저가 거의 없습니다. 이런 APNG같은 포맷은 24비트로 GIF보다 더 많은 색상과 많은 단계의 투명도를 나타낼 수 있으나, 그 만큼 용량이 몹시 커지기 때문에 거의 사용하지 않습니다. 때문에 보통 애니메이션 된 이미지를 구현하기 위해서는 GIF를 이용하거나, PNG 이미지를 사용한 뒤 스크립트처리로 애니메이팅을 합니다.

이미지 에디터에서의 저장 방법

포토샵에서 저장

역시 '웹 용으로 저장(Save for Web)'으로 들어가 저장합니다. 8비트의 경우 패널에서 PNG-8을 선택하시고 gif와 동일하게 설정하시고 저장하면 됩니다.

24비트의 경우는 PNG-24를 선택하시면 옵션이 거의 없고, 투명도를 줄 것인지 안 줄 것인 지만 정하시고 저장하시면 됩니다.

김프에서 저장

전에 GIF 저장하는 것과 완전 동일합니다. 인덱스 메뉴에서 색상 값을 줄인 뒤 PNG로 저장을 하게 되면 8bit로 저장이 되며, 색상 값을 줄이지 않고 (RGB 컬러) 저장을 하게 되면 24비트로 저장이 됩니다.

PNG 8비트 활용 팁

종종 다음과 같이 이미지를 만들기 위해서 PNG 24비트를 사용하는 경우가 있습니다.

24비트는 매끄러운 이미지를 보여주지만 무겁습니다.
24비트와 8비트의 용량 비교

물론 위의 방법은 잘못된 방법이 아닙니다. 하지만, 24비트 방식은 이미지 용량이 너무 커집니다. 그래서 위와 같이 배경색이 정해져 있는 상황에서는 8비트를 그럴듯하게 저장하는 것도 한가지 방법인데요, (GIF로도 동일합니다.) 투명도 부분을 하얗게 처리하는 것이 아닌, 배경색의 색깔로 처리하는 것입니다. 이러한 처리를 포토샵에서는 쉽게 가능하지만, 김프에서는 바로 지원을 하지 않기 때문에 약간의 실제 이미지 작업이 필요합니다.

포토샵에서의 방법

옵션 부분 우측에 매트(Matte)를 선택하면 배경색을 지정할 수 있습니다.
매트(Matte) 옵션

웹 용으로 저장을 하신 뒤, 포맷을 GIF나 PNG-8로 선택을 하시면 하단에 Matte라는 옵션이 있습니다. 이 부분을 배경색으로 입력하신 뒤, 저장하면 투명도 밑 색을 배경색으로 바꿔줍니다.

투명도 배경을 배경색에 맞추어서 매끄러워보이는 8비트 이미지를 만들었습니다.
매트처리된 8비트 이미지

김프에서의 방법

김프는 저장할 때, 매트(Matte) 옵션 같은 것이 없습니다. 게다가 모드에서 인덱스로 변경을 하게 되면, 투명도가 하얀 배색이 아닌 그냥 통 색으로 채워집니다.

반투명한 다리가 반토막 나고 경계가 거칠어졌습니다.
김프에서 인덱스 변경 시 생기는 문제

김프는 이 매트기능을 필터의 형태로 제공합니다. '필터(Filter)' 메뉴에 '웹(Web)'에서 '중간 합치기(Semi-Flatten)'을 선택합니다.

매트효과를 얻어, 다리와 경계가 온전하게 표현되었습니다.
투명 배경이 올바르게 채워진 모습

이미지 포맷 정리

지금까지 이미지의 세가지 포맷을 살펴보았습니다. 조금 길게 얘기해서 쉽게 소화하셨는지 모르겠습니다. 아무래도 이미지는 웹 페이지 용량의 상당 부분을 차지하기 때문에 이미지의 질을 유지하면서 용량을 줄이는 것은 매우 중요한 일입니다.

다음의 요점 정리만 잘 이해 하신다면, 앞으로 여러분들이 이미지를 저장하고 다룰 때 더 효율적으로 다루실 수 있을 겁니다.

요점 정리
  • JPG는 사진과 같은 형태의 이미지에 적합.
  • JPG는 이미지가 작고 흐릴 수록 용량이 작아짐.
  • GIF, PNG 8비트는 256개의 색이 제한되어있기 때문에 로고나 아이콘, 텍스트 등 색은 적으나 선명함을 요구하는 이미지에 좋음.
  • GIF와 PNG는 색상이 적을 수록 용량이 작아짐.
  • GIF 보다는 PNG 8비트를 활용하는 것이 좋음.
  • GIF는 애니메이션 이미지를 만들 때 정도만 사용하되, 웹 페이지에 애니메이션 이미지를 많이 넣는 것은 좋지 않음.
  • PNG 24비트는 보다 풍부한 색상과 투명도를 지원.
  • 하지만 24비트는 용량이 크기 때문에 8비트로 대체할 수 있는 이미지는 최대한 대체하는 것이 좋음.

이 글이 유용하셨다면 친구들에게 공유 해주세요.