배경

• Lighthouse를 돌렸더니 큰 이미지때문에 LCP가 낮게 나오신 경험을 다들 하셨을거같아요.

• 이때 어디까지 개선을 하면 좋을지, 어떻게 개선을 하면 좋을지 명확하지 않게 느껴지곤 하는데요.

• 이미지 최적화를 매우 잘 해주는 SSG Framework인 Gatsby에서 어떻게 이미지를 최적화하는지 살펴보고, 이미지 최적화에 필요한 요소들에 대해서 학습해봐요.
• (참고) 개인적으로 Gatsby Image 만큼 편하게 잘 처리해주는 Framework을 찾지 못했어요.

Gatsby 소개

• Gatsby는 SSG Framework 이면서 동시에 Data Layer를 가지고 있어 효과적으로 다양한 백엔드와의 연동을 도와줘요.

• Gatsby는 아래와 같은 큰 요소들로 구성되어있어요.