본문으로 바로가기

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

블로그 이미지 로딩 빠르게하기 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
}



수정 전수정 후


이런식으로 말이죠.


그럼 3개를 각각 이미지 로드 할 것을

한번의 이미지 로드 만으로도 표현이 가능하겠죠??!


마지막으로 잘되었는지 확인을 해봅시다!!!



진짜 마지막으로 네트워크 변화에 대해서 알아보자


요청 수가 줄어드니 페이지 로드 속도도 확실히 줄어드는게 보이죠?!


CSS Sprite Image 기법은 아직도 많은 웹페이지에서 사용되는 기술 중 하나 입니다.

모바일 화면과 PC 화면이 따로 분리되어있는 페이지이거나

또는 반응형 웹이라도 화면 크기에 상관없는 조그만한 아이콘 같은 이미지나 버튼들은

해당 처리를 한다면 브라우저 캐싱도 되면서 빠른 페이지 로드를 낼 수 있습니다!


Base64을 사용하기 힘든 크기가 큰 이미지 파일들을 효과적으로 로드할 수 있는 방법이라고 생각합니다.

만약 작은 이미지들은 URI 스킴으로 페이지에 코드를 직접 집어 넣는 것이 최고인 것 같구요.


암튼 다들 페이지 로드 속도 향상을 위해 힘을 내봅시다!! 끝.


진짜 진짜 마지막 핵 꿀팁



다른 이미지는 괜찮은데 유독 배경으로 사용하는 이미지가

티스토리 파일라이브러리에서 갖고올 경우 응답속도가 현저하게 느려지는 현상이 발생합니다.ㅠ_ㅠ

파일의 해상도가 커서 발생하는지는 몰라도?

크기는 그렇게 큰 파일이 아닌데 읽다가 중간에 짤리는 경우가 너무 많더라구요 ㅠ_ㅠ

다른 이미지 파일은 전부 빠르고 괜찮습니다.


그래서 배경은 외부에서 받아서 오는 것도 페이지 로딩을 빠르게 할 수 있는 방법입니다.

텀블러에서 이미지를 로드 시키고 있습니다.

신고

댓글을 달아 주세요

  1. BlogIcon SONYLOVE 2016.02.28 00:46 신고

    오!! 이거 다용도로 활용할 수 있겠는데요. 이미지 뿐만 아니라 아이콘 폰트와 백그라운드를 함께 써도 멋지게 될꺼 같아요.

  2. BlogIcon .YJH. 2016.02.28 11:49 신고

    코코님 방명록 좀 봐 주세요..댓글은 보시는데 방명록은 안보시는 것 같아서 -_-;;..
    아니면 답을 주기 싫어서 그러신가?

    • BlogIcon COCO Media 2016.02.28 12:04 신고

      아아 알림이 묻혀서 ㅠ 못들어가서 못봤네요 방명록은 평소에 잘안들어가서 ㅎㅎ 답변드리겠습니다!!

    • BlogIcon .YJH. 2016.02.28 13:19 신고

      코코님이 또 방명록을 확인 안하실 것 같아서 댓글로 다시 인사드립니다. 해결했습니다.. 감사합니다..^^
      그리고 혹시나 도움이 될까해서 제가 방명록에 비밀글 하나를 남겼는데...한번 확인해 보세요^^

  3. BlogIcon SONYLOVE 2016.02.28 15:04 신고

    테이블 이미지 듀얼시 짜부되는거 해결방법이 있습니다. ㅎㅎ
    CSS 의 이미지 배치 부분에서 Table.dual .imageblock 의 padding-top 값을 변경해주면 되더라고요. 기본 상태는 위 아래가 눌려보여서 저는 값을 현재 68.25% 로 사용중입니다.

    • BlogIcon COCOSOFT COCO Media 2016.02.28 15:17 신고

      우와 좋은정보 감사합니다 사실 저도 티스토리 블로그 3년넘게 운영하면서 듀얼기능이랑 사진에 자막 넣는기능 있는지 최근에 처음알았습니다;;; ㅠㅠ 에디터 위쪽만 보니 오른쪽에 이런 기능이 있는지도 몰랐네요 ㅎㅎ
      앞으로 자주사용해야겠습니다 기존의 게시글들도 하나씩 고치고있는데 오래 걸릴 것 같아요 ㅎㅎ

      이미지 좋은정보 감사합니다. 바로 padding값 조정해봐야겠네요^^

    • BlogIcon SONYLOVE 2016.02.28 15:23 신고

      금방 고치셨네요. ㅎㅎ
      역시 단번에 ㅋㅋㅋ

티스토리 툴바