사이트 속도 개선 - PNG 최적화 하기
한국 사람들은 사이트가 5초가 지나도록 열리지 않으면 닫는다고 하는데...
요즘에는 모바일에도 그 규칙은 적용되나 보다.
하여 모바일 사이트를 빠르게 하기 위해서 여러가지 방안을 찾고 있는데...
그중에 가장 큰 이슈가 역시...
이미지더라.. PC에서는 대형 이미지를 쓰고...
모바일에서는 작은 이미지를 쓰고.. 할 수도 있긴 한데...
그럼 큰 모바일 디스플레이에서는?.... 쩝...
어쨋든.. 일단 있는 이미지부터 최적화 해서 쓰자라는 결론에 도달한다.
하여 공통 요소로 많이 쓰는 PNG부터 최적화 해보고자 한다.
| 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 pngcrush, OptiPNG 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 |
티스토리에... D-Day 카운터 달기..
뭐 흔하디 흔한... 자바스크립트로 만드는 날짜 계산기지만...(별 어려운 기술도 아니구요.-.-)
하지만 혹시 필요한 사람 있을까? 혹은... 참고 할 사람이 있을까? 하여... 살짝 등록합니다.
(나중에 소스 잘못 리셋해서 내가 다시 쓸 수도 있고...)
<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 |
AJAX 관련글 2008-03-12
강좌 제목 : ASP.NET AJAX와 Silverlight를 활용한 RIA 구현
http://www.taeyo.pe.kr/Lecture/WPFE/ria01.asp
rototype.js 를 위한 개발자 노트
http://openframework.or.kr/framework_reference/prototype_js/1.4.0/prototype.js.html
XAML 구조 정의(MSDN)
http://msdn2.microsoft.com/en-us/library/ms747122.aspx
ECMA Script(Scma-262)
http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
ASP.NET AJAX가 궁금해?
'Web Tech > JavaScript,XML' 카테고리의 다른 글
| 사이트 속도 개선 - PNG 최적화 하기 (0) | 2015.10.02 |
|---|---|
| 티스토리에... D-Day 카운터 달기.. (0) | 2011.04.11 |
| Prototype.js (0) | 2008.03.12 |
Prototype.js
prototype.js는 Sam Stephenson에 의해 작성된 자바스크립트 라이브러리이다. 이 놀랍도록 멋진 생각과 표준에 의해 잘 작성된 코드의 일부는 웹2.0의 특성을 나타내는 풍부하고 상호작용하는 웹페이지와 많은 연관을 가진다.
만약 당신이 최근 이 라이브러리를 사용하기 시작했다면, 당신은 아마도 이 문서가 가장 좋은 지시사항중에 하나는 아니라는것을 알아차렸을것이다. 나 이전에 다른 많은 개발자들처럼, 나는 소스코드와 이것을 사용한 경험에서 prototype.js에 대한 지식을 가지게 되었다. 나는 모든 이가 배우고 공유하는 동안 좀더 많은 정보를 얻게 되는게 가장 좋은 것이라고 생각한다.
나는 objects, classes, functions, 그리고 이 라이브러리에 의해 제공되는 확장을 위한 비공식적인 참조문서 또한 제공한다.
당신이 예제와 참조문서를 읽었을때, Ruby프로그래밍 언어에 친숙한 개발자는 Ruby의 내장 클래스와 이 라이브러리에 의해 구현된 많은 확장 사이의 의도적인 유사성을 알아차리게 될것이다.
'Web Tech > JavaScript,XML' 카테고리의 다른 글
| 사이트 속도 개선 - PNG 최적화 하기 (0) | 2015.10.02 |
|---|---|
| 티스토리에... D-Day 카운터 달기.. (0) | 2011.04.11 |
| AJAX 관련글 2008-03-12 (0) | 2008.03.12 |
