@nuxt/contentで画像を最適化する

先日導入した@nuxt/content で画像をどうやって最適化するか模索して、nuxt-optimized-images が良さそうだったので紹介します。

今回使用した主な環境

• @aceforth/nuxt-optimized-images: 1.0.1
• @nuxt/content: 1.2.0
• nuxt: 2.12.2

nuxt-optimized-images のインストール

こちらは公式ドキュメントに従って、インストールしました。

今回は png 画像だけできれば良かったので、最適化に使うパッケージは 1 つだけにしています。

yarn add -D @aceforth/nuxt-optimized-images imagemin-pngquant

もし他の種類も最適化したい場合は、追加でインストールします。

詳細は公式ドキュメントで確認してください。

nuxt の設定に追加する

次に nuxt.config.ts にモジュールを追加します。

{
  buildModules: [
    '@aceforth/nuxt-optimized-images',
  ],
  optimizedImages: {
    // モジュールのオプション
    optimizeImages: true
  }
}

マークダウンで画像を表示する

 一般的なマークダウン記法であれば![画像](/images/sample.png)のようにすれば表示することができます。

しかし、今回のパッケージで最適化するには別の方法で行います。

components に画像読み込み用のコンポーネントを追加

<!-- ~/components/ImageLoader.vue -->
<template>
  <img :src="require(`~/assets/images/${this.file}`)" alt="" />
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'

@Component
export default class ImageLoader extends Vue {
  @Prop({ required: true })
  public file!: string
}
</script>

props で使用する画像ファイル名を指定するようにしました。

このように、require('画像パス')とすることで画像の最適化が自動的に行われるようになります。

マークダウンを呼び出すコンポーネントを修正

<!-- ~/pages/index.md -->
<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
import { ImageLoader } from '~/components/ImageLoader.vue'

@Component({ components: { ImageLoader } })
export default class Index extends Vue {}
</script>

マークダウンを処理するコンポーネントに先ほど作成した、ImageLoader.vue を追加しておきます。

マークダウンファイルで使う

---
title: '画像を表示する`
---

## ここに画像を表示します

<image-loader file="ファイル名" />

これでnuxt generateすることでハッシュ化された、ファイルが出力されるようになります。

画像のリサイズ

画像のリサイズはさらにパッケージの追加が必要です。

yarn add -D responsive-loader sharp

sharp は jimp でもいいようですが、jimp は遅いみたいです。

ImageLoader.vue を変更

リサイズのアクションは require するときに、サイズを決めなくてはいけません。

size を動的にしたくて props を追加してやってみたのですが、うまくいかなかったので決め打ちで設定することにしました。

以下のように ImageLoader.vue を変更します。

<template>
  <img :src="resizeImage.src" alt="" />
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'

@Component
export default class ImageLoader extends Vue {
  @Prop({ required: true })
  public file!: string

  public resizeImage = require(`~/assets/images/${this.file}?resize&size=600`)
}
</script>

マークダウンで画像のサイズを指定する

---
title: '画像を表示する`
---

## ここに画像を表示します

<image-loader file="ファイル名" />

これで任意のサイズ、今回はwidth: 400pxにリサイズされた画像を出力できるようになりました。

終わりに

マークダウンに vue コンポーネントが混じってしまうのが気持ち悪いですが、これで画像も自由なサイズで表示できました。

次回はレスポンシブの表示にも対応していきたいです。