-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
next/image 질문!
23.07.20 16:12 작성 23.07.20 16:23 수정 조회수 578
1
안녕하세요!
궁금한게 있어서 질문드려요 ㅎㅎ
현업에서 next version 12.3.4를 쓰고 있고
next/image를 사용해서 이미지를 화면에 보여주려고 하고 있는데 일반 img 태그를 쓸 때보다 화질이 안좋습니다.. 어떤 부분을 개선해야 할까요?
또한 next/image를 쓰면 이미지 최적화 및 lazy loading을 자동으로 지원한다고 했는데,
priority를 설정 해주지 않으면 이미지가 늦게 로드 되고 lazy loading은 layout 옵션을 설정해주지 않으면 안되더라구요!
구 버전은 자동으로 지원해주지 않는걸까요?
아래 처럼 쓰고 있습니다.
"next/future/image"
"next/image"
두개 다 쓰고 있습니다!
import Image from 'next/future/image';
<Image
src=""
alt=""
width={320}
height={395}
quality={100}
/>
답변을 작성해보세요.
1
박용주
지식공유자2023.07.22
안녕하세요. 질문 감사합니다.
먼저 화질이 중요한 컨텐츠일 경우 unoptimized prop을 쓰는게 가장 쉬운 방법입니다. v12.3.0부터 stable로 지원하는 기능이니 사용 가능하실 겁니다.(https://nextjs.org/docs/pages/api-reference/components/image#unoptimized)
w(width) 값을 일부러 늘려서 요청한 후 css로 사이즈를 줄여 화질을 개선하는 방법도 있을 것 같긴한데 좋은 방법은 아닌 것 같습니다.
Legacy Image라도 priority/lazy loading 등은 잘 적용되어야하는데, 지금 언급해주신 내용에선 오류를 찾기 어렵습니다. 혹시 v13의 Image에선 잘 작동하나요? 혹시 아직 해결 안 되셨으면 자세한 상황 설명 부탁드립니다!
감사합니다 :)
bj2525
질문자2023.07.24
안녕하세요 용주님!
우선 친절한 답변 감사드려요!
첫번째로 질문드렸던 화질 이슈 같은 경우에는
실제 이미지 사이즈가 670 * 376인 얘를 100 * 112로 보여주려고 하다 보니깐 화질이 떨어지는 것 같아 부모 태그에 width와 height를 각각 100, 112를 주고 next/Image 태그에 layout="fill" 을 주어 화질 부분을 개선할 수 있었습니다.
근데 여기서 궁금했던게 실제 이미지 사이즈 보다 더 크게 렌더링 할 때 화질이 떨어져야 한다고 생각했습니다. 반대로 실제 이미지 사이즈 보다 더 작게 렌더링 할 때는 화질 차이가 없어야 된다고 생각이 들었구요! 제가 잘못 생각하고 있는걸까요 ?
두번째로 질문드렸던 lazy loading 은 잘 동작하고 있습니다!
그런데 priority 을 사용해도 렌더링 시에 바로 Image가 나오고 있지 않고 있습니다. file size가 150kb여서 그런건지 몰라도 깜빡 하고 image가 나오고 있는 상황입니다. 캐시가 적용된 후에는 바로 나오고 있지만 첫 렌더링 시에는 위에서 말씀드린 현상이 계속 되고 있습니다. ㅜ
v13의 image는 라이브러리 의존성 문제가 있어 때문에 아직 테스트 안해본 상태입니다!
박용주
지식공유자2023.07.24
안녕하세요! 제가 알고있는 선에서 답변드리겠습니다ㅎㅎ
next가 이미지를 최적화할 때, 원본 이미지를 여러 srcset으로 쪼개어 최적화합니다. 즉 원본 이미지가 670px이더라도 next 서버에는 128px, 256px 등 다양한 사이즈의 이미지가 저장되어 있습니다. 그 후 상황에 맞게 적절한 width의 이미지를 내려줍니다.
따라서 원본 이미지가 670px이라 하더라도 실제로 사용되는 이미지는 원본과 다를 수 있습니다. 네트워크 탭에서 실제로 불러와진 이미지 정보를 확인해보시면 좋을 것 같습니다!150kb면 작은 용량은 아니기 때문에 깜빡임이 생길 수 있습니다. 강의에 나온 blur 효과를 사용해보시거나,
(제가 eager를 직접 사용해본 적은 없지만..) next.js 문서에 있는 loading="eager"도 한 번 테스트해보시길 추천드립니다(https://nextjs.org/docs/pages/api-reference/components/image#loading)
감사합니다 :)
답변 1