목차

· 이미지 압축 정보
· 이미지 압축은 자동으로 해 버리자
· next-optimized-images 넣어보세요

이미지 압축 정보

이미지 압축은 수동으로하는 귀찮네요 -.
그것이, png・jpeg・svg등 각각으로 압축하면 더욱 귀찮네요-.
사이트 퍼포먼스적으로도 화상은 가볍게 해 두고 싶지만, 자동으로 어떨까 라고 생각합니다.

이미지 압축은 자동으로 해 버리자

그래서 수동으로 압축하는 것은 번거롭기 때문에 자동으로 압축해 봅시다!

우선 필요한 것은
next-optimized-images
필요합니다.
나머지는 압축하려는 이미지 형식에 따라 필요합니다.
Optimization Packages
넣습니다.

next-optimized-images 넣어보세요

그럼 실제로 next-optimized-images를 넣어 보겠습니다.

yarn add --dev @aceforth/nuxt-optimized-images imagemin-mozjpeg imagemin-pngquant imagemin-svgo

이것을 두드리는 것만으로 들어갑니다-.

나머지는 next.config.js에 다음을 설명합니다.

next.config.ts

{
  buildModules: [
    '@aceforth/nuxt-optimized-images',
  ],
  optimizedImages: {
    optimizeImages: true
  }
}

이것으로 끝입니다 - w

그냥 next-optimized-images는

optimized for production builds, not development builds.

라고 있으므로, 개발에서는 실행되지 않고, 프로덕션용으로 실행되는 것이 디폴트 설정이 되고 있습니다.
그래서 개발에서도 실행하고 싶은 경우는

next.config.ts

{
  buildModules: [
    '@aceforth/nuxt-optimized-images',
  ],
  optimizedImages: {
    optimizeImages: true,
    optimizeImagesInDev: true,
  }
}

optimizeImagesInDev: true,

를 추가하면 개발도 실행됩니다.

이것으로, 이제 수동으로의 화상 압축은 안녕하네요!
멋진 이미지 압축 생활을 보내주세요 -.