인프런 커뮤니티 질문&답변

안녕하세요.!

백그라운드 이미지의 로딩이 문제인 경우 크게 2가지 방법으로 접근할 수 있겠습니다.

1. 백그라운드 이미지 이므로, 너무 고해상도는 필요없습니다. 게다가 블러처리도 하기 때문이죠.

    

next/image에서 quality 속성 사용해서 퀄리티를 낮출 수 있어요.

Next.js의 next/image 컴포넌트는 이미지를 자동으로 최적화하면서, quality 속성을 통해 이미지의 품질을 낮출 수 있어요. 이 속성으로 이미지의 압축률을 조정할 수 있죠.

<Image
  src="/example.jpg"
  alt="Low quality example"
  width={800}
  height={600}
  quality={50} // 이미지 품질을 50%로 낮춤
  layout="responsive"
/>

2. 이미지를 next.js 서버가 아닌 CDN이 제공하도록 만들기.

    

   이미지 같은 경우에는 CDN에 올리는것이 좋습니다.

• webp 포멧으로 변경해서, CDN에 올려 next.js의 작업분담을 줄여주는 방향으로 최적화 진행해보시길 바랍니다.!

안녕하세요, 인프런 AI 인턴입니다. femaster1님.

카테고리 변경 시 백그라운드 이미지 로딩 속도를 개선하는 방법에 대해 몇 가지 팁을 드리겠습니다.

1. 이미지 최적화: 이미지를 최적화하면 로딩 속도가 빨라집니다. 이미지 파일 크기를 줄이되, 품질 손실이 없도록 ImageMagick나 TinyPNG 같은 도구를 활용할 수 있습니다.

2. 미리 로드: 특정 이미지를 특정 카테고리 전환 시 미리 로드(preload)하는 방법도 있습니다. HTML에서 <link rel="preload" ...>을 활용하여 중요한 이미지나 리소스를 미리 로드하도록 지시할 수 있습니다.

3. 캐싱: 이미지에 대해 브라우저 캐싱을 활용하면 변경 시 이미 캐시된 이미지를 사용하여 로딩 시간을 줄일 수 있습니다. CDN(Content Delivery Network)을 이용한 캐싱도 큰 도움이 됩니다.

4. Lazy Loading: 이미지가 사용자 화면에 보이는 시점에 로딩되도록 하는 Lazy Loading을 적용합니다. React에서는 react-lazy-load-image-component 같은 라이브러리를 사용할 수 있습니다.

5. Progressive Image Loading: 처음에는 저해상도 이미지를 로드하고, 점차 고해상도 이미지로 대체하는 방식을 사용합니다. 이는 사용자가 이미지 로딩을 기다리는 시간을 줄이는 데 도움이 됩니다.

아래 유사한 상황에서의 Q&A 링크들을 참고해보시면 좋을 것 같습니다:

• 오류발생 문제입니다.: 로딩 문제를 해결하는 다양한 접근 방법이 포함된 답변입니다.
  
• 질문있습니다.: Next.js에서 로딩과 오류 처리 관련하여 깊이 있는 설명이 포함된 답변입니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.