iPhone의 caching 한계값(25 Kbytes)을 넘는 치장 목적의 커다란 배경 그림은 필요 없겠지.

/* iPhone */
@media only screen and (max-device-width: 480px) {
  #page {background-image: none;}
}

정작, iPhone Simulator에서만 제대로 적용되는 것을 확인함. 😈
그나저나, CSS3의 Media Queries는 iPhone에 내장된 Safari 말고도, Opera Mobile v9 그리고 Opera Mini v4도 지원한다.
참고 – A List Apart: Articles: Return of the Mobile Style Sheet

웹 사이트 최적화 덕목들 중에서, JavaScript와 CSS 파일의 압축은 핵심 요소 중 하나다.
여기에 쓰이는 압축 도구로 웹에선 주로 JSMIN나 Packer가 많이 쓰이는데, 압축 효율과 안전성 면에서 YUI Compressor를 따를 수 없다.

YUI Compressor의 터미널 사용 기본 용법을 보면 다음과 같다:

$ java -jar yuicompressor-2.4.1.jar myfile.js -o myfile-min.js --type js|css --charset charset --nomunge --preserve-semi --disable-optimizations

이렇게 놓고 보면 터미널을 열고 일일이 타이핑 하는 수고가 꺼려질 법도 한데, 반갑게도 CSS와 JavaScript 파일은 YUI Compressor TextMate Bundle을 통해서, 단축키 하나(⌃⇧Y)로 간단하게 압축할 수 있게 되었다.
개인적으로 위젯 형태로 만들어 볼까 생각하고 있었는데, 이놈이 더 안성맞춤이군. 8)

그림 파일을 압축하는데 요긴한 종합 선물 세트라고 해야하나. ImageOptim은 맥용으로 나온 꽤 쓸만한 PNG와 JPEG 그림 파일 압축 도구이다. ImageOptim은 모두 다섯 가지의 압축 도구들(AdvPNG, OptiPNG, PngCrush, JpegOptim, PNGOUT)을 내장하고 있어서, 환경설정에서 각 도구들만의 압축 설정이 가능하다.

저작권 관계로 PNGOUT 바이너리는 직접 내려받아서 적당한 위치에 저장하고, ImageOptim의 환경 설정 창에서 바이너리의 경로를 따로 지정해서 사용해야 한다. 그리고 PNGOUT을 쓰게되면, PngCrush는 기능상 중복되는 부분이 있어서 기능을 꺼줘도 됨.

덧붙임(2012년 3월 5일): 1.4 버전부턴 PNGOUT이 기본적으로 포함되었다.

웹 페이지의 빠른 해석을 위한 조치 중의 하나로, 가장 기초적인 것이 웹 페이지에 사용된 그림 파일들의 용량을 최대한 줄여주는 방법이 있다. 대부분 Photoshop과 같은 그래픽 어플리케이션에 있을 법한 “save for web” 메뉴에서 저장하는 것 만으로 만족할 수도 있겠지만, PNG와 같은 자료 손실 없는 압축 형식을 채용한 파일이더라도, 여분의 압축 효율 최적화 과정을 통해 자료 손실 없이 더 작은 크기의 파일을 얻어낼 수가 있다.

추가적인 PNG 압축을 위한 공개된 GUI 어플리케이션들은 많지만, Mac 용으로 알려진 대표적인 것들은 다음과 같다:

• PNGpong widget
• Ping!
• PNGCrusher

위 어플리케이션들은 공통적으로 속도 빠르고 효율 좋기로 소문난 공개 소프트웨어인 OptiPNG를 사용하고 있는데, 불행히도 내장되어 있는 바이너리 파일이 오래된 버전이거나 혹은 Intel 용으로 제공되지 않고 있으며, 또 세세한 조작이 불가능해서 개인적으로 직접 컴파일해서 사용하는 편이 더 쉬웠다. 마침 얼마 전 0.6 버전으로 갱신되면서 압츅 효율이 더 개선되었다고 한다.

빌드 방법은 Unix 소스 코드와 함께 오는 README.txt 파일에 자세히 소개되어 있는데, 우선 압축을 풀고 터미널에서 다음과 같이 빌드/설치한다:

$ cd optipng-0.6/src/
$ make -f scripts/gcc.mak
.
.
$ make -f scripts/gcc.mak install

이렇게 하면, optipng 바이너리 파일이 /usr/local/bin/ 디렉토리에 위치하게 된다.

원래 command line tool인 이유로, 와일드카드(*)를 써서 디렉토리 안 여러 파일들을 한꺼번에 압축할 수가 있어서 편하고, 사용 옵션을 살펴보면, -o flag를 써서 압축 정도(-o0 ~ -o7)를 지정해 줄 수 있는데, 기본 설정 level(-o2) 만으로도 만족할 만한 결과를 보여준다. 덤으로 압축 시, -i0 옵션을 줘서 (지금은 거의 불필요한) interlaced 정보마저 석제하면 더 높은 압축 결과를 얻을 수가 있다.

using a minifed version of the code is much faster than the packed one – even though its file size is quite larger.

JavaScript Library Loading Speed

The iPhone cache experiment suggests an additional performance rule specific for developing web sites for the iPhone: Reduce the size of each component to 25 Kbytes or less for optimal caching behavior.

Performance Research, Part 5: iPhone Cacheability – Making it Stick

잘게 자르는 것도 요령이 필요하군.