PNG 압축은 Pngyu / 최적화의 희망

https://nukesaq88.github.io/Pngyu/

Pngyu

TA, 클라이언트 (웹)프로그래머에 이르기까지 이미지 리소스는

어떤 프로젝트이건 간에 사용이 되게 된다.

 

특히 Alpha가 지원되는 이미지의 경우 PNG, GIF, A-PNG, WebP를 사용할 수 있으나,

각각의 문제점이 도출되게 된다.

 

PNG	기본적으로 사용되는 이미지 확장자이며 범용성이 높다
A-PNG	GIF와 같이 애니메이션과 Alpha가 지원되는 장점이 있으나, 사용가능의 여부는 개발자와 상담이 필요하다.
GIF	애니메이션과 Alpha를 지원하지만 색공간의 제안으로 계단현상이 발생되며 Alpha는 0과 1만 지원하기때문에 물방울과 같은 투명도를 가질 수 없다.
WebP	범용적으로 사용되는 확장자이나 프로젝트에서 사용가능한지의 여부는 개발자와 상담이 필요하다.

 

이와 같이 4가지의 확장자의 경우 비교적 범용적으로 사용되나, 개발 편의성과 비주얼을 고려한다면

결국 PNG, WebP를 사용하는 것이 현실적일 것이며,

 

결국 후가공의 영역으로 들어서게 된다면 원본 PNG 시퀀스에 의거하여 최적화를 진행하기 때문에
근본 PNG를 최적화 하는 것을 다뤄보고자 한다.

 

1. 색상 모드

PNG를 기본적으로 압축하기 위해서는 포토샵의 색상모드를 이해하고 있어야 한다.

픽셀의 경우 R (0~255), G (0~255), B (0~255) 의 값을 가지고 있기 때문에 우리 눈에 보이는 색상이 표현되고 있다.

다시 말하자면 그 색상을 표현하는 값이 다 데이터이며 용량에 직접적으로 영향을 준다는 것이다.

 

포토샵의 경우 여러 모드가 있으나 최적화 영역으로 가야되기 때문에 Index 컬러에 대해 설명하고자 한다.

 

 

<Indexed Color>

 

디스플레이 업데이트 및 파일 전송 속도를 높이면서 메모리 및 저장공간을 절약하기 위해 제한된 방식으로 디지털 이미지 색상을 관리하는 기술이며 일종의 벡터 양자화 압축 방식입니다.
*결론적으로 색상을 팔레트라 불리는 별도의 데이터 배열에 저장하는 방식을 말한다.

 

이 것을 통해 기존 RGB에 전체 색상을 저장하는 것이 아닌 사용되는 색상만 일부 추출하여 이미지에 저장하여 저장공간을 압축시키는 방식이며 이를통해 용량 압축을 진행할 수 있다.

 

하지만

 

이렇게 하는 방법은 1차적인 압축방식이며 이 과정을 진행한뒤 Pngyu를 진행한다면 2차적인 색상손실이 나기때문에

포토샵에서 익스포팅 되는 이미지 데이터의 경우 RGB 색역 공간에서 작업된 이미지를 활용하는 것을 추천한다.

 

2. Pngyu

 

이미지를 드래그앤 드롭하게 된다면 다음과 같은 화면을 볼수있으나 Default를 추천하며

단순하게 Compress Start 버튼만으로 Indexed Color Space로 변경 및 저장을 진행하는 툴이며,

 

육안상으로 보았을때 퀄리티를 지키며 최적화를 진행할 수 있다.

*PNG만 지원한다

3. Q&A

Unity, Unreal 과 같은 게임 앤진 임포트시

>>> Pngyu를 추천하지 않는다. 결론적으로 보았을때 유니티를 기준으로 앤진에서 GPU로 보내는 컴프레스를 따로 진행하고 있기 때문에 인앱으로 사용하는 경우에는 사용하는 것을 추천하지 않는다. (결국 앤진에서 컴프레스를 또 걸기때문에 2차 손실이 발생한다)
*단 외부에서 다운받거나 링크를 받아와서 사용하는 경우 용량 절약을 위해 사용하는 것은 바람직하다고 판단된다.

 

After Effect를 이용한 영상제작 사용시

>>> 애팩을 통해 영상을 압축한다고 가정할 경우 2차 컬러 손실이 발생하기 때문에 차라리 이전에 포스팅한 HandBreke를 이용하여 최적화는 진행하는 것이 바람직하다고 판단된다.

*단 별도의 인코더를 사용하는 경우 필요에 따라 사용하는 것이 바람직할 수 있다.

 

Web 콘텐츠 사용시

>>> 적극 적으로 활용하는 것을 추천한다.