변경된 구글 코리아의 첫 화면을 뜯어 보자
후니님의 글을 보고, 나도 최근 비슷한 작업을 한터라, 그렇게 하면 정말로 0.00001초라도 뭔가 도움이 되는 걸까하여 이미지를 조금만 더 쪼개 보고 싶은 생각이 들었다. FF에 “Web Developer” addon을 설치한 후, 구글 코리아 첫 화면으로 가서 Images > View Image Information 을 선택해 보자.
66*165 픽셀로 이루어진 6,531바이트짜리 tab_sprite_all.gif를 33*33 픽셀 10개로 쪼개서 크기를 모두 합해보면 9,512 바이트로 약 3,000 바이트나 큰 것을 확인할 수 있다. 이미지 품질로 인한 오해를 없애기 위해 전체 이미지를 떠서 동일한 형식으로 저장해보니 6,556 바이트로 원본과 거의 동일하였다. (gimp 2.2 이용)
총 이미지 크기를 절약하는 것 외에도 몇가지 이득을 더 볼 수 있다. 전체 이미지와 background-position를 이용하면 개별 이미지마다 background-url을 지정하는 것보다 CSS 코드의 길이가 훨씬 줄어든다. 또한 각 이미지로 쪼개져 있는 경우, 네트워크 속도가 느리면 먼저 로딩되는 이미지부터 단계적으로 떠오르지만 통이미지를 사용할 경우는 (이미지가 처음으로 나타나는 시간은 저금 더 걸릴 수 있겠지만) 이러한 현상이 발생하지 않다. 벤치마크 테스트 같은 것은 해 보지 못했지만, 전송량이 줄어든 것은 확실하다.
최근 퍼블리싱 작업한 사이트에서도 메인메뉴는 자바스크립트를 전혀 사용하지 않았고, CSS 만으로 background-position을 이용하여 구현하였다. 점점 테이블식 레이아웃에서는 한계적이던 것들이 css 레이아웃에서는 정갈하게 구현되는 기법들이 널리 보급되고 있는듯하다.
RSS feed: http://makeittrue.net/wp/2007/06/04/60/feed/
TrackBack URI: http://makeittrue.net/wp/2007/06/04/60/trackback/
Hooney said, June 5, 2007 @ 3:48 pm
제 글에서 부족한 부분을 인환님이 제공해주셨네요. 저 또한 이미지를 하나로 사용할 때와 여러개로 나눠서 사용할 때, 각각의 이미지 총 크기(byte)와 CSS 코드, 브라우저 랜더링 속도 등을 구체적으로 비교해서 분석하는 글을 작성하고 싶었는데, 그렇게 하지 못했거든요. 덕분에 제 의견의 설득력이 생길 수 있었네요. 감사합니다.
Using
Mozilla Firefox 2.0.0.4 on 
Windows Vista
Quote
mAGa said, June 5, 2007 @ 6:09 pm
구체적인 데이터를 더 확보하고 싶었으나, 시간적 여유가 나지 않아 이정도에서 마무리를 하였습니다.
항상 좋은글 잘 읽고 있습니다.
Using
Mozilla Firefox 2.0.0.4 on 
Windows 2000
Quote