css_sprites 독인가? 약인가

CSS Sprites
독인가? 약인가?
박상혁
12.12.03

이 발표자료에는
간접광고가 포함되어 있습니다.

여러 개의 이미지를
하나의 이미지 plate에 모아
CSS에서 배경이미지로 처리해
특정 부분만 보여주는 방법

응답속도를 빠르게 하는 점

Yslow
Page Speed
Steve Sauders

웹 접근성 준수가 어려운 점

Image Defect
대체 텍스트를 보여줘~

CSS Sprites 쓰면 응답속도는 빠르지만
웹 접근성 준수가 어렵다.

CSS Sprites 코딩 방법이 여러 가지던데?
얼마나 빨라져요?
어떤 지침을 준수하기 어렵나요?
두 마리 토끼를 잡을 수 없나요?

Overlay
Void Element에 CSS background-image 속성
을 적용하여 Sprites을 구현하는 방법.

Letter blow
배경 처리한 Element에 CSS의 Text-indent나
line-height 속성을 이용하여 Inner-text의 내용
을 Viewport 밖에 위치하도록 하는 방법

Vanish
배경 처리한 Element의 descendant-node
Inner-text에 blind 관련 속성을 부여하여 해당
텍스트를 화면에서 보이지 않도록 하는 방법

Overlay

<a href=”#”>질문<span></span></a>

a{display:block;overflow:hidden;position:relative;width:26px;height:16px}
a span{position:absolute;top:0;left:0;width:26px;height:16px;background:이미지}

<a href=”#”>질문<img src=”1x1빈이미지” width=”1” height=”1” alt=””></a>

a img{position:absolute;top:0;left:0;width:26px;height:16px;background:이미지}

Overlay

<span class="btn"><button type="button"><span>버튼</span></button></span>

.btn{display:block;width:26px;height:16px;background:url(이미지) no-repeat}
button{overflow:hidden;width:26px;height:16px}
button span{position:relative;z-index:-1}

Letter blow

<a href=”#”>질문</a>

a{overflow:hidden;display:block;width:26px;height:16px;background:이미지;text-indent:-
9999px}
a{overflow:hidden;display:block;width:26px;height:16px;background:이미지;line-
height:999em}

<a href=“#”><span>질문</span></a>

a{display:block;width:26px;height:16px;background:이미지}
a span{position:absolute;top:0;left:-9999px}

Vanish



a span{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-
size:0;line-height:0}

ETC

<h2><span></span>질문1</h2>

h2 span{display:inline-block;width:10px;height:10px;background:이미지}

<h2>질문1</h2>

h2{padding-left:10px;background:이미지}

ETC

<p>질문1<span>new</span></p>

p span{display:inline-block;width:10px;height:10px;background:이미지;text-indent:-
9000px}

<p>질문1<span>new<span></span></span></p>

p span{display:inline-block;overflow:hidden;position:relative;width:26px;height:16px}
p span span{position:absolute;top:0;left:0;width:26px;height:16px;background:이미지}

Overlay


<a href=”#”>질문<img src=”1x1빈이미지” width=”1” height=”1” alt=””></a>

a img{position:absolute;top:0;left:0;width:26px;height:16px;background:이미지}

스크린 리더
Image Defect CSS Defect 고대비 키보드 네비게이팅 인쇄
(센스리더)
대체텍스트가 일부 대체텍스트가 일부 포 커 스 확 인 불 가
정상 정상(질문링크) 불가
만 보일 수 있음 만 보일 수 있음 (꼼수)
정상 ??(질문그래픽링크) 불가

Letter blow
<a href=”#”>질문</a>

a{overflow:hidden;display:block;width:26px;height:16px;background:이미지;text-indent:-
9999px}
a{overflow:hidden;display:block;width:26px;height:16px;background:이미지;line-
height:999em}

스크린 리더
(센스리더)
대체텍스트 확인 불 대체텍스트 확인 불
정상 정상(질문링크) 정상 불가
가 가

Vanish


a span{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-
size:0;line-height:0}

스크린 리더
Image Defect CSS Defect 고대비(XP) 키보드 네비게이팅 인쇄
(센스리더)
대체텍스트 확인 불 대체텍스트 확인 불
정상 정상(질문링크) 정상 불가
가 가

접근성
Overlay Letter Blow Vanish

Image Defect 대체텍스트가 일부만 보임 대체텍스트 확인 불가 대체텍스트 확인 불가

