画像ファイルをWebP形式に変換し、次世代フォーマットで高速表示を実現

bunを利用してjpg、jpeg、pngを次世代フォーマットwebPに変換する方法について解説します。

ソースコードに関しては下記のGithubを参照してください。

https://github.com/kosuke-hamada/image_conversion.git

webPを利用するメリット

通常の画像ファイルに比べて、画像ファイルのファイルサイズが圧縮されるため、WEBサイトの読み込み速度改善が期待できます。

• JPEGやPNGと比較して、25〜34%程度ファイルサイズを削減
• 画像の劣化がほとんどない状態で画像を利用可能
• ページの表示速度が向上するためSEO評価が改善
• Core Web Vitalsの評価向上

PNGからwebPに変換

検証用にPNGの画像ファイルをwebPに変換した場合どのような変化があるかを検証
今回の書き出し時の品質を80％に指定しています。（画像の書き出しデータを見ながら調整してください）

大幅にファイルサイズが改善されていることを確認することができる。

1.16 MB　→　41.7 KB

画像の品質に関してもほとんど劣化することなく書き出されていることを確認することができる。

ソースコードについて解説

ライブラリーをインポート

import { readdir, mkdir } from 'node:fs/promises';  // ファイルシステム操作（非同期版）
import { join } from 'node:path';                   // パス結合用
import sharp from 'sharp';                          // 画像処理ライブラリ
import { existsSync } from 'node:fs';               // ファイル存在確認（同期版）

定数定義

参照先のフォルダーパスと変換後のアウトプット先のディレクトリを指定することができます。
開発環境に応じて

onst INPUT_DIR = './images';   // 入力画像を配置するディレクトリ
const OUTPUT_DIR = './output';  // 変換後の画像を保存するディレクトリ

画像変換処理

qualityで画像の品質を調整することができます。数値を上げることで品質への影響を減らすことができますが、その分画像ファイルの容量は増加します。
画像の品質を目視で確認しながら品質を調整してください。

for (const file of imageFiles) {
  const inputPath = join(INPUT_DIR, file);
  const outputPath = join(OUTPUT_DIR, `${file.split('.')[0]}.webp`);

  await sharp(inputPath)
    .webp({ quality: 80 })
    .toFile(outputPath);

  console.log(`変換完了: ${file} → ${outputPath}`);
}

まとめ

WebPへの画像変換は比較的簡単に実装できるため、WEB制作時にはWebPフォーマットを積極的に取り入れ、
WEBサイトのパフォーマンス改善を図ることを推奨します。