Vue 및 Nuxt 애플리케이션에서 WebP 및 지연 로드 이미지 축소, 생성

표준 이미지 최적화 흐름이 나에게 그렇게 힘들지 않았다면 이 게시물을 작성하지 않았을 것입니다. 처음에는 내가 가장 좋아하는 lazysizes 을 지금 개발 중인 앱에 적용하고 싶었습니다. 나는 모듈과 플러그인의 개념에 갇혔고 그것이 실제로 무엇인지 알아낼 수 없었습니다. 다음 단계는 이미지 최적화와 현재 PNG 및 JPEG를 WebP로 변환하는 것이었습니다. 이는 골치 아픈 일이었습니다.

우리 모두는 실제 사례를 보기 위해 이와 같은 게시물을 읽습니다. 여기 있습니다!

지연 크기 주입

npm i lazysizes — 설명할 필요가 없습니다.

그런 다음 vue-lazysizes.client.js 파일을 만들어 @/plugins/ 폴더에 넣습니다. .client 이름에 이 플러그인이 서버에서 실행되어서는 안 된다는 신호가 서버에 표시됩니다. 중요합니다! 이 파일에는 다음 두 줄만 포함되어야 합니다.

import lazySizes from 'lazysizes'
export default lazySizes

구성nuxt.config.js:

module.exports = {
  build: {
    extend (config, { isDev, isClient, loaders: { vue } }) {
      if (isClient) {
        vue.transformAssetUrls.img = ['data-src', 'src']
        vue.transformAssetUrls.source = ['data-srcset', 'srcset']
      }
    }
  },
  plugins: [
    '~/plugins/vue-lazysizes.client.js'
  ]
}

"플러그인"이 삽입되고 build 키에 Webpack 구성을 확장한 것을 볼 수 있습니다. 따라서 vue-loader는 data-srcset 및 data-src 태그의 srcset , <img> 및 <source> 속성의 별칭을 변환할 수 있습니다. — 앞으로 필요할 것입니다.

그게 다야! 이제 평소처럼 이미지를 "게으른"것으로 만들 수 있습니다.

<figure class="picture">
  <img data-src="~assets/images/image.png" class="lazyload" alt="Alternate text for the image">
</figure>

이미지 최적화 및 WebP로 변환

그러나 이미지를 더 작게 만들고 WebP 이미지 + 폴백을 로드하는 것은 어떻습니까? npm 패키지 전체를 사용하여 몇 시간 동안 고군분투하고 많은 시도를 한 후 나는 훌륭한 모듈 nuxt-optimized-images 을 찾았습니다. JPEG 및 PNG 최적화에 각각 mozjpeg 및 pngquant를 사용하는 것을 선호합니다.

그리고 다음과 같이 요리해야 합니다.
npm i @bazzite/nuxt-optimized-images imagemin-mozjpeg imagemin-pngquant webp-loader --save-dev — 종속성 설치.

구성nuxt.config.js:

module.exports = {
  modules: [
    '@bazzite/nuxt-optimized-images',
  ],

  optimizedImages: {
    inlineImageLimit: -1,
    handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],
    optimizeImages: true,
    optimizeImagesInDev: false,
    defaultImageLoader: 'img-loader',
    mozjpeg: {
      quality: 85
    },
    optipng: false,
    pngquant: {
      speed: 7,
      quality: [0.65, 0.8]
    },
    webp: {
      quality: 85
    }
  }
}

optimizedImages 키의 설정은 논쟁의 여지가 있지만 이것은 내 선택입니다.

이러한 모든 조작 후에 마지막으로 이 스니펫을 사용할 수 있습니다.

<figure class="picture">
  <picture>
    <source data-srcset="~assets/images/image.png?webp" type="image/webp">
    <source data-srcset="~assets/images/image.png" type="image/png">
    <img data-src="~assets/images/image.png" class="lazyload" alt="Alternate text for the image">
  </picture>
</figure>

WebP 이미지 소스는 ?webp 로 추가됩니다.

이 훌륭한 모듈을 사용하면 더 나아가서 예를 들어 작은 SVG 폴백을 만들고 큰 이미지가 로드되는 동안 사용할 수 있습니다. 반응형 이미지를 만들고 대체 색상을 생성하는 등 (아마도) 훨씬 더 많은 작업을 수행할 수 있습니다. 하지만 오늘의 숙제로 남겨두세요.

읽어 주셔서 감사합니다. 저와 같은 실험에 며칠을 보내기 전에 Google에서 이 게시물을 찾을 수 있기를 바랍니다.