개발자 J

  • 홈
  • 태그
  • 방명록

AWS 1

AWS Lambda S3 트리거를 사용한 이미지 리사이징 + webp 변환을 통한 이미지 최적화

이미지 리사이징 말 그대로 이미지의 크기를 조정하는 과정을 말합니다. 위의 사진은 Lighthouse에서 이미지의 크기가 적절하지 않다고 알려주는 화면입니다. 다시 말해, 렌더링 된 이미지의 사이즈와 실제 이미지의 사이즈가 많이 차이가 나는 경우로 이미지의 크기가 적절하지 않다는 것을 의미합니다. 이와 같이 불필요하게 큰 이미지를 사용하게 되면 리소스를 많이 사용하게 되어 바이트 낭비 및 페이지 로드 시간이 느려져, 웹 성능 저하를 유발할 수 있습니다. 이미지 리사이징의 중요성 이미지 리사이징을 통해 파일 크기를 줄여, 웹 사이트의 총 리소스를 크게 줄일 수 있습니다. 이로 인해 웹 페이지 로딩 속도 향상 및 사용자 경험을 개선할 수 있습니다. 그리고 TTI(Time to interaction) 지표를 ..

AWS 2024.03.25
이전
1
다음
더보기
  • 분류 전체보기 (6)
    • FE Study (5)
      • React (2)
      • Next.js (2)
      • Storybook (0)
    • AWS (1)
    • Coding Test (0)

Tag

이미지 최적화, LCP, Barrel 파일, Next.js, fe, WebP, FID, Web Vitals, Mocking, AWS Lambda, MSW, 무한 스크롤, aws s3, infinite scroll, Image Resizing, Tree shake, AWS, React, Core Web Vitals, optimizePackageImports,

최근댓글

방문자수Total

  • Today :
  • Yesterday :

Calendar

«   2025/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

Copyright © Kakao Corp. All rights reserved.

티스토리툴바