sprite image 썸네일형 리스트형 이미지 용량 최적화하기(feat. picture tag, sprite image) 프로젝트: loplat UI, 채식 지도 키워드: picture tag, source tag, WebP, sprite image, naver map marker, image optimization 상황 1 loplat UI의 Spinner 컴포넌트는 용량이 큰 sprite image와 css 애니메이션을 통해 구현했다. (참고: css animation steps로 Spinner 구현하기) gif를 사용하지 않고 png로 구현했음에도 아직 이미지 용량이 크다는 생각이 들었다. WebP 형식을 사용하려다가 safari 브라우저에서 지원하지않아 보류했는데, 크롬에서라도 WebP 이미지를 지원하고자 한다. 해결방법 1 picture tag를 사용하면 browser/display마다 최적의 이미지를 제공할 수 .. 더보기 css animation steps로 Spinner 구현하기 프로젝트: loplat ui 키워드: css animation steps, sprite image, 용량 최적화 상황 로딩 상태일 때 화면에 표시할 Loading UI Component가 필요하다. loplat ui library에서 재사용 가능한 컴포넌트를 직접 구현하고자한다. 로딩 애니메이션을 위해 gif를 사용할 경우 용량과 성능 문제가 발생한다. sprite image와 css animation의 steps 속성을 이용하여 애니메이션 효과를 구현할 수 있다. 해결과정 먼저 디자이너로부터 30장 이상으로 이루어진 sprite image를 받고 img 태그의 src에 넣었다. React Component의 prop으로 duration(애니메이션 재생 시간), scale(컴포넌트 크기 조절), zInd.. 더보기 이전 1 다음
