스티브 사우더스가 쓴 웹 사이트 최적화 기법을 보시면 잘 설명되어 있습니다.
HTTP 요청수를 줄일 수 있다는 점, 속도면에서 향상된다는 점 등 외에도 개인적으로 디자인 유지/보수, 확장에 있어서 큰 장점이 있는 것 같습니다.
단 CSS가 제거되었을 경우 background-image 만으로 버튼을 구성할 경우 버튼 자체가 보이지 않을 수 있기 때문에 (사용자가 인지할 수 없을 수 있기 때문에) 대체 텍스트를 제공하는 것이 좋을 것 같습니다.
CSS 교체만으로 디자인(레이아웃)을 바꿀 수 있다면, CSS Sprite 를 사용하면 이미지 파일 교체만으로 색이나 질감 등의 분위기를 바꿀 수 있습니다. ^^
imagemap 을 말씀하시는 거 같네요. imagemap 은 원하는 위치에 원하는 영역만큼만 표현하기가 어렵지요. (불가능할지도)
imagemap 과 CSS Sprite 는 속도 자체는 크게 차이가 나지는 않지만 사용성에 있어서 더 유연합니다.
그리고 합쳐진 이미지는 여러개의 분리된 이미지보다 용량이 오히려 더 작을 수 있는데 컬러테이블이나 포맷정보와 같은 여러 정보가 하나로 합쳐질 수 있기 때문이라고 하네요.
댓글 3개
HTTP 요청수를 줄일 수 있다는 점, 속도면에서 향상된다는 점 등 외에도 개인적으로 디자인 유지/보수, 확장에 있어서 큰 장점이 있는 것 같습니다.
단 CSS가 제거되었을 경우 background-image 만으로 버튼을 구성할 경우 버튼 자체가 보이지 않을 수 있기 때문에 (사용자가 인지할 수 없을 수 있기 때문에) 대체 텍스트를 제공하는 것이 좋을 것 같습니다.
CSS 교체만으로 디자인(레이아웃)을 바꿀 수 있다면, CSS Sprite 를 사용하면 이미지 파일 교체만으로 색이나 질감 등의 분위기를 바꿀 수 있습니다. ^^
imagemap 과 CSS Sprite 는 속도 자체는 크게 차이가 나지는 않지만 사용성에 있어서 더 유연합니다.
그리고 합쳐진 이미지는 여러개의 분리된 이미지보다 용량이 오히려 더 작을 수 있는데 컬러테이블이나 포맷정보와 같은 여러 정보가 하나로 합쳐질 수 있기 때문이라고 하네요.