[3기 강남 이소영] 포토샵의 이미지 파일 형식

 

안녕하세요~ 강남 멤버십 21-2기 이소영입니다.

저는 GUI 디자인을 하기 위해서 가장 먼저 알아야할 이미지 파일형식에 대해 심도있게 알려드리고자 합니다.

 

웹디자인이나 스마트폰 콘텐츠를 제작할 떄 사용되는 이미지 파일은 여러가지가 있습니다.

그중 가장 대표적인 파일형식인 JPG, GIF, PNG 파일형식에 대해 소개해드리겠습니다^^

 

JPG

JPG는 True Color와 Gray Color 등과 같은 색상을 표현할 때

압축률을 고려해서 개발된 그래픽 압축의 표준 형식입니다.

보통 사진과 같은 사실 그대로를 표현하는 데 적합하며 개별적인 압축률을 적용해서

효율성 면에서도 뛰어납니다. JPG는 1,600만 색상까지 표현할 수 있습니다.

장점	단점
손실 압축으로 고품질 이미지 표현가능 (인쇄시)	투명 색상을 지원하지 않음
용량및 이미지의 품질 조절 가능	압축 시 이미지 손상
사진과 같은 자연 색상 지원	애니메이션을 지원하지 않음
넓은 활용 및 호환성

 

 [File- Save as 를 통해서 jpg 파일로 저장할 경우]

퀄리티는 맥시멈으로 설정해 주어야 이미지가 깨지지 않습니다!

 

 

[File- Save for Web & Device 를 통해서 jpg 파일로 저장할 경우]

Progressive 항목은 반드시 체크 해제 후 저장해주세요.

 

 

포토샵의 Save for Web & Device  메뉴에서는 좀 더 섭세한 설정 값을 적용 할 수 있는데

Quality를 최대 100% 까지 올릴 수 있으며 Save as와 마찬가지로 퀄리티가 높아질 수 록

화질은 좋아지고 용량은 커집니다.

이처럼 jpg는 화질과 용량을 조절할 수 있다는 장점이 있으며, 화질과 용량은 비례해서 늘어납니다.

 

Quality 100% /113kb

 

Quality 60% /28.3kb

 

Quality 10% /9.58kb

 

세사진의 차이 보이시나요? 사진의 화질과 용량이 비례하는 것을 확인 할 수 있죠^^

퀄리티 값을 조절해서 화질과 용량을 유동적으로 조절할 수 있습니다.

무선 인터넷으로 jpg 파일을 볼 때 간혹 안보이는 경우가 있습니다.

그럴 땐 Quality를 60으로 낮추거나 Progressive 체크를 해제해야 합니다.

고품질 jpg는 용량 때문에 전송이 안되는 경우가 있으며, 예전 방식인 progressive 로 체크돼

있으면 스트리밍 지원이 안되기 떄문에 전송되지 않습니다.

 

참고로 최근의 jpg 저장형식은 baseline 방식입니다~

 

GIF

GIF는 웹상에서 이미지를 압축하여 빠르게 전송하기 위한 목적으로 개발되었습니다.

원본 이미지보다 40% 압축하여 용량을 줄일 수 있습니다.

 

JPG 파일보다 압축률은 떨어지지만 파일 용량 자체가 적기 떄문에 웹상에서 전송 속도가 빠르고

이미지 손상도 비교적 적은 편 입니다.

 

웹상에서 JPG와 함꼐 가장 많이 사용되는 이미지 파일 형식으로, 외각을 투명하게 처리 할 수 있으며,

여러장의 이미지를 포함하여 애니메이션화 할 수 있다는 장점이 있습니다.

하지만 압축률과 전송속도를 빠르게 하려고 색상은 256가지 색상만 표현 할 수있어

색상이 많이 들어 있는 사진 같은 경우엔 약간의 색상 왜곡 현상및 모자이크 현상이 일어날 수 있습니다.

장점	단점
빠른 처리 속도와 전송 속도	256색 지원으로 단조로운 색감
애니메이션 기능 가능	투명 색상 지원 시 한가지 색만 지원
외각 투명 색상 지원
그림 및 픽셀 디자인에 적합

* GIF 애니메이션은 스마트폰 환경에서는 지원하지 않음

 

 

[File- Save as 를 통해서 GIF 파일로 저장할 경우]

체킹된 Transparency 는 투명색상을 지원합니다~

 

PNG

마지막으로 설명해드릴 PNG파일은 기존 JPG와 GIF의 장점을 모아 만든 이미지 파일입니다^^

GIF를 대체하기위해 개발된 이미지 파일 형식입니다, GIF처럼 애니메이션은 지원하지 않지만

투명색상을 8비트 까지 지원하며, 색상 또한 JPG와 같이 자연색상을 24비트까지 지원하면서 용량을

최소화 할 수 있습니다. PNG 파일은 스마트폰 개발에서 알파 채널을 지원하는 데 가장 많이 사용되는

파일 형식이기도 합니다~

장점	단점
빠른 처리 속도	애니메이션을 지원하지 않음
사진과 같은 자연 색상 지원	GIF나 JPG보다 호환성이 떨어짐
비트 조절을 이용한 형식 변화
8비트 투명색상 지원 (256단계의 투명 지원)
JPG와 GIF의 장점만 이용

 

[File- Save for Web & Device 를 통해서 png 파일로 저장할 경우]

png 파일은 대부분 포토샵의 Save for Web & Device를 이용해 저장합니다.

이 때 원하는 비트를 선택해서 저장할 수 있습니다.

웹상이나 스마트폰 콘텐츠 개발 시 자연스러운 표현을 위해

24비트 이미지로 저장합니다.

 

[24비트 이미지와 8비트 이미지의 차이]

png 파일은 8비트와 24비트 두가지 형식을 지원하는데,

 gif와 png 8비트는 투명색상을 표함한 8비트라서 투명 색상 하나만 지원합니다.

png 24비트는 기본 RGB색상을 제외한 별도의 8비트를 투명색상에 지원하므로

투명도의 단계를 총 256 단계로 표현할 수 있습니다.

그래서 앱을 디자인할 때 그림자나 광채효과를 자연스럽게 표현할 수 있습니다~

 

세가지 대표적인 이미지 파일 형식에 대해 알아봤습니다.

앱을 개발 할 떄는 jpg와 png 두가지 파일 형식을 가장 많이 사용합니다.

하지만 png파일은 상대적으로 jpg파일보다 용량이 크기 떄문에 적절하게 구분해서 사용해야 합니다.

예를들어 배경화면이나 투명처리가 필요없는 이미지는  jpg파일로,

버튼등 투명 배경처리가 필요한 이미지는 png 24비트로 저장해서 사용하는 것이 효율적입니다~