[ Refactor/#484 ] 이미지 최적화 image to webp

[ljh0608]

✨ 해당 이슈 번호 ✨

#484

todo

• NextJS에서 webp를 활용한 이미지 최적화 방식을 사용하는데에서 방법을 착안하여 업로드한 이미지를 canvas API를 사용하여 2d로 그리고 다시 이를 webp로 변환하는 방법을 사용하였습니다.
• blob 타입을 활용하여 s3에 업로드 전 이미지를 webp로 변환시키는 과정을 통해 webp의 최적화 방식을 사용하여 이미지의 용량을 약 30% (고화질 이미지의 경우 최대 80%까지) 절감하였습니다.
• 기존에 s3에 고화질 이미지가 올라갔을 경우 LCP 성능에 이슈가 있었고 위 과정을 통해 LCP 내부 지표인 Load Time과 Render Delay의 시간이 각각 30% 절감되었습니다.
• useImageUplaod에 단일 책임 원칙이 지켜지지 않아 로직이 복잡하고 많은 역할을 하고 있어 지원 이미지 타입을 검사하는 로직을 분리해주었습니다.
• 추가로 convertToImage 로직도 따로 분리해주어 useImageUpload 커스텀훅은 이미지를 업로드 하는 기능만을 나타내도록 하였습니다.

📌 내가 알게 된 부분

• Blob이란 파일 형식을 따를 필요 없는 이진 형식의 데이터 덩어리 즉 파일류의 불변하는 미가공 데이터입니다.

• 큰 용량을 다룰 수 있고 텍스트와 이진 데이터 형태로 읽을 수 있습니다.

• File Blob의 한 종류입니다 (Blob의 기능들을 상속하고 있습니다.)

• Blob에는 size와 type만 존재하는데 File은 사용자 시스템 파일을 지원하기 위한 몇가지 메타데이터를 제공합니다. (파일명, 최근 변경일자 등)
  

• 고화질 이미지의 경우 최대 80% 용량을 절감하는 것을 확인하였는데 이는 아래와 같은 이유 때문입니다.

1. 고화질 이미지에 압축 알고리즘이 제거할 수 있는 중복 데이터가 많거나 비트레이트와 관련이 있습니다. 비트레이트란 이미지가 저장할 때 초당 처리하는 데이터 양을 의미하는데 고화질 이미지는 더 많은 비트로 데이터를 표현하고 이는 압축 후 더 큰 절감효과를 가져올 수 있습니다.
2. 고해상도 이미지는 더 많은 픽셀로 이미지를 표현하고 동일한 색상 블록이나 텍스처가 많기 때문에 이후 더 큰 절감효과를 가져오는 것을 확인하였습니다.

📌 질문할 부분

📌스크린샷(선택)

LCP 개선 전

LCP 개선 후

같은 파일에 대한 s3업로드 용량 차이

고해상도 jpg 업로드 용량 차이

고해상도 png 업로드 용량 차이

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mile-client	❌ Failed (Inspect)			Dec 12, 2024 3:24am