Feat/#114 image compression (+webp) #208
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 tasks
NYeonK
reviewed
Feb 19, 2023
src/asset/image/index.tsx
Outdated
| export { default as ImgBanner3 } from "./banner_3.webp"; | ||
| export { default as ImgCategoryBanner } from "./categoryBanner.webp"; | ||
| export { default as ImgDefaultBigProfile } from "./defaultBigProfile.webp"; | ||
| export { default as ImgDefaultProfile } from "./defaultProfile.webp"; | ||
| export { default as ImgPiickleLoading } from "./piickleLoading.gif"; |
There was a problem hiding this comment.
.gif는 .webp로 변환하지 않은 이유가 있을까요?-? 마찬가지로 용량이 줄어든다고 알고 있어서요!
|
NYeonK
reviewed
Feb 19, 2023
| @@ -25,7 +25,7 @@ export default function Banner() { | |||
| <St.BannerSlider> | |||
| <Slider {...settings}> | |||
| {bannerImage.map((img, index) => ( | |||
| <St.ImageWrapper key={index} src={img.src} alt={img.alt} /> | |||
| <St.ImageWrapper key={index} src={img.src} alt={img.alt} loading="lazy" /> | |||
There was a problem hiding this comment.
loading="lazy" 처음 알게 되었어요😲 좋은 정보 감사합니다:D
Comment on lines
+22
to
+25
| const compressedSelectedImg = await compressImage(selectedImg, { | ||
| maxWidth: MAX_IMAGE_SIZE, | ||
| maxHeight: MAX_IMAGE_SIZE, | ||
| }); |
| const { setImage } = props; | ||
| const [imgUrl, setImgUrl] = useState<string>(""); | ||
| const { setProfileImage } = props; | ||
| const [previewImgUrl, setPreviewImgUrl] = useState(""); |
There was a problem hiding this comment.
<string> 요거 있는거랑 없는거랑 상관업숴?-?
There was a problem hiding this comment.
"" 로 string인게 이미 추론되어서, 직접 명시할 필요 없어!!
| } | ||
|
|
||
| const MAX_IMAGE_SIZE = 80 * 2; |
There was a problem hiding this comment.
80으로 직접 명시를 해도 좋은데, 레티나 디스플레이 대응 이슈로 인해 2배 정도로 지정하면 좋다고 알아요!!!~
| new Compressor(file, { | ||
| maxWidth: option?.maxWidth, | ||
| maxHeight: option?.maxHeight, | ||
| quality: option?.quality ?? 0.6, |
There was a problem hiding this comment.
undefined, null 일 경우에만 ?? 다음의 값을 반환해줘!
|
이미지 최적화를 위한 추가 작업 -> #219 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📌 내용
banner1, category banner 같은 경우에, 이미지의 파일이 커서 png 파일을 압축하였어요.
png -> webp 파일로 변경하였어요.
picture/source태그를 추가하여 jpg 파일을 대비하지 않았어요. 필요하다고 판단되면 진행하면 좋을 것 같아요.img 태그에 loading="lazy" 속성을 추가하면, 보여지지 않는 이미지는 나중에 로드하여 불필요한 네트워크 통신을 줄일 수 있어요
📌 내가 알게 된 부분
compressorjs라이브러리 적용했어요util/imageCompressor.ts로 비동기 처리 추상화하여 사용합니다!📸 스크린샷
1. 적용 전
2. 적용 후