画像を圧縮してサイズを減らす

Web アプリケーションにおいて、画像アセットは最も容量を占める要素の一つです。
ビルド時に自動的に画像を圧縮することで、インストーラーサイズとロード時間を削減します。

1. vite-plugin-imagemin の導入

Vite のビルドプロセスで画像を圧縮します。

npm install -D vite-plugin-imagemin

2. 設定 (vite.config.ts)

以下の設定を追加すると、png, jpeg, gif, svg 等が圧縮されます。

import { defineConfig } from 'vite';
import viteImagemin from 'vite-plugin-imagemin';

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false,
      },
      optipng: {
        optimizationLevel: 7,
      },
      mozjpeg: {
        quality: 20,
      },
      pngquant: {
        quality: [0.8, 0.9],
        speed: 4,
      },
      svgo: {
        plugins: [
          {
            name: 'removeViewBox',
          },
          {
            name: 'removeEmptyAttrs',
            active: false,
          },
        ],
      },
    }),
  ],
});

3. 次世代フォーマット (WebP / AVIF) の検討

JPEG や PNG の代わりに WebP や AVIF を使用すると、品質を維持したままファイルサイズを大幅に削減できます。
Tauri の WebView におけるサポート状況は以下の通りです。

* WebP: ほぼ全ての環境で標準サポートされています。
* AVIF: WebP よりもさらに高圧縮ですが、比較的新しいバージョンが必要です (Windows: Edge 121+, macOS: Ventura+ / Safari 16+)。

変換ツール（例: npm install -g sharp-cli）などで事前に変換し、<picture> タグを使用して環境に応じて最適なフォーマットを読み込ませることをお勧めします。

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>