next/image

image를 사용하다보면 다양한 애로사항이 생긴다.
이미지가 처음에 레이아웃을 잡을 때,
두가지 방법으로 이루어질 수 있다.
처음부터 규격을 정하고 그거에 맞추어서 넣어주는 방법과
가변성있는 데이터를 기준으로 추후에 넣어주는 방법이 있다.

전자는 미리 css가 그려져서 문제가 없지만,
가변성이 있는 데이터는 js로 그려지기 때문에
브라우저에게 많은 부담이 된다.

몇 가지 보충해서 이야기하자면

이미지 자체의 크기와 레이아웃을 잡는 방법에는 두 가지 옵션이 있다.

정적인 이미지:

이미지의 크기가 고정되어 있고, 이미지를 삽입할 때 이미지의 크기에 따라 레이아웃이 조정됩니다.
이 경우 CSS 스타일링을 사용하여 이미지의 크기와 배치를 제어할 수 있습니다.

동적인 이미지:

이미지의 크기가 가변적이며, 이미지가 레이아웃을 결정하는 데에 JavaScript나 서버 측 코드 등의 동적인 처리가 필요한 경우입니다.
이 경우 이미지를 동적으로 로드하고, 이미지가 로드되는 시점에서 레이아웃이 조정될 수 있습니다.

생성 방식의 차이

이 부분은 일반적으로 정적인 이미지가 초기 로딩 시간에 이미지 자체의 크기와 레이아웃이 결정되기 때문에 초기 로딩 시에 추가적인 JavaScript 실행이 필요하지 않습니다. 반면, 동적인 이미지는 이미지의 크기와 레이아웃이 동적으로 결정되기 때문에, 이미지가 로드될 때까지 대기하고 처리를 위해 JavaScript가 실행되어야 합니다. 이로 인해 초기 로딩 시간이 더 오래 걸릴 수 있으며, 일부 브라우저에서는 JavaScript 실행에 따른 부하가 발생할 수 있습니다.

그러나 현대의 웹 브라우저들은 JavaScript 실행에 대한 효율성을 개선하고 최적화하여 이러한 부담을 상당히 감소시켰습니다. 따라서 대부분의 상황에서는 동적인 이미지를 사용해도 큰 문제가 없을 것이다.
또한, 이미지를 동적으로 로드하는 것은 유연성과 확장성 측면에서 이점을 가질 수 있다.

요약하자면, 이미지의 크기와 레이아웃을 결정하는 방법은 정적인 이미지와 동적인 이미지로 나눌 수 있습니다. 동적인 이미지는 초기 로딩 시간과 JavaScript 실행 부하에 약간의 영향을 미칠 수 있지만, 최신 브라우저의 성능 향상으로 인해 대부분의 상황에서는 큰 문제가 없다.
따라서 동적인 이미지를 사용하는 것은 유연성과 확장성을 고려할 때 일반적으로 권장되는 방법이다.

Next/image

위와 같은 동적인 이미지와 정적인 이미지의 차이에 대해 설명했는데,
next에서 권장하는 방식은 정적인 방식을 사용하는 것을 권장한다.

그 이유는 리소스를 잡아 먹기 때문이다.

예를 들면 화질이 좋은 사진을 보면 렉이 걸리거나 갑자기 사진이 로딩되면서 튀어나와서 브라우저의 크기가 변화거나 하는 현상을 본적이 있을 것이다.

(이 새는 화질 구지입니다.)

그래서 next/image는 그러한 현상을 사전에 막고 부드러운 작동방식을
사전에 크기를 설정하고자한다.

몇가지 기능들을 요약하면,

성능 최적화: next/image는 이미지를 자동으로 최적화하고 적절한 형식으로 변환하여 브라우저에 제공합니다. 이는 페이지 로딩 시간을 줄이고 대역폭을 절약하는 데 도움이 됩니다. 이미지를 필요한 크기로 자동 조정하고, 필요한 해상도만큼만 불러올 수 있습니다.

반응형 이미지 처리: next/image는 다양한 디바이스와 뷰포트 크기에 맞는 이미지를 제공할 수 있습니다. 이를 통해 모바일 기기와 데스크톱 화면에서 최적화된 이미지를 제공할 수 있습니다.

접근성 향상: next/image는 자동으로 대체 텍스트를 생성하고, 로딩 중 및 로드 실패 시 대체 콘텐츠를 제공하는 기능을 제공합니다. 이를 통해 시각 장애인이나 기술적으로 제한된 사용자도 웹 사이트의 이미지 콘텐츠에 접근할 수 있습니다.

이미지 최적화 기능: next/image는 이미지 최적화를 위한 다양한 기능을 제공합니다. 예를 들어, 이미지에 대한 미리보기(thumbnail) 생성, 블러 처리, 투명한 배경 등의 기능을 활용할 수 있습니다.

용이한 사용: next/image는 Next.js와 통합되어 사용하기 쉽습니다. 이미지 소스를 가져오기 위해 별도의 패키지나 라이브러리를 설치할 필요가 없으며, 단일 컴포넌트로 이미지를 처리할 수 있습니다.

이러한 이유로 next/image는 Next.js 프로젝트에서 이미지를 효율적으로 처리하고 최적화하는 데 도움을 줍니다.

---

이 글을 쓴 이유

오늘 성능 최적화 관련에 대해서 이야기하다
사전에 width와 height를 설정하라는 이야기를 들었다.
이미지 크기가 정적이라면 사전에 작성을 해줘야 브라우저에 부담을 줄이고
최적화 할 수 있기 때문이다

그리고 예전에 next/image 관련해서 공부했던 내용과 이어진다고 생각하였고,
이러한 것에 대비하여 사용한다는 생각과 이어져서 정리하였다.
다음에는 next/image의 기능인 이미지가 엑박이거나할 때 대처하는 방법에 대해 알아보겠다.