Webサイトの画像をWebPに変換して容量を減らした記録

運営しているWebサイトの表示速度を見直すため、掲載画像をWebPへ変換しました。デザイン制作の記録やイベントレポートではスクリーンショットを多く使うため、ページごとの画像容量が少しずつ積み重なっていたからです。

今回の対象は、トップページ、制作実績、ブログ記事に使っているPNGとJPEGです。見た目を大きく変えずにファイルサイズを抑えられるか、実際の画像を確認しながら作業しました。

画像形式を変えるだけでなく、不要な大きさの画像を整理し、HTMLやCSS側の指定も確認しました。変換前後の容量と表示状態を記録して、今後の更新でも同じ方法を使えるようにしています。

変換前に確認した画像の状態

最初にサーバー内の画像を一覧にし、ファイル形式、幅と高さ、容量、使用ページを確認しました。対象は84枚で、合計容量は17.8MBでした。特に記事内のスクリーンショットと、制作実績に掲載した大きな写真が容量の多くを占めていました。

スマートフォン用に表示する画像なのに、横幅が2400px以上あるものも見つかりました。Retinaディスプレイを考慮しても、表示領域の数倍にあたる画像は過剰です。WebP変換の前に、実際の表示サイズに合うよう横幅を1200px前後へ調整しました。

WebPを選んだ理由

WebPは、JPEGやPNGと比べて画像の見た目を保ちながらファイルサイズを小さくしやすい形式です。写真はもちろん、UI画面のキャプチャや色の多いイラストにも使いやすく、現在の主要ブラウザでは問題なく表示できます。

ただし、すべての画像を同じ設定で変換すると品質に差が出ます。写真は品質80前後、文字を含むスクリーンショットは品質85から90を目安にし、細い線や小さな文字がぼやけないかを確認しました。

変換とファイル整理の手順

変換には画像編集ソフトとコマンドラインのツールを使いました。少ない枚数は書き出し設定を確認しながら手動で処理し、まとまった枚数は一括変換しました。元のJPEGとPNGはすぐに削除せず、比較用のフォルダに残しています。

ファイル名は既存の名前を基本的に引き継ぎ、拡張子だけを変更しました。日本語やスペースを含む名前はURLで扱いにくいため、必要に応じて英数字とハイフンへ整理しました。こうしたルールは、普段Sassのファイルを整理するときの考え方とも近く、以前まとめたSassの管理方法も参考になりました。

画質と表示速度を確かめる

変換後は、文字入り画像、グラデーション、細い罫線、人物写真を中心に元画像と見比べました。容量を優先しすぎると、スクリーンショットの文字ににじみが出たり、写真の輪郭にブロックノイズが現れたりします。

ブラウザの開発者ツールでネットワーク転送量も確認しました。トップページの画像部分は、変換前の約4.2MBから1.6MBになりました。体感できるほど劇的な変化ではありませんが、モバイル回線で最初の表示が少し軽くなっています。

HTMLとCSSの参照先を更新する

画像ファイルを変換しただけでは、ページが古いPNGやJPEGを読み込み続けます。HTMLのimg要素、CSSの背景画像、OGP画像の指定を検索し、新しいWebPファイルへ置き換えました。

対応状況を細かく管理したいページでは、picture要素を使ってWebPを優先し、必要に応じて従来形式へフォールバックさせる方法もあります。静的サイトでは、ビルド時に画像を処理する仕組みを導入すると、更新のたびに手作業で変換する負担を減らせます。

アプリ開発の記録にも活用する

Webサイトだけでなく、iPhoneアプリの画面キャプチャを紹介する記事でもWebPは有効でした。開発記事では画像枚数が増えやすく、コードの説明用に同じ画面を複数サイズで掲載することがあります。

アプリのUIを説明するときは、画像形式だけでなく掲載方法も重要です。画面遷移や実装方針を整理する際には、以前のSwiftUIとUIKitの比較のような技術メモと同じく、読み手が必要な情報をすぐ確認できる構成を意識しています。

変換後に分かった効果

84枚すべてをWebPへ変換した結果、合計容量は17.8MBから6.4MBになり、約64％削減できました。とくに写真系JPEGの圧縮効果が大きく、PNGのスクリーンショットは画質を優先したため削減率を控えめにしています。

種類	変換前	変換後	削減率
写真	9.6MB	3.0MB	約69％
スクリーンショット	6.1MB	2.7MB	約56％
イラスト・素材	2.1MB	0.7MB	約67％
合計	17.8MB	6.4MB	約64％

今後は画像を追加するたびに、表示サイズを先に決めてからWebPへ変換する運用にします。デザインの美しさを保ちながら読み込みを軽くできるため、制作実績や技術記事を更新する際の基本作業として定着させたい方法です。Webサイトの画像が増えてきた人は、まず容量の大きい数枚から変換し、画質と表示速度の変化を確認してみてください。