작업 중next/image를 사용할 때 주의해야 할 방법

주의할 행동

width 및 height에 지정된 값이 반드시 이미지 크기는 아닙니다.
※ 이미지 자체의 크기는 "그림의 크기", 표시된 크기는 "표시 영역"
예를 들어 가정은 다음과 같은 내용을 실현했다.
(next.config.js에서 nxt/image 설정의 기본 상태가 변경되지 않았습니다.)

<Image
  src="hoge.png"
  alt="hogehuga"
  width={500}
  height={500}
/>

이 경우 그림의 크기가 500x500px라고 생각하지 않습니까?
안 돼!!
이 구현된 실제 이미지의 크기는 1080x1080px입니다.

예상치 못한 크기의 그림을 보여 주는 우려

개인이 개발하면 이미지가 크더라도 문제없다.하지만 업무 중에 사용하면 다음과 같은 걱정이 생길 수 있다.

통신량 증가로 사이트 성능 악화

느린 이미지 표시

next/imageloader에서 외부 서비스를 지정한 경우 이미지의 파일 크기 증가로 인해 비용이 증가할 수 있음

지정loader에 따라 이미지의 원래 크기보다 큰 크기

로 확대
(상기 두 개의next/image 기본loader를 사용할 때 브라우저가 대응하면 WebP로 전환되어 우려를 줄인다)

사양에 대한 자세한 설명

그렇다면 왜 이런 행동이 있었을까.
이 동작은next/image의 최적화 처리 규격에 의해 일어납니다.next/image는 그림의 표시 영역에 따라 그림의 크기를 적당한 크기로 변경합니다.또한 단순히 디스플레이 영역에 맞추는 것이 아니라 고해상도 디스플레이(Retina, 4K 등)에서도 이미지를 예쁘게 표시하기 위해 지정width과height보다 큰 이미지를 얻는다.가져올 이미지의 크기를 결정하는 데 사용되는 것은 next/image가 유지하는 폭발점입니다.
제가 처음 소개한 예를 설명해 드리겠습니다.

<Image
  src="hoge.png"
  alt="hogehuga"
  width={500}
  height={500}
/>

우선, 지정되지 않았기 때문layout이므로 기본값intrinsic이다.intrinsic는 지정width과 height의 너비 비율을 유지한다.intrinsic의 경우지정된 width 2 배 이상의 최소 폭발점 획득.
즉, 이미지 크기는 다음과 같습니다.
500 x 2 = 1000
1000 이상, 가장 작은 폭발점은 1080
가로 1080px
너비와 높이비는 1:1이기 때문에 세로 너비도 1080px이다
따라서 1080x1080px 이미지 가져오기
라고 목소리를 높였다.

항상 지정한 크기의 그림을 가져오는 방법

next/image에서 Proposunoptimized를 지정합니다.이 Propos를 지정하면 next/image를 통해 그림을 최적화할 수 없습니다.
하지만 조건에 따라 이것만으로는 해결할 수 없을 때도 있다.이미지 크기는 고정된 동시에 자신의 이미지를 최적화하려는 경우입니다.
공식 홈페이지는 다음과 같은 맞춤형 loader 방법을 소개했다.

import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

이 설치라면 myLoader의width입니까 아니면 1080입니까?
따라서 다음과 같은 실시 방식을 통해 이미지 사이즈를 고정하는 동시에 자신의 이미지를 최적화할 수 있다.

import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
-     loader={myLoader}
-     src="me.png"
+     src={myLoader({src: "me.png", width: 500})}
      alt="Picture of the author"
      width={500}
      height={500}
+     unoptimized
    />
  )
}

이미지 크기 정보

작업 관계로 이미지 크기를 고정시키는 데 필요한 조건이 있기 때문에next/image에 대한 재조사를 썼습니다.
고해상도 디스플레이에 대응하기 위해 이미지 영역보다 두 배 이상 큰 이미지를 얻는 것은 이론적으로 좋을 수 있지만 다른 한편, 화질은 보는 사람이 받아들일 수 있는 감각 요소가 비교적 크기 때문에 이미지를 어느 정도까지 확대할지 의논이 필요하다고 생각합니다.
원래 원시 이미지가 반드시 높은 해상도에 대응할 수 있는 크기는 아니다.예를 들어next/image의 기호점의 최대 값은 3840px이고 정사각형은 3840x3840px가 필요하며 지정한 원시 이미지는 3840x3840px 이상의 크기가 필요합니다.자신이 준비한 그림이라면 괜찮지만 사용자가 투고한 그림이라면 크기가 3840x3840px가 되지 않습니다.
이러한 느낌은next/image는 매우 편리한 구성 요소이므로 작업 중에 사용할 때 반드시 주의해야 한다.