홈페이지 제작시 png 최적화 TinyPNG 활용해서 용량 줄이기(필수)

홈페이지 제작시 png 최적화 TinyPNG 활용해서 용량 줄이기

 

왜 PNG를 사용하나.

알파 채널을 추가 할때 PNG는 채널 당 64bit가 소요 됩니다.  PNG는 index색상 투명도(1색상)를 가지거나 다른 이미지를 통해 부드러운 그림자 사용이 가능한 알파 투명도(다중 레벨)를 가지고 있습니다.

요약하자면 GIF보다 좋은 PNG의 장점은 :

• Alpha channels (다중 레벨 투명)
• Variable bit depths
• Cross-platform gamma 와 색상 보정
• 2차원 interlacing
• 보다 효율적인 무손실 압축(LZ77 vs. LZ78+)
  

PNG파일의 최적화는 색상을 줄이는 것입니다. 반복되는 필셀 영역의 최대화, 그림자 최소화 그리고 매끄러운 표현을 위해 똑똑한 dithering 어플리케이션을 사용합니다.

특수한 tool을 사용하면 허용품질을 유지 하면서 오리지널 이미지의 크기를 줄일수 잇습니다.

 

'TinyPNG' 웹사이트는 무료로 이용할 수 있는 웹서비스로 PNG 형식의 이미지 파일의 크기를 줄일 수 있는데 손실 압축 기술을 사용하여 이미지의 색상을 개수 선택적으로 줄여서 더 적은 바이트로 데이터를 저장할 수 있도록 하여 이미지에 큰 영향없이 파일의 사이즈에는 엄청난 차이를 보여줍니다.

'TinyPNG' 웹사이트 이용하는 방법

우선 아래 링크로 클릭하여 이동하시면 아래와 같이 화면이 나타납니다.

링크 : http://tinypng.org/

 

다음은 곰 옆에 있는 Drop your .png files here! 클릭하여 해당파일을 불러오면 됩니다.

 

이미지의 크기가 줄어들지만 이미지파일의 변경된 부분은 없습니다. 손실없이 자동압축됩니다.

용량이 줄어든 것을 확인하고 다음의 저장으로 넘어가세요.

 

압축비율을 알려주면서 바로 다운로드 받을 수 있게 링크로 제공됩니다.

특히나 워드프레스 블로그운영시 자동썸네일을 만들어 용량이 급격하게 증가하는데

GTmatrix 에서 테스트해보면 생각보다 로딩속도에서 큰 차이를 보입니다.