CSS: 이미지 스트라이프에 대해서 알아봅시다!

이미지 스프라이트

아이콘 또는 장식을 위한 이미지 요소들은 스프라이트 기법을 활용하여 파일의 사이즈를 최소화하고 효율성을 높일 수 있습니다.

• 여러번의 서버 요청을 한 번으로 줄일 수 있습니다.
• 이미지 수정이나 관리가 간편합니다.
• 웹 접근성을 준수하기 위해서 IR 효과를 설정해야 합니다.

프로젝트 종류에 따른 이미지 타입표

종류	PC Web	Mobile Web	Mobile App
GIF	기본	사용가능	X
JPG	컬러수 많거나 운영성 이미지일 때	운영성 이미지일 때	X
PNG-8	X	기본	반투명효과 없고 컬러가 적을 때
PNG-24	반투명효과가 있을 때에만 사용	컬러 수 많거나 반투명효과가 있을 때	기본
이미지 스프라이트	O	O	X

• PC Web
  • 기본 포맷은 GIF를 사용
  • JPG는 인물이나 실사 이미지와 같이, 색 변화 및 그라데이션이 풍부한 경우 및 운영성 이미지에 주로 사용
  • JPG로 저장 시 압축률 관리
    • 일반 저장 시(File->Save) : 압축률 10/12 이상으로 저장할 것
    • Save for web 기준 : Original 혹은 JPG Quality 90 이상
  • 구형브라우저에서의 PNG 이미지 지원
• Mobile Web
  • 3G망을 이용하는 유저를 고려하여 용량 축소가 중요
  • PNG-8 포맷을 기본으로 저장하며, 색상 수가 많거나 반투명 효과가 있으면 PNG-24를 사용
  • 용량 대비 이미지 품질을 고려하여 포맷 변경 가능