Class12(이미지 스프라이트)

2022. 04. 29 수업 정리 #2/2

이미지 스프라이트

• 이미지 스프라이트 소개 및 장점

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

  • 웹페이지에 이미지가 사용될 경우해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다. 하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다.

  • 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼에서는 웹 페이지의 로딩시간을 단축해주는 효과가 있습니다. 또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지 파일만을 관리하면 되므로 매우 간편합니다.

  • 아래의 이미지는 상단의 이미지 두 개를 아래의 하나의 이미지로 묶은 것을 보여준 예시입니다.

    

    
    

• 이미지 스프라이트 단점
  • 이미지 용량이 크다면 로딩시 매우 오래 걸리는 문제가 있습니다.
  • 이미지를 불러오기 위해서는 해당 이미지의 Position(좌표)을 알아야하며, CSS로 관리할 경우 클래스로 분리하여 관리하고 background-image, position 속성으로 사용하면 편하지만 SVG이미지로 관리를 위해서는 js코드를 모듈화해야합니다.
    
• 사용 팁
  • 유용한 사이트

CSS Sprites Generator

​

상단의 좌측 CHOOSE FILES를 눌러 합칠 이미지들을 선택하면 오른쪽에 바로 합쳐진 이미지 파일이 생성하면서, 합쳐진 이미지 상단에 DOWNLOAD버튼을 통해 내려받아 사용할 수 있습니다.

사이트 ▶<a href=https://www.toptal.com/developers/css/sprite-generator/>CSS SpriteS Generator</a>

spritecow

첫 화면에서는 Open image버튼을 눌러 좌표를 구할 이미지를 선택하면, 아래의 화면처럼 이미지가 뜨고 css style 형식으로 sprite 구문안 -255px -10px이 선택된 이미지(위의 이미지에서는 docker)의 좌표입니다. 가끔 좌표를 설정할 수 없는 이미지도 있지만, 보통은 포토샵이나 위의 사이트와 같이 가급적 정확한 좌표를 확인해서 넣어야지 이미지가 잘리지 않고 원본 그대로 사용할 수 있습니다. 툴을 사용하지 못할 경우 이미지를 우클릭하여 편집(E)항목을 선택해 그림판에서 해당 이미지에 커서를 대면 대략적인 위치를 알 수 있으나, 정확하지 않고 일부 이미지가 잘릴 수가 있습니다.

사이트 ▶ <a href=http://www.spritecow.com/>spritecow</a>