【お手軽】AVIFでサイトを高速化してみる？

2024年3月27日 09:22

こんにちは、フロントエンドエンジニアのカネコです。
早速ですが画像の最適化について話すとき、多くの方がWebP形式に言及します。確かに、WebPはJPEGやPNGに比べて優れた圧縮率と品質のバランスを提供し、多くのWebサイトで採用されています。しかし、ここで注目したいのは、さらに進化した画像フォーマット、AVIFの存在です。

2024年1月、Microsoft EdgeがAVIF画像フォーマットのサポートを開始したことで、これによりAVIFは事実上、主要ブラウザすべてにサポートされることになりました。AVIFのブラウザサポートは、このフォーマットの普及に向けた大きな一歩です。長年にわたり、WebPが最先端の画像フォーマットとして注目されてきましたが、AVIFはさらに一歩進んだ技術を提供します。その最大の利点は、前述した通り、圧倒的な圧縮率です。これにより、高画質を維持しながらも、ファイルサイズを大幅に削減することが可能になります。Webページの読み込み速度の向上はもちろん、データ使用量の削減にも繋がり、特にモバイルユーザーにとっては大きなメリットとなります。

しかし、すべての技術革新がそうであるように、AVIFの導入にはエンコード時間の増加というデメリットも伴います。この点が開発プロセスにおいてボトルネックとなる可能性はありますが、長期的な視点で考えると、その利点はデメリットを大きく上回ります。ユーザー体験の向上は、Webサイトの成功において最も重要な要素の一つです。ファイルサイズの削減によるページの読み込み速度の向上は、直接的にユーザーの満足度向上に繋がり、離脱率の低下やコンバージョン率の向上を期待できます。

ViteでAVIF形式に画像を変換するプラグインを作成するには、以下のステップに従います。このガイドでは、Node.jsのsharpライブラリを使用して画像をAVIF形式に変換します。sharpは高性能な画像処理ライブラリで、多様な形式の画像変換に対応しています。

STEP1: 必要なパッケージのインストール

まず、プロジェクトに必要な依存関係をインストールします。sharpとviteが必要です。プロジェクトのルートディレクトリで以下のコマンドを実行してください。

npm install sharp vite --save-dev

STEP2: Viteプラグインの作成

プロジェクトのルートにpluginsディレクトリを作成し、その中にvite-plugin-convert-avif.jsファイルを作成します。このファイル内で、以下のようにViteプラグインを定義します。

import { defineConfig } from 'vite';
import fs from 'fs';
import path from 'path';
import sharp from 'sharp';

export default function convertImagesToAvif() {
  return {
    name: 'convert-images-to-avif', // プラグイン名
    enforce: 'pre',
    async transform(src, id) {
      if (/\.(png|jpe?g)$/.test(id)) {
        const dir = path.dirname(id);
        const base = path.basename(id, path.extname(id));
        const avifPath = path.resolve(dir, `${base}.avif`);

        // 画像をAVIF形式に変換
        await sharp(id)
          .avif()
          .toFile(avifPath)
          .catch(err => console.error('AVIF conversion error:', err));

        return null; // 元の画像ファイルの処理は行わない
      }
    },
  };
}

STEP3: Vite設定ファイルにプラグインを追加

import { defineConfig } from 'vite';
import convertImagesToAvif from './plugins/vite-plugin-convert-avif.js';

export default defineConfig({
  plugins: [
    convertImagesToAvif()
  ],
});

STEP4: プロジェクトのビルド

設定が完了したら、プロジェクトをビルドして、プラグインが期待通りに動作するかを確認します。

npm run build

このガイドで作成したプラグインは非常に基本的なものです。実際のプロジェクトでは、キャッシング、エラーハンドリング、複数形式への変換サポートなど、追加の機能が必要になる場合があります。

このように、画像をAVIF形式に自動変換し、Webページのパフォーマンスを向上させることができます。また、Viteの軽量な特性を生かしつつ、必要な機能だけをピンポイントで追加することで、プロジェクトの複雑性を抑えることができます。現代のフロントエンド開発において、AstroやNext.jsのようなフレームワークは、画像最適化を含め、多くの最先端の機能を備えていますが、ちょっとしたページや小規模なサイトの場合に試してみてはどうでしょうか。

✙

プラスジャムはWeb制作会社です。
ウェブサイト制作、システム開発、Webマーケティングなど、さまざまな課題解決やアイデアを具現化するWebソリューションを提案・提供しています。

noteでプラスジャムを見つけてくださった方は、お時間あればコーポレートサイトや他の記事もご覧いただければ幸いです。

＼コーポレートサイトはこちら／

＼関連記事はこちら／

プラスジャム製作開発部メンバーがWeb制作技術を紹介。
案件で実装した機能や自己学習で得た知識を発信していきます。
［今回の記事担当］フロントエンドエンジニアカネコ 2022年入社。