2026.02.11E·69Image Optimization 실제: WebP, AVIF, 반응형 이미지
블로그 이미지가 전체 페이지 용량의 80%를 차지하고 있었다. 포맷 변환과 반응형 이미지로 로딩 속도를 극적으로 개선한 이야기.
Image OptimizationWebPAVIF
→2025.12.19E·33`<img>` 태그 썼다가 혼났습니다 (LCP 2.5초의 비밀)
멋진 히어로 이미지를 `<img>` 태그로 넣었더니 LCP 점수가 빨간색입니다. Next.js의 `Image` 컴포넌트가 어떻게 이미지 사이즈, 포맷, 로딩 시점을 자동 최적화하는지, 그리고 `sizes` 속성의 비밀을 파헤쳐봤습니다.
Next.jsPerformanceImage Optimization
→2025.05.19U·02내 이미지가 다 엑박이네? (Next.js Image 보안 에러와 최적화 원리)
멀쩡하던 이미지가 Next.js의 `<Image>` 컴포넌트를 쓰자마자 에러를 뿜어냈습니다. 단순한 설정 문제인 줄 알았지만, 알고 보니 Next.js가 서버 자원을 보호하기 위한 강력한 보안 장치였습니다. `remotePatterns` 설정 방법과 Image Optimization의 내부 동작 원리를 깊이 있게 파헤칩니다.
Next.jsImage OptimizationSecurity
→