[Next.js] 타 서버의 CDN 이미지 불러올 시 이미지 로딩 개선 방법 질문드립니다.

Question

현재 Next.js기반의 사이드 프로젝트로 상품의 상세페이지에서 여러 이미지를 가져와서 보여주는데 타 사이트의 CDN 이미지 서버에서 링크를 백엔드에 저장 후 화면에 보여줄때 해당 링크를 url로 보여주고 있는데 이미지를 불러오는 속도가 느려 고민입니다.현재로서는 이미지 로딩 시 Next.js에서 Image Element로 quality 속성의 값을 낮추거나 blurDataURL 속성등을 이용하여 로딩하는 동안 다른 대체 이미지를 보여주는 등으로 처리하였는데근본적으로 이미지를 불러오는 속도를 높이려는 다른 방법들이 더 적용해보려고 합니다..상품 상세페이지의 속도를 개선하려다보니 페이지 내 상품이미지가 느린 상황이라 프리패칭하지는 못할 것 같더라구요혹시 다른 개선 방법이 있다면 도움 부탁드리겠습니다.

kenu,전독시 · Answer

이미지 용량은 어떻게 되나요?

하얀뼈 · Answer

이미지를 무단 사용하는 방법이 있긴 합니다만... 백엔드를 뭘쓰시는지는 모르겠지만(아마도 nextjs 그대로...?) php 기준으로는 이미지url를 base64화 -> 다시 이미지파일로 바꿔서 jpg든 png든 로컬에 저장 -> 그냥 내 이미지로 사용하는 방법이 가능합니다.물리적인 네트워크 문제는 해결이 어렵기도하고, 또 백엔드를 nextjs api로 사용할 경우 이게 구현될런지도 모르겠네요

[Next.js] 타 서버의 CDN 이미지 불러올 시 이미지 로딩 개선 방법 질문드립니다.

2개의 답변

Q&A 목록