CSS Defect 정상 정상 정상

스크린 리더 정상 정상 정상

대 체 텍 스 트 가 일부 만 보 임
고대비(XP) 대체텍스트 확인 불가 대체텍스트 확인 불가
(IE6은 +2)

키보드 네비게이팅 outline 표시 안됨 (꼼수) 정상 정상

인쇄 불가 (사용자 설정 변경 필요)

Overlay 방식이 그나마 나은 방법
Image defect, 고대비(XP), outline을 해결하면
완벽해!!




a {display:block;overflow:hidden;position:relative;width:26px;height:16px; font-size:12px;
margin:-1px;padding:1px; /* outline 일부 노출 */
_font-size:10px; /* ie6 고대비 글자 강제 키움 대비 */
}
a span{position:absolute;top:1px;left:1px;width:26px;height:16px;background:이미지}


a {display:block;overflow:hidden;position:relative;width:26px;height:16px; font-size:12px;
margin:-1px;padding:1px; /* outline 일부 노출 */
_font-size:10px; /* ie6 고대비 글자 강제 키움 대비 */
}
a span{position:absolute;top:1px;left:1px;width:26px;height:16px;background:이미지}

스크린 리더
(센스리더)
정상 정상 불가

스크린 리더
(센스리더)
대체텍스트가 길면 대체텍스트가 길면 배경이미지 체크 안
정상 정상 일부 노출 가능
일부만 보임 일부만 보임 내

Overlay 방식으로 하고
대체텍스트를 width에 맞춰서 짧게…^^
좋은 방법 있으면 소개해주세요

Windowx XP SP3 / Intenet Explorer 6.0
HttpWatch Professional 6.1
10회 평균 (초기접속기준)

기본 테스트
N사 사내 네트워크

우리집(100M 광랜)

기본 테스트

request time(s) time(s)
Type
Normal Sprites Normal Sprites Normal Sprites

Total 17 2 0.078 0.050 0.317 0.155

• 테스트 결과와 같이 페이지 로딩 시간이 약 15~20% 향상 되는 것으로 확인 되었습니다.
• 서버 요청 1건당 요청 헤더 파일의 크기는 약 300bytes 로 요청 수를 줄이는 것만으로도 성능이 향상
되는 것을 확인 할 수 있습니다.
• CSS 파일의 용량은 약 2,000 bytes 늘어났지만 속도는 향상된 것으로 보아 CSS 파일의 용량 증가보다
는 요청 수를 줄이는 것이 성능에 더 큰 영향을 미치는 것으로 확인 되었습니다.
• 네트워크의 속도가 느릴수록 성능 향상을 명확히 확인 할 수 있었습니다.

심화 테스트
파일 크기가 동일하고 파일 요청 수만 변경한 경우
10 requests 20 requests 40 requests 80 requests
200kb 20kb * 10개 10kb * 20개 5kb *40개 2.5kb * 80개
400kb 40kb * 10개 20kb * 20개 10kb * 40개 5kb * 80개

파일 요청 수가 동일하고 파일 크기만 변경한 경우
100kb 200kb 400kb 800kb
20 requests 5kb * 20개 10kb * 20개 20kb *20개 40kb *20개
40 requests 2.5kb * 40개 5kb * 40개 10kb * 40개 20kb * 40개

네트워크 환경은 100Mbps급 회선과 20ms의 지연을 발생시켜 만든 2Mbps급 회선을 사용했다.
클라이언트는 고 성능의 PC(i5_760 CPU, 4G Memory, Windows 7, IE8, no cache)와
저 성능의 PC(p4 2.8Ghz CPU, 1G Memory, Windows XP SP3, IE7, no-cache ) 2대를 기준으로 실험했다.

심화 테스트
용량 동일(200k), 리퀘스트 다를 때 - 100 - 1
빠른 회선(100Mbps)과 느린 회선(2Mbps) 용량 동일(200k), 리퀘스트 다를 때 - 2 - 1

모두 파일 요청수가 작아질수록 onload 이벤 용량 동일(400k), 리퀘스트 다를 때 - 100 - 1

14,000 용량 동일(400k), 리퀘스트 다를 때 - 2 - 1
트 발생 시간이 단축된다. 12,000
10,000
80개의 파일 요청 수를 10개로 줄이면
8,000

onload 이벤트 발생 시간을 약 50% 줄일 수 6,000
4,000
있다. 2,000
-
r80 r40 r20 r10

