[FE] 성능 개선을 위한 이미지 최적화를 진행한다. #624
Conversation
|
정말 깔끔하게 잘 작업해주셨네요~! 가상 선택자와 클래스로 스프라이트 이미지를 넣는게 참 신기 한 것 같아요! |
|
사실 나머지 아이콘들은 png 로 되어있어서 크기가 컸던 것들과 달리 svg 로 되어 있는 파일들이라 스프라이트 이미지로 재작업하는데 큰 의미가 있는지 고민이 됩니다. 스프라이트 이미지는 기존 처럼 여러 png 파일이었던 것들을 효과적으로 개선해주고 있지만 해상도가 깨질 수 있다는 단점과 작업하기 위해 기존 코드에서 스타일을 다시 입혀야하는 단점이 있습니다. 이에 대해서 제이드나 리안의 생각은 어떤지 궁금합니다~! |
…ng-ggood into feat/614-image-optimization
There was a problem hiding this comment.
수고 많으셨습니다 ~!
sprite를 해서 적용한 게 신기하고 재미있네요
직접 수작업노가다를 하셨을 것같지는않고 sprite generator를 쓰셨을까요? (어떤 사이트 이용하셨는지 궁금해요!)
음
sprite의 목적자체가 파일용량 줄이기가 아니라 요청 갯수 줄이기여서
확장자에 무관하게 효력은 있을 것 같아요. 오히려 svg파일이 용량이 더 작으니 더 유용할수도있다고 생가해요
하지만 sprite의 경우 아이콘 하나만 수정되어도
전체아이콘을이용해서 sprite를 다시수정해주고
css 스타일을 다시입혀줘야하는 번거로움이 있어서
정말 안바뀔거같은 작은아이콘들만 sprite해줘야한다고 생각은합니다.
(또 svg파일이면 svg용 sprite를 하나따로만들어줘야한다는점..)
그래서 많은 종류가 아니라 정말 안바뀔거같은것들만 일부 모아서 해줘야한다고 생각해요!
svg아이콘들중 안바뀔거같은 파일들을 모아서 sprite해주는 것은 좋은 접근이라고 생각해요!
(하지만 역시 하나라도 변경될 경우 다시 sprite해주는 번거로움이 있을수있어서, 아예안해주는 것도 방법일거같습니다.)
| @@ -1,13 +1,12 @@ | |||
| import { useRef } from 'react'; | |||
|
|
|||
| import customPageScreen from '@/assets/images/customPageScreen.webp'; | |||
There was a problem hiding this comment.
assets의 파일들은 index.ts라는 배럴파일로 관리를 하기로했었는데 놓치신 걸까요? 의도하신걸까요
There was a problem hiding this comment.
단순한 궁금증인데 sprite된 파일도 webp로 한번 변환해서 관리하면 에셋 용량이 더 줄어들 거 같다는 생각을 해보았는데
어떻게 생각하시는지 궁금해요 !
There was a problem hiding this comment.
오 사실 스프라이트 이미지 예시들이 다 png로 되어있길래 webp 로 작동되는지 확인하지 못해서 그냥 png 로 진행해봤는데 한번 확인해봐야겠네요!
There was a problem hiding this comment.
스프라이트의 원리자체로는 얻어진 .png를 그냥 우리가 .webp로 임의로 변환해도 작동은 할거같다.
라고 이해하고있는데 직접실험해본 건 아니긴합니다 ㅎㅎ
혹시 의향이 있으시다면 한 번 시도해볼수도 있다고 생각합니다 !!
There was a problem hiding this comment.
webp 무료 변환 사이트에서 오늘치 다 썻다고 금지당했어열,, 조금 있다 저녁 먹고 시도해보겠습니당~
There was a problem hiding this comment.
보니까 헤일리가 적용한 사이트는 webp 도 png 로 변환되는 것 같아요. 잠깐 테스트를 해보니까
webp 2000bytes * 2개가 png 로 변환되면서 20000bytes 가 되었네요..!
이미 webp 인 것은 굳이 바꾸지 않아도 될 것 같아요.
그리고 svg 로 된 것을 sprite 하려면 라이브러리를 깔아야 할 것 같긴한데,
이걸 기술검토할 만큼 가치가 있는지는 모르겠네요..🤔
제이드가 말한 아이콘 변경시에 다시 파일을 제작해야 하는 이슈 도 있구요.!
개인적으로는 svg 는 그대로 유지하는게 어떨까 싶습니다!
There was a problem hiding this comment.
@healim01
이미 sprite된 category-icon-sprite.png 파일을 category-icon-sprite.webp로 바꾸어도 작동에는 이상이 없네요 :)
6.24KB->2.01KB로 줄은 효과가 있네요
There was a problem hiding this comment.
어라라 지금 파일이 너무 깨지는거 같아서 재작업하고 있었는데 그새 머지가 되었네요 ㅋㅋㅋ
chore 로 작업하고 다시 올릴께요~
There was a problem hiding this comment.
네 :)
리안도 질문에대한 코멘트를 한거같아 머지했는데 그렇게하면될거같아요 ㅎㅎ
|
궁금하실까 변환 사이트 공유드립니다~~ |
❗ Issue
✨ 구현한 기능
랜딩 페이지 png 사진을 랜더링 사이즈에 맞게 resize 진행
랜더링 사이즈가 200이라 고해상도 화면을 고려해서 400으로 모두 리사이즈 진행했습니다.
이미지 포맷팅 png -> webp 로 변환
이미지 파일 크기 및 압축을 위해 포맷을 png -> webp 로 변경했습니다.
스프라이트 이미지 적용
카테고리 아이콘 이미지를 위해 작은 이모지 아이콘 사진 여러개를 하나씩 호출하고 있었습니다. 여러 파일을 받아오는 것보다 하나의 파일을 가져오는 편이 로딩 속도에 좋기 때문에 진행해봤습니다.
📢 논의하고 싶은 내용
🎸 기타