🔎이미지 스프라이트 기법

• 하나의 이미지 판에 사용할 이미지들을 배치하고, 사용할 때는 영역을 지정해서 사용하는 기법
• 사용할 이미지들은 단순히 꾸며주는 역할의 이미지
• 중요하고 alt 속성으로 어떤 이미지인지 설명이 필요한 이미지들은 스프라이트 기법 사용X

💡방법 및 예시

• 사용하고 싶은 이미지들을 아래 사이트에서 업로드하면 자동으로 합친 이미지와 추천 코드를 제공
  CSS sprites Generator 링크
  

• 다운받은 이미지를 background 속성이나 가상요소를 활용해 원하는 위치에 원하는 만큼만 보이게 배치시킨다

• 사용 예시 : 네이버
  

💡장점

• 이미지 하나만 다운받으면 돼서 페이지 렌더링 속도 빨라짐
  같은 UI의 페이지를 이미지 스프라이트 기법을 사용하지 않았을 때, 사용했을 때 비교
  <사용 X>
  • 총 5개의 이미지 로드, 로드 시간은 55ms
    
  <사용 O>
  • 총 1개의 이미지 로드, 로드 시간은 37ms
    

• <img> 태그 개수 줄어들어서 HTML 파일이 깔끔해짐
  - 왼쪽은 이미지 스프라이트 기법을 사용하지 않았고, 오른쪽은 사용한 코드
  - 훨씬 가독성 좋게 작성 가능

• 스크린 리더로 웹페이지 탐색을 할 때, 탐색 속도 빨라짐
  - <img> 태그는 스크린 리더가 하나씩 다 읽는데, 중요하지 않은 꾸며주는 이미지까지 다 읽을 것
  - 이미지 스프라이트 기법을 통해 적용하면, 배경이미지로 인식하여 스크린 리더가 읽지 않아서 탐색 속도 증가

💡단점

• 유지보수가 어려움
• 이미지 안의 요소 중 하나를 수정해야 할 상황이 생기면 이미지 전체를 다시 만들어야함
  혹은 이전에 적용된 설정값들을 다 바꿔줘야 함