WebPへの変換でLINE Developersサイトの画像を軽量化しました
こんにちは。LINE Developersサイトのリードエンジニアを務めるロマンです。今回は、画像のファイルサイズとWebPへの変換を取り上げます。ドキュメントにはスクリーンショットや図解が欠かせませんが、画像が増えると保存容量が増え、読者がダウンロードするデータ量も多くなります。そこで最近、サイト内の多くのPNG、JPEG、GIFの画像をWebPに変換し、画像のファイルサイズを合計で200MB以上削減しました。WebPとは何か、どれだけ画像を軽量化できたか、画像を変換する際に気を付けたいことを紹介します。
WebPとは
WebPは、Googleが2010年に発表した画像形式です。動画コーデックのVP8を基に開発され、画像の一部の情報を省いてファイルサイズを抑える非可逆圧縮と、元の画像の情報を保持する可逆圧縮の両方に対応しています。透過やアニメーションも扱えます。写真、スクリーンショット、図解、アニメーション画像などに利用できますが、適した設定は画像によって異なります。
WebDXのWebP互換性データによると、Safari 14は2020年9月にWebPに対応し、WebPは2023年3月16日からBaseline Widely Availableとなりました。現在の主要ブラウザで幅広くサポートされているため、WebPはウェブサイトの画像形式として安心して利用できます。
LINE Developersサイトでの削減効果
LINE Developersサイトには、1ファイルあたり数百KBの画像が蓄積しており、中には1MBを超えるものもありました。2026年8月から9月にかけて、サイズの大きな画像の多くをWebPに変換しました。
主な結果は次のとおりです。
- 700件以上の画像を変換し、合計で200MB以上を削減しました。
- 1ファイルごとのファイルサイズ削減率を平均すると約78%でした。
- 変換した画像を1件以上含むページでは、ページごとの画像データ削減量の中央値は471KBでした。
画像に応じた変換方法
静止画をWebPに変換する際は、オープンソースのlibwebpプロジェクトが提供するcwebpを使用します。PNGやJPEGなどの画像をWebPに変換するツールです。アニメーションGIFには、同じプロジェクトのgif2webpを使用し、アニメーションWebPに変換します。
画像の変換では、次の方針に従います。
- スクリーンショットや写真には、非可逆圧縮の
cwebp -q 80 -m 6を使用します。 - 細かい文字や線を含む図解には、輪郭を保つため
cwebp -lossless -m 6を使用します。 - アニメーションGIFには、
gif2webp -min_size -m 6を試し、変換後もアニメーションすることを確認します。 - 元の解像度を維持します（理由は後のスクリーンショットの例で説明します）。
これらの設定は目安であり、厳密なルールではありません。たとえば、-q 80で細部が大きく損なわれる場合は、代わりに-q 90や別の値を使用できます。WebPに変換してもファイルサイズが小さくならない場合は、元の形式のまま残せます。
スクリーンショットを使った具体例
LINE Developersサイトのトップページのスクリーンショットをドキュメントに追加するとします。WebPへの変換と画像の縮小がファイルサイズと画質にそれぞれどう影響するかを見るため、元のピクセル数の画像と縮小版を比較します。
元のスクリーンショットはmacOSで撮影しました。生成されたPNGは1736 × 1174ピクセルで、ファイルサイズは1.34MBでした。ドキュメントに掲載する画像としては大きすぎました。
元のピクセル数のままWebPに変換する
このPNGをcwebp -q 90 -m 6でWebPに変換しました。画質90を選んだのは、ブラウザウィンドウ内の小さな文字を鮮明に保つためです。元のピクセル数のまま115KBとなり、約1.23MB（約91%）を削減できました。ページに表示するサイズでは、目立った画質の低下はありません。
元の解像度のままWebPに変換したスクリーンショット：1736 × 1174ピクセル、115KB
解像度を下げてみる
幅1736ピクセルの画像は、このページで表示するには必要以上に大きいため、縮小するとどうなるかも調べました。同じエンコード設定で800 × 541ピクセルに縮小したWebPを作成しました。縮小版は34KBでした。つまり、元の解像度のWebPより81KB小さくなりました。
縮小したWebP：800 × 541ピクセル、34KB
小さな文字やボタンの鮮明さを比較する
ただし、縮小版を拡大すると、細部が目に見えてぼやけます。以下の拡大図は、ブラウザウィンドウの左上を同じ大きさで示しています。幅800ピクセルの画像から切り出した部分は、元の画像に合わせて拡大しました。ウィンドウの操作ボタン、アドレスバー、サイト名を比べてみてください。
元の解像度
幅800ピクセルの画像を拡大
拡大図から、画像の元のピクセル数を原則として維持することにした理由が分かります。ファイルサイズの削減量の大部分はWebPへの変換で得られました。画像の解像度を下げるとさらに81KB削減できましたが、鮮明さが明らかに損なわれました。そのため、画像の解像度を下げることは推奨しません。
新しい画像を軽量化する運用
普段のドキュメント作成で画像を簡単に変換できるよう、リポジトリ専用のAIコーディングエージェント向け画像変換スキルを用意しました。ドキュメントを書く際は、スクリーンショットをPNGまたはJPEGで追加し、変更を提出する前にこのスキルを実行するだけです。画像の変換と参照先の更新をまとめて行います。
スキルは現在のブランチで追加・変更された画像を探し、標準では300KBを超える画像を対象にします。前述の設定で変換したWebPと元の画像のファイルサイズを比較し、小さくならなければ元の形式のまま残します。その後、ドキュメント内の画像参照を更新し、ファイルが正しくWebPになっていることと、古い画像パスが残っていないことを確認します。元のファイルを削除する前には、スキルが確認を求めます。
プルリクエスト内のファイルサイズが大きい画像を検出するCIチェックも導入しました。画像が検出された場合は、公開前に変換スキルを実行してファイルサイズを削減できます。
自分のサイトで画像を変換するときのコツ
画像の多いページがある場合は、まず代表的な画像をいくつか変換してみてください。写真やスクリーンショットには、非可逆圧縮のcwebpを推奨します。画質設定を-q 80から-q 95の範囲で変えて試し、次の点に注意して結果を比較します。
- 変換後の画像を実際に表示するサイズで確認し、特にスクリーンショットの小さな文字が鮮明かを確かめます。
- 小さな文字や線、図解を鮮明に保ちたい場合は、
cwebp -losslessで可逆圧縮を試します。 - 画像を置き換える前にファイルサイズを比べます。元の形式の方が小さい場合や見た目が良い場合は、そのまま使用します。
- 拡張子を変更したら画像の参照先も更新し、ブラウザでページを確認します。
画像ファイルを軽量化すると、必要な保存容量が減り、読者がダウンロードするデータ量も抑えられます。画像が読み込まれる際には、特に通信速度が遅い環境では、読者が体感する表示速度の改善が期待できます。