Webサイトに載せる画像の最適化
スマホで撮った写真をそのままブログに貼っていませんか。 4000ピクセルの写真を、700ピクセルの枠に押し込んで表示している—— これは見えない情報のために通信量を使っている状態です。
まず、どれだけ無駄が出ているか
最近のスマホは4000×3000ピクセル、1枚4MB前後で撮影します。 一方、ブログの本文に表示される画像の幅はだいたい600〜800ピクセルです。
つまり横幅で5倍、面積では25倍のデータを送って、 ブラウザ側で縮めて表示しているだけ。記事に写真を5枚使えば20MBです。 読者のスマホの通信量を、そのぶん消費させています。
横幅の決め方
基準は単純です。「実際に表示される幅の2倍」にしてください。
| 本文の画像 | 表示幅700px → 1400px |
|---|---|
| アイキャッチ | 表示幅1200px → 1600〜2000px |
| サムネイル | 表示幅300px → 600px |
| ロゴ・アイコン | 表示サイズの2倍。小さいので気にしなくて済みます |
2倍にするのは高精細な画面（Retinaなど）に対応するためです。 等倍だと、そうした画面でぼやけて見えます。 逆に、2倍より大きくしても見た目は変わりません。通信量が増えるだけです。
表示幅が分からない場合は、ブラウザで画像を右クリック →「検証」で確認できます。 面倒なら1400pxにしておけば、たいていのブログで過不足ありません。
形式の選び方
| 写真 | WebP（対応環境が広がっています）。迷うならJPG |
|---|---|
| 図・グラフ・スクリーンショット | PNGかWebP。文字がにじみません |
| ロゴ・アイコン | 背景を透過させるならPNG。可能ならSVGが最良です |
WebPは同じ見た目で2〜3割軽くなります。 自分のサイトに載せる画像なら、使わない理由はほとんどありません。
容量の目安
| 本文の画像 | 100〜200KB |
|---|---|
| アイキャッチ | 200〜300KB |
| ページ全体 | 画像の合計で1MB以内を目標に |
1枚500KBを超えているなら、まず幅が大きすぎないかを疑ってください。 圧縮で無理に潰すより、適切な幅に縮めるほうが画質を保てます。
手順
順番が大事です。先に圧縮してから縮めると、 一度失った情報が戻らないまま縮小されるため、画質が余計に落ちます。 縮める → 形式を変える → 圧縮するの順にしてください。
画像以外にも効く部分があります
画像を最適化しても表示が速くならない場合、原因が画像でないことがあります。
- サーバーの応答が遅い——ブラウザの開発者ツール（F12）のネットワークタブで、 最初の応答までの時間（TTFB）を確認してください。数百ミリ秒かかっているなら、画像をいくら軽くしても頭打ちです
- 読み込むスクリプトが多い——アクセス解析や広告のタグを入れすぎていませんか
- 画像の遅延読み込みをしていない——
loading="lazy"を付けると、 画面外の画像は後回しにできます
SEOへの影響について
表示速度はGoogleの評価要素に含まれています（Core Web Vitals）。 ただし過度に期待しないでください。 速度は多数ある要素の1つで、内容の質のほうがはるかに重要です。
画像の最適化で得られる本当の価値は、順位より読者の体験です。 表示が遅いページは、読まれる前に閉じられます。
あわせてalt属性（代替テキスト）を入れてください。 画像が表示できないときに代わりに読まれ、音声読み上げにも使われます。 検索エンジンが画像の内容を理解する手がかりにもなります。
アップロード前に確認すること
Web公開用の画像には、撮影場所の位置情報が残っていることがあります。 自宅で撮った写真をブログに載せると、自宅の緯度経度を公開することになりかねません。
当サイトのリサイズや形式変換を通すと画像は作り直されるため、通常は位置情報が残りません。 詳しくは写真の位置情報を削除する方法をご覧ください。
よくある質問
WordPressのプラグインで自動最適化すればよいのでは？
それでも構いません。ただし元画像が大きすぎると、サーバー側の処理が重くなり、保存容量も消費します。アップロード前に適切な幅にしておくほうが確実です。
まとめて処理できますか？
できます。複数ファイルを一度に選べば順に処理され、ZIPでまとめて保存できます。アップロードしないので枚数の制限もありません。
元の写真は消してよいですか？
消さないでください。縮小や圧縮は元に戻せません。あとで大きく使いたくなったときのために、元ファイルは別に保管しておいてください。
ファイル名は日本語でもよいですか？
避けたほうが無難です。環境によっては文字化けやリンク切れの原因になります。内容が分かる英数字（tokyo-station-2026.webp など）にしておくと、検索の手がかりにもなります。
まとめ
- 幅は表示幅の2倍。迷ったら1400px
- 順番は縮める → 形式変換 → 圧縮
- 写真はWebP、図はPNG
- 1枚200KB以下を目安に
- 人に渡すファイルにWebPは使わない
- 元ファイルは必ず残す