파일 크기 동일하고 파일 요청 수를 변경했을 때 고성능 PC의 onload 발생시간

100M 100M 2Mbp 100Mb 2Mbp 100M 2Mbp
2Mbps
bps bps s ps s bps s

200kb 163 4,041 104 2,694 74 2,778 69 2,188

400kb 152 4,218 102 3,694 110 3,369 84 2,982

심화 테스트
용량 동일(200k), 리퀘스트 다를 때 - 100 - 1
빠른 회선(100Mbps)과 느린회선(2Mbps) 모 용량 동일(200k), 리퀘스트 다를 때 - 2 - 1
용량 동일(400k), 리퀘스트 다를 때 - 100 - 1
두 파일 요청수가 작아질수록 onload 이벤트
용량 동일(400k), 리퀘스트 다를 때 - 2 - 1

발생 시간이 단축된다. 14,000
12,000
고성능 PC에 비해 약 30% 더 단축효과가 있 10,000
8,000
다. 특이한 점은 파일 요청 수를 80개에서 40개 6,000
4,000
로 줄이면 단축률은 50% 인데 20개에서 10개 2,000

로 줄이면 10% 밖에 되지 않는다. -
r80 r40 r20 r10

파일 크기 동일하고 파일 요청 수를 변경했을 때 저성능 PC의 onload 발생시간

2Mbps

200kb 687 10,732 359 5,924 248 3,885 196 3,544

400kb 757 12,455 415 7,143 274 5,082 228 4,493

심화 테스트
다운로드하는 파일 크기가 작아질수록
리퀘스트 고정(20), 용량이 다를때 - 100 - 1

onload 이벤트 발생 시간이 단축된다. 리퀘스트 고정(40), 용량이 다를때 - 100 - 1
14,000

9,000

4,000

(1,000)
800k 400k 200k 100k

파일 요청 수가 동일하고 파일 크기를 변경했을 때 고성능 PC의 onload 발생시간

800kb 400kb 200kb 100kb

2Mbps

20 requests 251 5,089 85 3,576 71 2,817 72 1,989

40 requests 108 3,754 107 3,549 101 2,897 115 2,409

심화 테스트
느린회선(2Mbps)은 다운로드 하는 파일 크

기가 작아질수록 onload 이벤트 발생 시간이 리퀘스트 고정(40), 용량이 다를때 - 100 - 1

단축된다. 14,000

특이한 점은 동일한 크기의 파일을 다운로드 9,000

하더라도 파일 요청 수가 적으면 onload 이
4,000
벤트 발생 시간이 더 단축된다는 사실이다.
(1,000)
800k 400k 200k 100k

파일 요청 수가 동일하고 파일 크기를 변경했을 때 저성능 PC의 onload 발생시간

800kb 400kb 200kb 100kb

100M 100M 2Mbp 100Mb 100M 2Mbp
2Mbps 2Mps
bps bps s ps bps s

20 requests 392 7,341 273 5,140 247 4,922 244 3,505

40 requests 348 7,260 413 7,078 362 6,044 340 5,796

• 파일 크기를 줄이는 것과 파일 요청 수를 줄이는 것 모두 성
능 개선 효과가 있다.
• 파일 요청 수를 줄이는 것은 모든 환경에서 성능 개선 효과
가 있고 특히 저성능 PC, 느린 네트워크 환경에서 성능 개
선 효과가 더 좋다.
• 파일 크기를 줄이는 것은 PC 성능과 네트워크 속도의 조합
에 따라 성능 개선 효과가 다르다.
• 개선 전 이미지 요청 수가 많고 적음에 따라 성능 개선 차이
가 크다.

성능, 접근성
두 마리 토끼를 잡는 건 힘들다.

필요한 부분에 적절히 사용하는 것만으로는
응답속도 개선 효과는 글쎄…
어설프게 적용하면…

정보를 포함하지 않은 이미지만
배경이미지로 처리하는 것이 Best Practice !!

HiveLab에서 식구 찾아요~
JOBKOREA에서 HiveLab으로 검색하시거나
2부에 물어보세요…

감사합니다.

㈜Hivelab 웹표준개발팀 박상혁
parkbur@hivelab.co.kr
Facebook : parkbur
Me2day : bur

css_sprites 독인가? 약인가

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (19)

Similar a css_sprites 독인가? 약인가

Similar a css_sprites 독인가? 약인가 (10)

css_sprites 독인가? 약인가