블로그 이미지 로딩 빠르게하기(페이지속도) CSS Sprite Image

안녕하세요. 오늘은 블로그 이미지 로딩을 빠르게 하는 방법 중 하나인

블로그 이미지 로딩 빠르게하기 CSS Sprite Image 에 대해서 알아보겠습니다.

예전 포스팅을 통해서 몇 가지 페이지 로딩 속도 향상을 위해서 방법을 알려드린 적이 있습니다.

첫 번째가 이미지 압축해서 사용하기

https://compressor.io/ - 무손실에 가깝게 이미지 크기를 압축 시켜 주는 사이트입니다.

두 번째 데이타 URI 스킴(Data-URI scheme)Base64 이미지 넣기

http://cocosoft.kr/364

이미지를 따로 라이브러리에 저장하지 않고

HTML이나 CSS 문서에 바로 base64코딩으로 코드로 집어 넣는 방법

(이 방법의 단점은 브라우저 캐시가 안된다는 점이겠죠?)

그리고 마지막 세 번째 오늘 알려드릴

CSS Sprite Image 방법입니다.

이미지 파일들이 특히 아이콘 파일 같은 작은 파일들이라고 할지라도

각각 잘게 나누어져 있으면 서버 HTTP 요청(request)를 많이 발생 시키고

이는 페이지 로딩 속도를 저하시키는 요인입니다.

그래서 한 번의 이미지만 요청을 하고 문서의 삽입하는 방법입니다.

CSS Sprite Image 예

우리가 사용하고 있는 티스토리 admin 관리 홈도

CSS Sprite Image 방식으로 이미지 로딩이 되어 있습니다.

다만 위 방법도 단점이 존재 합니다.

가장 큰 단점은 이미지 수정이 힘들고

해상도에 따라서 이미지가 변형 또는 깨질 수 있습니다.

하지만 브라우저 캐싱이 가능하고 최소한의 요청(단 한번)으로

다양한 이미지를 표현해 낼 수 있다는 점은 큰 장점을 가진 CSS 기법입니다.

현재도 HTTP요청이 많은 주요 포털 사이트들에서 많이 이용되고 있습니다.

네이버 CSS Sprite Image

다음 CSS Sprite Image

최근에는 아이폰 폰트 방식으로 많이 이용 되고 있지만

아이콘 폰트만으로 해결하기 힘든 큰 버튼들에서는 아직도 유용하게 사용되는 방식입니다.

본격적으로 시작해보자

요즘에는 CSS Sprite Generator 를 사용해서 손쉽게

이미지를 만들 수 있고 코드를 붙힐 수 있습니다.

http://spritegen.website-performance.org/

제가 사용하고 있는 CCZ-CROSS 스킨의 방명록 아이콘을 합쳐 보도록 하겠습니다.

이렇게 3개의 파일로 구성 되어있습니다.

secret_48.png (1.50KB)

admin_48.png (282B)

anonymous_48.png (784B)

Clear 를 한 번 누르고

Open 해서 파일을 열어줍니다.

그리고 Downloads 를 누르면

PNG 합쳐진 이미지 파일과 CSS 파일을 받을 수 있습니다.

CSS 파일을 보면 쉽게 코드를 적용 할 수 있게 되어있습니다.

어떤 원리로 되는지 감이 잡히시나요?!!

사진을 하나만 로드시키고!!

background-position 속성으로 이미지의 시작 위치를 달리 해줘서

이미지를 표현 할 수 있게 하는 겁니다.

위와 같이 CSS에 붙혀놓고


<div class="sprite sprite-admin_48"></div>
<div class="sprite sprite-anonymous_48"></div>
<div class="sprite sprite-secret_48"></div>

이런식으로 버튼을 넣을 공간에 클래스 설정을 해주면 되겠죠??

하지만 아래 아이콘들은 따로 클래스들이 있기에 기존 클래스만 변경을 해주겠습니다.

_48.png (1.95KB)

합쳐진 파일을 다운로드해서 압축을 해보니

기존의 3개 각각 있는 것 합쳐진 것 보다 더 파일 크기가 작습니다!

해당 이미지를 스킨에 파일 업로드를 해줍니다.

CSS 수정에 들어갑니다. 따로 .blogicon 클래스값이 있으니 여기에 수정을 해줍니다.

따로 .blogicon의 배경을 로드시켜주고

해당파일에 각각 background-position 만 변경을 시켜줍니다.


/* 회원사진 */
.blogicon {
    background-image: url(./images/spritesheet.png);
    background-repeat: no-repeat;
    display: block
}

.guest_general .blogicon,
.rp_general .blogicon {
    width: 48px;
    height: 48px;
    background-position: -63px -5px
}

.guest_secret .blogicon,
.rp_secret .blogicon {
    width: 48px;
    height: 48px;
    background-position: -5px -63px
}

.guest_admin .blogicon,
.rp_admin .blogicon {
    width: 48px;
    height: 48px;
    background-position: -5px -5px
}