第3回「測定結果をもとに取り組むCO2削減。画像最適化による改善効果」（連載：脱炭素×サステナブルなウェブ運用のススメ）

1.はじめに：測定結果は改善の出発点

ウェブページの二酸化炭素排出量を削減するために、まず重要なのは「現状を知ること」です。
GreenSyncWeb®CO2では、1ページあたりの二酸化炭素排出量やページ容量を数値として可視化でき、改善前後の変化を実測できます。

第3回では、その中でも特に効果が現れやすい「画像の最適化」にフォーカスし、具体的なビフォーアフター事例を紹介します。

2.なぜ画像最適化は改善効果が大きいのか

「Google PageSpeed Insights」を用いて多くのウェブサイトを分析すると、ページの総容量の大半を占めているのは「画像」と「不要な JavaScript」であることがわかります。

なかでも画像は1ファイルあたりの容量が大きいため、

• 適切なサイズへのリサイズ
• 圧縮率の調整
• WebPなど次世代フォーマットへの変換

といった取り組みだけで、ページ全体の容量を大幅に削減できます。

そして、容量削減はそのまま二酸化炭素排出量の低減につながるため、環境配慮の観点からも非常に効果的です。

3.ビフォーアフター事例：画像最適化でここまで変わる

近年、主要ブラウザで対応が進んだ WebP は、JPEG と比較して高い圧縮効率を持つ次世代画像フォーマットです。同じ画質でも容量を小さく抑えることができ、軽量化の効果が大きく現れます。

ここでは、同一画像でフォーマットと圧縮率を変えた際の容量の違いを紹介します。

比較した画像の条件

• サイズ：1060 × 683（レティーナ対応）
• 元データ：PNG（1.8MB）をWebP／JPEGにそれぞれ書き出し
• 被写体： 光が差し込む緑豊かな森林の風景（同一画像）

WebP画像

次世代画像フォーマットWebPで圧縮した画像。高い圧縮効率で容量を抑えつつ、画質劣化を最小限に抑えられる。

JPEG画像

従来の画像フォーマットJPEG（圧縮率90％）で書き出した画像。見た目はWebPとほぼ差がなく見える。

一見すると画質の差はほとんどありませんが、実際の容量には大きな違いが生まれます。

WebPはJPEGの約 1/8（八分の一）の容量に軽量化できている。

このように、1枚の画像でも軽量化の効果は非常に大きく、複数画像を含むページでは、総容量を劇的に抑えることができます。

考察：どちらがより効率的か？

もちろん、JPEGも圧縮率を上げればさらに軽量化できますが、JPEGは圧縮率を高めるほど劣化が目立ちやすく、WebPは同等画質で容量を小さく維持しやすいという特徴があります。

画像圧縮では、「容量」画質」「表示速度」のバランスを見極めた最適化が重要です。

4.画像以外に取り組める改善ポイント

画像の次に大きな削減効果が期待できるのが、不要なJavaScriptの削除や最適化です。
PageSpeed Insights（PSI）を活用すると、以下のような改善項目を確認できます。

• 読み込みを遅くしているスクリプトの特定
• 削減可能な容量（KB）の推定
• 遅延読み込み（defer / async）の適用可否
• 使用していないCSS・JavaScriptの検出

これらを整理するだけでも、ページ全体の読み込み負荷を大幅に削減できます。
注記：PSI が「未使用」と判定した CSS・JavaScript であっても、実際には必要なケースもあるため、最終的にはヒューマンチェックが必須です。

また、PageSpeed Insightsでは表示速度や操作性など、ユーザー体験（ユーザーエクスペリエンス）に関わる主要な指標も確認できますが、これらの指標や、より重要な考え方である「Core Web Vitals」については、別の機会に詳しく取り上げます。

5.まとめ：測定・改善・効果の流れを習慣化する

今回は、測定結果をもとに改善に取り組む第一歩として、もっとも効果が現れやすい「画像最適化」のビフォーアフター事例を紹介しました。

• 測定による現状の可視化
• 改善ポイントの明確化
• 取り組み後の効果測定

このサイクルを継続することで、二酸化炭素排出量の削減が可能になり、「持続可能なウェブ運用」を実現できます。
さらに、ユーザー体験の向上やSEOの改善にもつながる点も大きなメリットです。

次回は、「サステナブルなサイト設計：軽量化とウェブアクセシビリティ」をテーマに、設計段階から取り組む低炭素化とアクセシビリティの考え方を紹介する予定です。