이미지 스프라이트

인터넷 프로토콜에서 이어지는 보충 내용.

매번 연결할때마다 3 way handshake를 해야되니 RTT가 증가하는 문제가 있다.
이를 해결하기 위하여 여러가지 방법을 사용하였다.

이미지 스프라이트 (이미지 스플리팅)

• 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지

사용법

이미지 스프라이트는 HTML의 <img> 태그를 사용해서 이미지를 삽입하는 것이 아닌 CSS의 background 속성을 이용하여 삽입한다.

이미지를 이용한 html 태그.

<img src="naver.jpg" alt="Naver" class="naver">
<img src="facebook.jpg" alt="Facebook" class="fb">
<img src="google.jpg" alt="Google" class="google">
<img src="kakao.jpg" alt="Kakao" class="kakao">

이미지 스프라이트를 사용하기위해 바꾼 태그

<a href="#" class="naver">네이버</a>
<a href="#" class="fb">페이스북</a>
<a href="#" class="google">구글</a>
<a href="#" class="kakao">카카오</a>

css 태그

a::after {
      content: "";
      display: block;
      width: 28px;
      height: 28px;
      background-image: url(./asset/images/css_sprites.png);
}

.naver::after {
      background-position: -58px -58px;
    }

 .fb::after {
      background-position: -10px -10px;
    }

 .google::after {
      background-position: -58px -10px;
    }

 .kakao::after {
      background-position: -10px -58px;
    }

이미지 스프라이트 기법을 사용하기 위해 필수적으로 작성해줘야하는 속성이 있다.

width, height : 삽입할 이미지의 크기를 결정한다.
background-image : 삽입할 이미지의 경로를 설정한다.
background-position : 이미지에서 사용할 이미지의 위치를 설정한다.

왜 사용 하나?

1. 이미지 로딩 속도 향상 (img 태그를 이용하는것 보다 CSS의 속성을 이용해 사용하는 것이 빠르다.)

2. HTML 마크업이 간결. 스크린 리더의 탐색 속도가 향상된다. - img 태그를 사용하면 하나씩 하나씩 읽어야 된다. background속성으로 적용하게 되면 스크린 리더가 읽을 필요가 없는 "배경 이미지"로 인식하게 되어 탐색 속도가 향상. 의미가 없고 디자인을 목적으로 하는 이미지를 위해 사용하는 것이 적합하다.

3. 여러개의 이미지를 묶으므로 하나의 파일만 관리하면 된다. 다만 여러개의 이미지를 묶을시 관련 있는 이미지만 묶는 것이 좋다.

단점

1. 웹페이지가 업데이트됨에 따라 이미지가 추가된다면 스프라이트 이미지를 다시 만들어야하는 번거로움이 있다. 수정이 잦은 이미지라면 개별 관리하는 것이 편함.

2. 이미지 파일을 따로 따로 관리했을 때는 하나가 문제가 생기면 그 하나만 로딩이 안됨. 하지만 스프라이트 같은 경우 문제가 생긴다면 합쳐진 이미지를 전부 볼 수 없는 상황이 생긴다.