IS / Image Sprite (이미지 분할기법)

🤔 IS / Image Sprite?

• 배경으로 사용할 이미지를 따로 분리해 저장하지 않고, 하나의 통 이미지로 사용
• background url()과 background-position으로 사용할 이미지의 좌표를 잡아서 처리
• img태그가 아니기 때문에 alt 속성을 지정해줄 수 없어, 메뉴나 퀵메뉴 또는 아이콘, 로고와 같은 의미상 크게 중요하지 않은 이미지에 많이 사용

• 장점 - 웹 브라우저의 로딩 속도를 줄여준다. (서버의 요청 횟수 줄어들고 트래픽 절약)
• 단점 - 데이터 관리에 문제가 생기면, 전체 이미지 로딩이 불가능하다.
  일부 이미지 수정이 필요할 경우 전체 이미지를 수정해야 하므로 유지보수가 까다로운 편

🔎 이미지 스프라이트 사이트

https://spritegen.website-performance.org/
https://www.toptal.com/developers/css/sprite-generator

대표적인 예시 'NAVER'