NEXT IMAGE TEST

테스트 한 이미지 

 

원본 다운로드 636kb

사이즈 지정시 (400x500) 62.1kb

image태그 사용후 width 400 height 500 설정 54.5kb

 

사이즈는 별 메리트가 없어보임 
CLS도 별 메리트가 없다. (이미지를 감싸고 있는 영역이 미리 잡혀있기 때문에 )

placeholder로 이미지 나오게 해서 더 사용성을 높일수는 있을듯
[blur 이미지]

https://png-pixel.com/

<Image
            src={'http://rlyfaazj0.toastcdn.net/20230707/165029.463968000/Salomon-ACS-Pro-22Nightshade22.jpg'}
            alt="Picture of me"
            fill
            placeholder="blur"
            blurDataURL="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=="
          />

 

[plaiceholder 사용]

https://velog.io/@pds0309/nextjs-%EC%B5%9C%EC%86%8C%ED%95%9C%EC%9D%98-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EA%B8%B0#placeholder-image

단점  무한 스크롤 ui에서 이미지를 만들기 난해함 

next/Image 공홈에서는 placeholder를 사용해보는 것을 추천해준다.
plaiceholder는 사용법을 보면 getStaticProps를 통해 이미지를 빌드타임에 먼저 받아놓은 후 image의 메타데이터를 넘기는 방식인 것 같다. (아니라면 댓글 부탁드립니다)

next/image 사용시 첫화면

next/image 맨 밑으로 스크롤했을떄 

그냥 이미지 태그 

그냥 이미지 태그 사이즈 조정

 

lazyloading 처리는 좋음 
외부 url에 허가, 비허가로 외부리소스에 대한 공격을 막을 수있다.

 

결론

next/image를 사용할지에 대한 간단하게 몇가지 테스트를 해보았는데요! 
일단 next에서는 next/image사용을 권고하나 사용자들은 next/image is nightmare 사용하기 힘들다는 의견이 조금 보였습니다. Next/image를 사용했을때 스타일 수정이 조금 힘들었다고 합니다. 

1. 이미지용량
   용량차이 많이 난다. 그렇지만 이미지뒤에 쿼리스트링으로 사이즈 지정시 별반 차이없음 
   쿼리스트링 사이즈 붙인 이미지 : 62.1kb
   Next/image 이미지 : 54.5
2. cls
   우리는 이미지를 감싸는 wrap dom이 사이즈를 가지고 있기 때문에 cls점수는 동일 
3. placeholder
   상품이미지의 블러 이미지 처리를 해줘서 사용성이 더 좋아보일 순 있으나! 
   무한스크롤에서는 안되는 제약이 있음 (getStaticProps를 통해 이미지를 빌드타임에 먼저 받아놓은 후 image의 메타데이터를 넘기는 방식이기 때문에 )
4. Lazy loading
   요것도 좋은지 모르겠음! 
   기본 이미지 태그도 레이지속성을 지원하기 때문에!

 

그래서 저의 의견은 확실한 장점은 없어서 기존 img태그를 유지하고 쿼리스트링으로 넣어주는 사이즈, lazyload 속성을 넣어주는 것도 좋겠다 

참고 url

https://oliveyoung.tech/blog/2023-06-09/nextjs-image-optimization/