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마다 최적의 이미지를 제공할 수 .. 더보기 이전 1 다음
