4. 웹 용 이미지 포멧 알아보기

포토샵에서 지원되는 파일 포맷은 무수히 많이 있습니다.
이 포맷들은 제각각의 쓰임새가 있지만 웹이서 쓰이는 그래픽 포맷은 GIF, JPG(JPEG), PNG 등으로 한정되어 있습니다.

웹에서 사용되는 파일 포맷의 특성을 알고 있으면 실제 웹 디자인 작업에서 적당한 이미지의 종류를 선택할 수 있으며, 또 그것의 특성을 정확하게 이용할 수 있습니다.
이 세가지 포맷의 특징을 살펴보기로 하겠습니다.

GIF 파일 포맷

GIF는 인터넷 초기부터사용되어 온 이미지 압축 포맷으로, 애니메이션 효과도 낼 수 있다. <출처: (CC)DemonDeLuxe at Wikipedia.org>

GIF 파일 포맷은 256 칼러 이내로 표현되기 때문에 이미지의 경계선이 확실한 경우나 적은 색상으로 이루어진 이미지에 주로 사용합니다.  
특히 간단한 로고나 아이콘을 제작하는데 적합합니다.
또한 GIF 포맷은 다른 포맷과 달리 다양한 방법으로 이미지를 제작할 수 있기 때문에 예전부터 지금까지 웹 이미지의 독보적인 이미지 포맷으로써 자리잡고 있습니다.
GIF 파일 포맷은 Interaced GIF, Transparent GIF, Animated GIF 등으로 분류할 수 있습니다.

  Interaced GIF : 몇 단계에 걸쳐 이미지가 점차적으로 선명해짐으로써 사용자가 이미지 로딩 시간 때문에 가지는 지루함뿐만 아니라 그것으로 인해 다른 사이트로 달아나 버리는 것을 막을 수 있게 합니다.

  Transparent GIF : 특정 색상의 이미지를 제거해 줄 수 있어 배경색과의 조화를 노릴 수 있으며 이미지 용량도 줄일 수 있습니다.  즉, 투명 배경의 이미지를 제작 가능하게 합니다.

  Animated GIF : GIF 포맷 중 가장 강력한 것으로 이미지 파일 자체로서 그 안에 여러 프레임을 내장시킴으로써 애니메이션을 구현할 수 있습니다.

JPEG(JPG) 파일 포맷

포토샵으로 JPEG 저장 시 설정할 수 있는 퀄리티 값을 높일수록 디테일이 선명해지는 대신 용량이 커진다.

 

 

GIF 이외에 웹 디자인에서 가장 많이 쓰이는 대표적인 파일 포맷입니다.
GIF가 Index Color(256 Color)를 쓰는 반면에 JPEG는 24비트 컬러를 사용하기 때문에 웹에서 고해상도 이미지를 구현 할 수 있다는 장점을 가지고 있습니다.
그리고 압축률이 뛰어나 적은 용량으로 웹 사이트를 꾸밀 수 있지만, 비트맵 이미지이기 때문에 압축한 후에 저장을 하면 일단 원본 이미지로 복구가 불가능합니다.

PNG 파일 포맷

PNG는 배경을 투명하게 만든 이미지를 저장하기 위한 용도로 애용된다.

JPEG와 GIF 포맷의 장점을 모두 가지고 있습니다.
PNG는 투명도나 인터레이싱 기능 등을 지원하고, 같은 파일 내에 고,중,저 해상도 버전을 모두 담고 있으며 트루컬러에 있어서는 JPEG보다 뛰어납니다.  하지만 웹 브라우저의 버전에 따라 지원하지 않는 경우도 있어 지금은 다른 두 포맷보다 덜 쓰이고 있지만, 앞으로는 PNG 포맷의 이미지가 자리잡을 것으로 예상됩니다.

 

SVG(Scalable Vector Graphics)

SVG는 W3C가 개발한 개방형 표준으로, 2차원 벡터 그래픽의 표현을 위한 XML 마크업 언어이다. 웹 등에서 스크립트가 가능한 다목적 벡터 포맷의 필요를 위해 제작된 것으로, W3C 표준인 CSS, DOM, SMIL과 호환된다. 확대나 축소를 해도 픽셀이 깨지지 않고 화질이 유지되며 용량이 PNG, GIF보다 작다. 중첩된 경로, 알파 마스크, 애니메이션, 다양한 그래픽 명령어, 하이퍼링크 등의 기능을 지원한다. SVG 형식의 파일은 어도비 일러스트레이터 등의 벡터 드로잉 프로그램이나 메모장, 문서 편집기 등에서도 작업할 수 있다.

 

SVG 파일은 픽셀이 아닌 숫자와 좌표를 사용하여 그래픽을 보여줍니다. 따라서 화질에 상관없이 그리고 제약 없이 사이즈를 원하는 만큼 조절할 수 있습니다.

SVG 파일은 다양한 모양, 선과 텍스트 요소를 조합하여 원하는 그래픽을 구현할 수 있습니다. 그리고 그 어떠한 사이즈에도 선명하게 보입니다.

GIF, JPG, PNG 파일은 제한된 사이즈가 있기 때문에 사이즈를 변경하게 되면 화질이 떨어지는 것을 확인할 수 있습니다.

​

[네이버 지식백과] 이미지 파일 형식 (시사상식사전, pmg 지식엔진연구소)

[출처] SVG 파일이란? 웹에 가장 좋은 벡터 방식|작성자 아이스크림 컴퍼니