next/image 질문!
안녕하세요!
궁금한게 있어서 질문드려요 ㅎㅎ
현업에서 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
1
안녕하세요. 질문 감사합니다.
먼저 화질이 중요한 컨텐츠일 경우 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에선 잘 작동하나요? 혹시 아직 해결 안 되셨으면 자세한 상황 설명 부탁드립니다!
감사합니다 :)
1
안녕하세요 용주님!
우선 친절한 답변 감사드려요!
첫번째로 질문드렸던 화질 이슈 같은 경우에는
실제 이미지 사이즈가 670 * 376인 얘를 100 * 112로 보여주려고 하다 보니깐 화질이 떨어지는 것 같아 부모 태그에 width와 height를 각각 100, 112를 주고 next/Image 태그에 layout="fill" 을 주어 화질 부분을 개선할 수 있었습니다.
근데 여기서 궁금했던게 실제 이미지 사이즈 보다 더 크게 렌더링 할 때 화질이 떨어져야 한다고 생각했습니다. 반대로 실제 이미지 사이즈 보다 더 작게 렌더링 할 때는 화질 차이가 없어야 된다고 생각이 들었구요! 제가 잘못 생각하고 있는걸까요 ?
두번째로 질문드렸던 lazy loading 은 잘 동작하고 있습니다!
그런데 priority 을 사용해도 렌더링 시에 바로 Image가 나오고 있지 않고 있습니다. file size가 150kb여서 그런건지 몰라도 깜빡 하고 image가 나오고 있는 상황입니다. 캐시가 적용된 후에는 바로 나오고 있지만 첫 렌더링 시에는 위에서 말씀드린 현상이 계속 되고 있습니다. ㅜ
v13의 image는 라이브러리 의존성 문제가 있어 때문에 아직 테스트 안해본 상태입니다!
1
안녕하세요! 제가 알고있는 선에서 답변드리겠습니다ㅎㅎ
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)
감사합니다 :)
API 라우터를 사용해야 하는 경우에 대해
1
150
1
키보드 어떤 거 사용하시나요
1
352
1
next.js 멀티플 런타임 관련해서 질문 올립니다..
1
359
2
아주 기초적인 질문입니다.
1
324
1
서버사이드 렌더링을 할 때, 서버는 어디에 있는 건가요?
1
1173
2
수업을 듣다가 SSR에 관하여..
1
552
2
interface 와 type
1
377
1
엘리맨트들의 자식관계가 어떻게 이렇게 되나 궁금합니다.
1
384
1
onLoad함수 (script태그의 onLoad X)
1
429
1
dynamic에 대한 질문
1
450
1
SSR vs SSG
1
478
2
NoSSR 관련한 질문입니다:)
1
378
1
a tag 질문 !
1
328
2
8분 20초 배포 관련
1
325
2
안녕하세요! 구글 서치 콘솔에 등록하는 도중 다음 오류가 뜹니다
0
2682
2
emotion styles 파일이 빌드시 경고로 뜹니다.
1
439
1
naver map 이 출력되지 않습니다.
1
482
1
페이지에 site맵 존재시 next Link는 csr 처럼 싹가져오게 되나요?
1
266
2
Failed to load resource: the server responded with a status of 404 ()
1
1036
2
VSCode 익스텐션 궁금합니다.
1
358
1
상태관리 질문 있습니다!
1
454
1
swr에 대한 질문입니다. (용어 관련)
1
375
1
swr 질문입니다!
1
339
1
안녕하세요. span 태그의 부모에 display: flex 를 적용하는데 왜 적용되는지 아무리 생각해도 이해가 되지 않아 질문드립니다.
1
685
2