image background-repeat 으로 할 때와 css Sprite
적송
전 한번씩 시안에서 bg를 넣을때 PSD에서 가로 1px 세로는 지정된 px로 자른후 repeat-x 에서 만들고는 하는데요.
이럴때와 background-color로 할때와 속도차이가 있는지 궁금합니다.
거의 느끼진 못하겠지만 아무래도 repeat-x일때가 서버에 요청을 많이 하는건가요? 아니면. 한번 가로가 1px짜리 이미지를 요청받아 그저 repeat-x 시킬 뿐인가요??
이런 궁금증을 일으키게 한 원인이 css sprite 때문인데요..
이것또한, 이미지 요청이 많은 부분을 서버의 요청을 최소화 시켜 속도향상을 시키는 기법으로 알고있는데요.
블로그의 예제들을 보니 대부분의 파일들의 확장자명이 png 이던데, 왜 png 파일을 css sprite 기법으로 많이 사용하나요??
gif 도 종종 있긴 했지만, 대부분이 png 파일이었거든요..
질문을 정리하면
1. background-color 일때와 가로1px 세로 임의의 px인 img를 repeat-x 로 돌릴때의 속도차이??(질문이 좀 허접하네요.ㅋㅋ background-color와 background-image 와의 속도차이가 잇는가 정도로 이해해 주세요~)
2. css sprite 에서 png를 많이 사용하는 이유,
이것이 궁금하군요..
-
제나
2. 그라데이션이나 그림자 등등이 들어가는 디자인때문에 png를 쓰는걸거예요.
256컬러를 지원하는 gif보다 png가 더 많은 색상을 표현해주기때문에 용량은 올라가지만 이미지의 질과 재현율(??)이 높아집니다. 일반적인 이미지가 아니라 투명 또는 반투명 이미지를 gif와 png로 각각 저장해서 직접 비교해보시면 차이를 느끼실거예요. gif는 256색만 지원하기때문에 깔끔하게 저장이 안되죠. ㅎㅎ -
VE
답변 해주신 분들 모두 감사합니다 ^^* 투명처리를 안한다면 png 파일로 하는것이 더 용량을 적게 차지 하는가 하는 예상을 해보네요 ..ㅋㅋ 구글 사이트에서도 sprite 부분의 파일이 png더라구요 ㅋㅋ
-
딥핑크
png로 하는 이유를 어디선가 분명히 봤는데 도저히 기억이 안나는군요 -ㅠ-;;; 아 그리고 별수다님 말씀에서 png에서 투명 bg 처리를 하지 않으면 ie6도 아무런 문제가 없습니다
-
등대
저도 제 생각 ..
1. 저같은 경우 background image에 그라데이션이 동일한 페턴 (위에서 아래) 이 들어가있을때 가로1px 새로 * 로 잘라서 repeat 시켜줍니다. 그 외에는 background-color로 지정을 해주구요.. 특별한 경우가 아니면요 ..
2. sprite는 저도 잘 모르겠네요 ... 저도 gif를 주로 사용하기때문에 .. 갑이 원하면 핵써서 해주곤 한다는... -
두온
제 생각입니다 ^^;;
1. 작은 영역에서는 큰 차이는 없습니다. 하지만 큰 영역에서는 1px을 repeat 시킬 경우 속도에 영향을 끼칠 수 있습니다. 그렇기 때문에 1px 보다는 repeat의 횟수를 줄이기 위해 5px, 10px 등 큰 이미지를 사용하기도 합니다.
2. sprite에 png를 많이 사용하는 이유는 잘 몰르겠네요;; 사실 png의 경우 ie6에서 제대로 표현해주지 못하기때문에 더 많은 코드가 필요하게 됩니다. js 또는 filter