이런 png를 쓰는 이유 알고싶네요. 정보
이런 png를 쓰는 이유 알고싶네요.
본문
네이버 css 참고하다가
png파일이 있길래 뭔지 봤더니
이런식으로 아이콘들을 다 하나의 파일로 만들어놨더라구요.
배경 포지션이랑 너비 높이로 자르는 듯 하더라구요.
예전에 네이버 블로그에서 이런 방식에 대해서 본 적 있는데,
Q. 이런 방식의 장점이 있다면 뭔지 궁금합니다.
그리고 이런걸 만들때는 어느정도의 크기여야 좋은지?도 조금 궁금하군요,
추천
0
0
댓글 21개
장,단점이 있는줄 압니다.
장점은 속도빠르고 관리가 쉽고
단점은 초보에겐 적용이 어렵고요..
숙달되면 괘안을듯..
장점은 속도빠르고 관리가 쉽고
단점은 초보에겐 적용이 어렵고요..
숙달되면 괘안을듯..
어떤 점에서 속도가 빠른건지 궁금합니당;
작은 [1] 모양을 표현하기 위해 저렇게 큰 이미지를 다운받게되는것 아닌가요?
아니면 혹시 제 생각에는
저렇게 큰 이미지를 딱 한번 다운받으면
다른 곳에서는 다운을 받지 않게 되는건가요??
작은 [1] 모양을 표현하기 위해 저렇게 큰 이미지를 다운받게되는것 아닌가요?
아니면 혹시 제 생각에는
저렇게 큰 이미지를 딱 한번 다운받으면
다른 곳에서는 다운을 받지 않게 되는건가요??
이미지를 먼저 한번에 로딩하기 때문에 계속해서 웹에서 페이지 들어갈때마다 로딩할필요가 없어서 편하답니다
처음에 적용이 정말 어렵지만 한두번만 해보면 아주 쉽고 편리해요~
처음에 적용이 정말 어렵지만 한두번만 해보면 아주 쉽고 편리해요~
이미지 동일한 10px 짜리를 100개 운영하는것과 1000px 을 불러오는 속도의 딜레이타임과 합리적인 용량을 계산하자면 한번의 이미지를 반복적으로 위치만바꿔 이용하는것이 더 현명하다는 결론이 나옵니다.
일단 다운 받은 파일은 캐쉬에 저장되기때문에 다시 다운 받을 일을 없을 듯합니다.
캐쉬삭제를 하지 않는 이상요
캐쉬삭제를 하지 않는 이상요
그러면 위 통이미지의 조각 이미지(아이콘)를 많이 사용 않는 그런 페이지에서는 어떠 한가요?
또 한가지 첫 메인 페이지 접속시에 로딩 시간은요?
물론 상황에 따라서 좋을수는 있지만요.
또 한가지 첫 메인 페이지 접속시에 로딩 시간은요?
물론 상황에 따라서 좋을수는 있지만요.
투명이미지가 지원되는게 gif 와 png 인데
gif 는 색상한계가 256컬러라 제약이 좀 있는 반면 용량은 png 에 비해서 훨씬 작습니다
통파일로 만드는 이유는 작은이미지 수십개 로딩하는것보다 속도가 빠르기 때문이구요..
gif 는 색상한계가 256컬러라 제약이 좀 있는 반면 용량은 png 에 비해서 훨씬 작습니다
통파일로 만드는 이유는 작은이미지 수십개 로딩하는것보다 속도가 빠르기 때문이구요..
수정이 어려운 단점도 있습니다.
그래서 결론은 전 스프리트 이미지 안합니다.ㅋㅋ
그냥 적용하기 쉽고 수정하기 쉽게..
낮게 이미지 사용..
진짜 저거 수정하거나..할려면...
손에 안익어..흠냐..
그냥 적용하기 쉽고 수정하기 쉽게..
낮게 이미지 사용..
진짜 저거 수정하거나..할려면...
손에 안익어..흠냐..
저도 이천이지님과 같네요, 아무리 빠르고 뭐해도...
스프리트 이미지를 사용을 않하게 되더라구요...
베짱이처럼...ㅎㅎ
스프리트 이미지를 사용을 않하게 되더라구요...
베짱이처럼...ㅎㅎ
또다른 장점으로, 개별 이미지를 불러오는 http request 를 하나로 통합한다는 점도 있습니다.
아무리 작은 이미지라도 http request 각각의 헤더도 작지 않다고 (200B ~ 2KB) 알고 있습니다. ^^
아무리 작은 이미지라도 http request 각각의 헤더도 작지 않다고 (200B ~ 2KB) 알고 있습니다. ^^
대형 포털사이트에서는 사용시 트래픽을 많이 줄일수 있죠.
그래서 대부분 동시접속자가 꽤 많은사이트에서는 저렇게 사용합니다.
속도는 글쌔요 ㅋ
그래서 대부분 동시접속자가 꽤 많은사이트에서는 저렇게 사용합니다.
속도는 글쌔요 ㅋ
일단 한번불러오는거랑 여러번 불러오는거에 차이가있죠ㅇㅅㅇ
사이트 속도 측정하는곳같은데 가보시면 이런식으로 안하면 점수를 깝니다...
그정도로 속도올리시는데 많은 역활을 해줍니다!
그정도로 속도올리시는데 많은 역활을 해줍니다!
그렇군요...!!
저도 자주 쓰는 아이콘들은 파일 하나에 몰아서 넣고 css로 위치만 조절해서 쓰고 있습니다.
이미지는 캐시 파일을 사용하게 되니 아무래도 서버에 부담이 덜 할 것으로 보입니다.
이미지는 캐시 파일을 사용하게 되니 아무래도 서버에 부담이 덜 할 것으로 보입니다.
좋은거 또 하나 배우고 가네요 ...
그렇군...
근데.... 어떻게 만들고 어떻게 쓰는건지...
부터... 배워야 ....할 것 군요...
근데.... 어떻게 만들고 어떻게 쓰는건지...
부터... 배워야 ....할 것 군요...
저 같이 수정이 많은 사람은 오히려 불편하더라구요.;
서버 요청을 줄여주기 위해서 css sprite 를 사용합니다.
요청이 많으면 서버나 클라이언트 모두 속도가 느려집니다.
http://developer.yahoo.com/performance/rules.html#num_http
http://www.hoons.net/lecture/view/371
요청이 많으면 서버나 클라이언트 모두 속도가 느려집니다.
http://developer.yahoo.com/performance/rules.html#num_http
http://www.hoons.net/lecture/view/371
css sprite
