2022.04.19 Today I Learned📚

📸Image Sprite

이미지 스프라이트란, 여러 개의 이미지를 하나의 이미지로 합쳐서 사용하는 방법이다. HTML에 img 태그가 많아지면 서버 요청이 많아져 페이지 로딩 속도가 느려질 수 있다. 하지만 이미지 스프라이트를 사용하게 되면 하나의 이미지만 다운로드 받으면 되기 때문에 로딩 속도가 훨씬 빨라진다.
background-image로 이미지를 넣을 것이기 때문에 아이콘 등 중요한 내용이 없는 이미지들을 삽입할 때 image sprite 기법을 사용한다.

→ Naver의 image sprite → Daum의 image sprite. 텍스트를 image sprite로 사용하고 있다.

---

Image sprite 방법

image sprite generator을 사용하거나 개발자가 직접 포토샵, 피그마, 스케치 등을 사용해 이미지를 편집한다.

image sprite generator(온라인 에디터)을 사용하여 이미지 sprite를 해보자.
https://www.toptal.com/developers/css/sprite-generator/

1.편집할 이미지 불러오기

choose files를 클릭하여 편집할 이미지들을 불러온다. 왼쪽 상단 Padding between elements로 padding 값을 선택할 수 있고, 오른쪽 상단의 Align elements로 이미지들의 정렬 방법을 설정할 수 있다.

2.편집한 이미지 저장하기

이미지를 불러오기만 하면 각각의 이미지들이 하나의 이미지로 편집된다. 왼쪽의 좌표들은 이미지 하나하나의 위치 좌표값이고, 오른쪽의 이미지를 저장하여 sprite 기법으로 사용한다.

3. background-image 태그로 이미지를 넣어주기

IR 기법을 사용하여 image sprite 기법을 적용해보자.

<section>
        <ul>
            <li class="aribnb"><a href="#">AirBnB</a></li>
            <li class="chrome"><a href="#">Chrome</a></li>
            <li class="github"><a href="#">gitHub</a></li>
            <li class="discord"><a href="#">Discord</a></li>
            <li class="figma"><a href="#">Figma</a></li>
        </ul>
    </section>

ul {
     list-style: none;
     position: relative;
}

li {
    margin: 10px 0;
}
a {
   display: block;
   overflow: hidden;
   font-size: 1px;
   line-height: 0;
   text-indent: -9999px;
}
        
.aribnb {
         background: url("sprites.png") no-repeat;
         background-position: -10px -10px;
         width: 28px;
         height: 31px;
}

.chrome {
         background: url("sprites.png") no-repeat;
         background-position: -58px -10px;
         width: 28px;
         height: 29px;
}

.github {
         background: url("sprites.png") no-repeat;
         background-position: -106px -10px;
         width: 28px;
         height: 28px;
}

.discord {
          background: url("sprites.png") no-repeat;
          background-position: -10px -61px;
          width: 28px;
          height: 22px;
}

.figma {
        background: url("sprites.png") no-repeat;
        background-position: -10px -103px;
        width: 19px;
        height: 28px;
}

📌IR 기법이란, 텍스트가 화면에 나타나진 않지만 스크린리더나 브라우저를 위해 이미지의 대체텍스트를 제공하는 CSS 기법이다.

a 태그의 텍스트들을 text-indent: -9999px로 설정해 화면 밖으로 빼내주어 보이지 않도록 설정하였다.

background 속성으로 sprite 이미지를 불러오고, image sprite generator 에 명시된 좌표값들을 background-position 값으로 입력한다. 각 이미지들의 원본 width, height값을 입력한다.

4. 완성

IR 기법으로 a 태그들의 텍스트가 보이지 않고, image sprite 기법을 사용하여 하나의 이미지로 각각의 이미지 표현이 가능해진 것을 확인할 수 있다.