Visual Regression TestのスナップショットにWebPを導入し、容量を削減する

2026年8月13日

URLをコピーしました！

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。

PR TIMESでは、2023年からPlaywrightを用いたVisual Regression Test（VRT）を運用しています。VRTの運用方法については以下のエントリーで紹介していますので、ぜひあわせてご覧ください。

先日リリースされたPlaywright v1.62.0では、スナップショットの生成・比較を行うtoHaveScreenshotがWebP形式をサポートしました。PR TIMESではVRTのスナップショットをGitHubリポジトリで管理しているため、スナップショットのファイルサイズを小さくできれば、リポジトリ内のスナップショットの総容量や、CIで転送・キャッシュするデータ量の削減が期待できます。そこで、VRTのスナップショットをPNGからWebPへ移行し、実際にどの程度ファイルサイズを削減できるのか検証しました。

WebPとは

WebPはGoogleが開発した画像形式です。WebPは、画質と引き換えにファイルサイズを削減する「Lossy（非可逆圧縮）」と、元の画像データを復元できる「Lossless（可逆圧縮）」の2つの圧縮方式をサポートしています。圧縮方式という観点では、Lossy WebPはJPEG、Lossless WebPはPNGと比較されることがあります。

Googleが公開している12,000枚のWeb画像を用いた比較では、デフォルト設定のLossless WebPは、高度に最適化されたPNGよりも高い圧縮率を示したと報告されています。

その他のWebPの詳細については、弊社CTOの金子が以前紹介していますので、詳しくは以下をご参照ください。

Webサービス上の画像変換とWebPの利用について

また、PR TIMESではプレスリリース画像にもWebPを採用しており、従来よりも高い画質を維持しつつ、配信する画像のファイルサイズを削減しています。

PNGからWebPへの移行方法

移行方法はとても簡単で toHaveScreenshot の引数で指定しているファイル名の拡張子を .pngから.webpに変更するだけです。

test('Visual Regression Test', async () => {
- await expect(page).toHaveScreenshot('homepage.png');
+ await expect(page).toHaveScreenshot('homepage.webp');
});

toHaveScreenshotで生成されるWebP画像は、Lossless（可逆圧縮）で保存されます。そのため、画質を調整するためのqualityオプションは利用できません。

なお、拡張子を.webpに変更すると、新しいスナップショットとしてWebP画像が生成されます。既存のPNG画像は自動では削除されないため、別途削除する必要があります。

WebP移行時に遭遇した思わぬエラー

toHaveScreenshotでWebPがサポートされたPlaywright v1.62.0には、tsconfig.jsonの読み込みに関する不具合があり、tsconfig.jsonでextendsやreferencesを使用している場合、以下のようなエラーが発生します。

Error: Failed to load tsconfig file at /tsconfig.json: Failed to resolve "references" path "./packages" referenced from /tsconfig.json

この問題はPlaywright v1.62.1で修正されているので、同様のエラーが発生した場合はv1.62.1以降を使用することをおすすめします。

WebPへの移行結果

前述したGoogleの比較ではLossless WebPのほうがPNGよりもファイルサイズが小さくなるという結果でしたが、今回Playwrightで生成したスナップショットを比較したところ、すべてのケースでWebPのファイルサイズが小さくなるわけではなく、画像の内容によって結果に差がありました。以下は、ファイルサイズが小さくなったスナップショットの比較です。

PNG形式 547KB

WebP形式 380KB（約30%削減）

一方、別のスナップショットでは逆の結果になりました。

PNG形式 136KB

WebP形式 193KB（約42%増加）

写真など、色の変化が多い領域を含むスナップショットでは、ファイルサイズを大きく削減できた一方、フォームなどのUIを中心としたスナップショットでは、WebPのほうがファイルサイズが大きくなるケースもありました。そのため、すべてのスナップショットをWebPへ移行するのではなく、ファイルサイズを削減できるもののみ移行しました。その結果、スナップショット全体で約20MBのファイルサイズを削減できました。

まとめ

Playwright v1.62.0でtoHaveScreenshotがWebP形式をサポートしたことを受け、PR TIMESのVisual Regression Testで使用しているスナップショットをPNGとWebPで比較し、その効果を検証しました。

検証の結果、すべてのスナップショットでWebPのほうが軽量になるわけではなく、UIを中心とした画面ではPNGのほうがファイルサイズを小さくできるケースもありました。一方、画像を多く含む画面ではWebPによってファイルサイズを大きく削減できました。そのため、すべてのスナップショットを一律にWebPへ移行するのではなく、ファイルサイズを削減できるもののみWebPへ移行しました。その結果、スナップショット全体で約20MBのファイルサイズを削減できました。

検証前は「WebPにすれば常にファイルサイズを小さくできる」というイメージを持っていましたが、実際には画像の内容によって結果が異なりました。画像形式の一般的な特徴だけで判断せず、実際のユースケースで比較したうえで使い分けることの重要性を改めて実感しました。PlaywrightでVRTを運用している方や、スナップショットの容量削減を検討している方の参考になれば幸いです。