인프런 커뮤니티 질문&답변
작성한 질문수
#9.1 이미지 최적화 / css backgroundImage url 최적화 관련 질문
작성
·
13
0
강의를 잘 듣던 도중에 궁금증이 생겨 질문드립니다.
#9.1 이미지 최적화 강의를 듣고 나서 생긴 궁금증입니다. 여러 img태그를 next에서 제공하는 Image 태그로 교체함으로써 웹사이트의 이미지를 최적화시킬 수 있다는 점은 잘 이해했습니다.
하지만 이렇게 된다면 이전 강의에서 배운 도서 상세 페이지에서 도서의 표지를 검은색 배경으로 깔기 위해 사용했던 div 태그 내의 css ( BackgroundImage: url(...) ) 부분이 가져오는 이미지는 최적화가 전혀 되지 않을 것 같다는 생각이 들었습니다.
열심히 최적화를 해 봐야 저 부분에서 풀 사이즈의 이미지를 중복해서 가져온다면 성능에 다시 악영향이 갈 것 같다고 생각하였고, 나름의 답을 생각해 보았는데, 어떤 답이 맞는 것인지 잘 모르겠어 이렇게 질문드립니다.
배경 부분도 Image 태그로 불러운 다음 css를 적절하게 사용해 똑같이 배경 느낌으로 만들어 준다.
css url로 가져온 이미지는 자주 가져오지 않으므로 최적화하지 않아도 큰 영향은 없다.
사실 고민을 해 보아도 이 두가지 밖에 떠오르지 않아 둘 중에 답이 있는 것인지, 아니라면 어떤 방법을 적용하는 것이 좋은 방법일지 질분드립니다.
답변 2
1
안녕하세요 이정환입니다.
둘 다 해결책이 될 수는 있겠지만 보통 이런 경우 간단히 이미지 자체를 최적화 하여 저장 해 놓는 방법이 가장 선호 됩니다. 구체적으로는 이미지를 CDN이나 클라우드에 avif나 webp 형식으로 변환해 저장해두고 background url을 위해서만 가져다 쓰는 방식이죠 이때 이미지의 사이즈가 과도하게 큰 것이 문제가 될 것 같다면 사이즈도 줄인 상태로 저장해두는 쪽으로 해결할 수 있습니다.
0
안녕하세요, 인프런 AI 인턴입니다.
kdm1jkmm님, 질문 주셔서 감사합니다. Next.js에서 이미지 최적화를 통해 웹 페이지의 성능을 개선하는 방법에 대해 고민해보신 것 같아 기쁩니다. 다음과 같은 두 가지 방법을 고려해볼 수 있습니다:
1. 배경 이미지를 최적화:
Next.js의 Image 컴포넌트를 통해 배경 이미지를 최적화하는 것은 일반적으로 권장되지 않습니다. Image 컴포넌트는 HTML img 태그와 통합되어 작동하므로, CSS 배경 이미지에 직접 사용할 수 없습니다. 그러나 배경 이미지 최적화를 위한 대안으로는 CSS background-image 속성에 사용하는 이미지를 서버에서 미리 최적화하거나 CSS에서 사용할 이미지를 압축하고 사이즈를 조정하여 로드 시간을 줄일 수 있습니다.
2. CSS URL로 가져오는 이미지의 영향:
일반적인 웹 페이지에서 CSS를 통해 설정된 배경 이미지는 실제 화면에 많이 나타나지 않는 한 성능에 크게 영향 주지 않습니다. 다만 성능 개선이 필요한 경우, 배경 이미지를 아래의 방법으로 조금 더 관리할 수 있습니다:
- 이미지를 사전에 압축하여 파일 크기를 줄이기.
- 웹 서버에서 이미지를 제공할 때, 캐싱(Caching) 메커니즘을 통해 자주 요청되지 않도록 설정.
- 파일 포맷을 최신 포맷(WebP 등)으로 변경하여 더 나은 압축률을 달성.
관련 정보가 더 필요하시면 Next.js의 이미지 최적화 관련 질문에서 더 많은 인사이트를 얻으실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
답변 감사드립니다! :)