하늘높이의 프로그래밍 이야기

한국 사람들은 사이트가 5초가 지나도록 열리지 않으면 닫는다고 하는데...

요즘에는 모바일에도 그 규칙은 적용되나 보다. 

하여 모바일 사이트를 빠르게 하기 위해서 여러가지 방안을 찾고 있는데...


그중에 가장 큰 이슈가 역시...

이미지더라.. PC에서는 대형 이미지를 쓰고...

모바일에서는 작은 이미지를 쓰고.. 할 수도 있긴 한데...

그럼 큰 모바일 디스플레이에서는?.... 쩝...

어쨋든.. 일단 있는 이미지부터 최적화 해서 쓰자라는 결론에 도달한다.


하여 공통 요소로 많이 쓰는 PNG부터 최적화 해보고자 한다.

이미지 최적화 참고 문서: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization#image-optimization-checklist

optipng무손실 PNG 최적화

optipng 안타깝지만 이 녀석은...64비트 윈도우용 바이너리가 없다.

물론 소스 받아서 조건 맞춰서 컴파일 하면 되겠지만... 귀찮다.

http://optipng.sourceforge.net/pngtech/optipng.html

무손실 PNG 압축 프로그램은 아래와 같은데...

무손실 PNG라는게... 일종의 압축 알고리즘을 개선(ZIP->7ZIP?)하는 것으로 보인다.

  • pngrewrite by Jason Summers, available at http://www.pobox.com/~jason1/pngrewrite, is an open-source program that performs lossless image reductions. It works best in conjunction with pngcrush (see below); the user should run pngcrush afterpngrewrite.

  • pngcrush by Glenn Randers-Pehrson, available at http://pmt.sourceforge.net/pngcrush, is an open-source program that iterates over PNG filters and zlib (Deflate) parameters, compresses the image repeatedly using each parameter configuration, and chooses the configuration that yields the smallest compressed (IDAT) output. At the user's option, the program can explore few (below 10) or many (a brute-force traversal over more than 100) configurations. The method of selecting the parameters for "few" trials is particularly effective, and the use of a brute-force traversal is generally not recommended.

    In addition, pngcrush offers a multitude of extra features, such as recovery of erroneous PNG files (e.g. files containing bad CRCs), and chunk-level editing of PNG meta-data.

  • OptiPNG by Cosmin Truţa, available at http://www.cs.toronto.edu/pngtech/optipng, is a newer open-source program, inspired from pngcrush, but designed to be more flexible and to run faster. Unlike pngcrushOptiPNG performs the trials entirely in memory, and writes only the final output file on the disk. Moreover, it offers multiple optimization presets to the user, who can choose among a range of options from "very few trials" to "very many trials" (in contrast to the coarser "smart vs. brute" option offered by pngcrush).

  • AdvanceCOMP by Andrea Mazzoleni is a set of tools for optimizing ZIP/GZIP, PNG and MNG files, based on the powerful 7-Zip deflation engine. The name of the PNG optimization tool is AdvPNG. At the time of this writing, AdvPNG does not perform image reductions, so the use of pngrewrite or OptiPNG prior to optimiziation may be necessary. However, given the effectivenes of 7-Zip deflation, AdvanceCOMP is a powerful contender.

    The AdvanceCOMP tool set is a part of the AdvanceMAME project, available at http://advancemame.sourceforge.net.

  • PNGOut by Ken Silverman, available at http://advsys.net/ken/utils.htm, is a freely-available compiled program (no source code), running on Windows and Linux. According to our tests, the compression ratio achieved by PNGOut is comparable to that of AdvPNG. Unfortunately, due to the lack of information, we cannot say much about this tool.

이 중 익숙한 녀석이 하나 보인다. AdvanceCOMP 

옛날에 PNG를 주로 사용하던 실버라이트 개발 할때부터 잘 써온 툴!!

ADVPNG 바이너리를 구글에 검색하니.. 아래의 GITHUB 주소가 보인다.

https://github.com/colorhook/node-advpng

https://github.com/colorhook/node-advpng/archive/master.zip


바로 다운로드

윈도우가 32비트면 32bit \vendor\win\x86\advpng.exe를 

64비트면 \vendor\win\x64\advpng.exe를 이용하세요.

사용법은 도스 명령어이니..

advpng -z -4 대상파일

156535 Byte를 113737 Byte로 32KByte를 무손실로 최적화 !!





'Web Tech > JavaScript,XML' 카테고리의 다른 글

티스토리에... D-Day 카운터 달기..  (0) 2011.04.11
AJAX 관련글 2008-03-12  (0) 2008.03.12
Prototype.js  (0) 2008.03.12

뭐 흔하디 흔한... 자바스크립트로 만드는 날짜 계산기지만...(별 어려운 기술도 아니구요.-.-)
하지만 혹시 필요한 사람 있을까? 혹은... 참고 할 사람이 있을까? 하여... 살짝 등록합니다.
(나중에 소스 잘못 리셋해서 내가 다시 쓸 수도 있고...)

<script type="text/javascript">
  //<![CDATA[
  //2011-04-07 Edit by kunmin00 스크립트
  function GetCellDate(year,month,day){

   var today = new Date();
   var dday = new Date(year,month-1,day);
   var days = Math.ceil((today-dday)/24/60/60/1000);
   var days = days-1;
   
   return days
  }

  document.write("<h2><a href='http://wipen.net/576'>결혼</a>한 지 D+" + GetCellDate (2010,10,23) + "일/<a href='http://wipen.net/613' >봉봉이</a>와 만날 날 D" + GetCellDate (2011,11,09) + "일</h2>" ) ;
  //]]>
</script>

이렇게 http://wipen.net에 넣었죠.^^ 아빠 블로거로의 한 걸음...

'Web Tech > JavaScript,XML' 카테고리의 다른 글

사이트 속도 개선 - PNG 최적화 하기  (0) 2015.10.02
AJAX 관련글 2008-03-12  (0) 2008.03.12
Prototype.js  (0) 2008.03.12

'Web Tech > JavaScript,XML' 카테고리의 다른 글

사이트 속도 개선 - PNG 최적화 하기  (0) 2015.10.02
티스토리에... D-Day 카운터 달기..  (0) 2011.04.11
Prototype.js  (0) 2008.03.12

'Web Tech > JavaScript,XML' 카테고리의 다른 글

사이트 속도 개선 - PNG 최적화 하기  (0) 2015.10.02
티스토리에... D-Day 카운터 달기..  (0) 2011.04.11
AJAX 관련글 2008-03-12  (0) 2008.03.12