この記事でわかること
  • 画像が重いことがサイトに与える影響
  • Webで使う画像の適正サイズとファイル形式
  • 無料でできる画像圧縮の方法とツール
  • WordPressで画像を自動最適化する方法
  • よくある失敗パターンと対処法

画像が重いと何が起きるのか

3秒
読み込みに3秒以上かかると
約53%のユーザーが離脱
1秒
表示速度が1秒遅くなると
コンバージョン率が約7%低下
Core Web Vitals
Googleの評価指標に
表示速度が含まれる

Webページが重くなる原因の多くは画像です。スマートフォンで撮影した写真は1枚あたり3〜8MBあることも珍しくなく、それをそのままWordPressにアップロードしているケースが非常に多く見られます。適切に圧縮すれば100〜300KB程度に抑えられ、体感速度が大幅に改善します。

Webに使う画像の適正サイズ

用途 推奨サイズ(横幅) 目標ファイルサイズ
トップページのメインビジュアル 1920px以下 200〜400KB
ブログのアイキャッチ画像 1200px以下 100〜200KB
コンテンツ内の写真 800〜1000px 80〜150KB
サムネイル・アイコン 200〜400px 30KB以下
ロゴ(透過PNG) 400〜600px 50KB以下

ファイル形式の選び方

JPEG(.jpg)
写真・背景あり画像に最適

写真やグラデーションを含む画像に向いています。圧縮率が高く、ファイルサイズを小さくしやすいです。透過(透明背景)は非対応。

PNG(.png)
ロゴ・透過が必要な画像に

透明背景が必要なロゴやアイコンに向いています。ファイルサイズはJPEGより大きくなりがち。写真にはあまり向きません。

WebP(.webp)
JPEGより30〜40%軽くなる次世代形式

Googleが開発した次世代画像形式。同等の画質でJPEGより大幅に軽くなります。主要ブラウザはすべて対応済み。WordPressも標準対応しています。

SVG(.svg)
ロゴ・アイコン・シンプルな図形に

拡大しても画質が劣化しないベクター形式。ロゴやシンプルなイラストに最適で、ファイルサイズも非常に小さいです。

今すぐできる!無料の画像圧縮方法

①
Squooshで圧縮する(おすすめ)

Googleが提供するブラウザ上で動く無料ツール(squoosh.app)。インストール不要でドラッグ&ドロップするだけ。左右のスライダーで圧縮前後を比較しながら調整できます。WebP形式への変換も可能で、ほとんどのケースでこれ一つで対応できます。

②
TinyPNG / TinyJPGで圧縮する

URL(tinypng.com)にアクセスして画像をドロップするだけで自動圧縮されます。一度に複数ファイルを処理できて便利。無料版は1ファイル5MBまで、月20枚まで対応。PNG・JPEGどちらも対応しています。

③
WordPressプラグインで自動最適化する

EWWW Image Optimizer や Smush などのプラグインを使うと、アップロード時に自動で圧縮・WebP変換してくれます。既存の画像をまとめて最適化する機能もあるため、サイト全体をまとめて改善したいときに有効です。

④
アップロード前にサイズを確認する習慣をつける

圧縮後のファイルをWordPressにアップする前に、ファイルサイズ(KB・MB)を確認しましょう。1MB以上のファイルは要注意。写真なら200KB以内、アイキャッチなら150KB以内を目安にすると安心です。

よくある失敗パターンと対処法

正しい対応 ◎ よくある失敗 ✕
アップロード前にSquooshで圧縮する スマホで撮った3〜8MBの写真をそのままアップする
横幅1200px以内にリサイズしてから使う 4000×3000pxの高解像度写真をそのまま使う
ロゴはSVGかPNG透過で用意する ロゴをJPEGで保存して白背景が残る
WebP形式に変換してファイルサイズを削減する 古いPNGファイルを何年も使い続ける
PageSpeed Insightsで定期的にスコアを確認する サイトが重くなっていても気づかない

WordPressの「メディア設定」も確認しよう

WordPressには、アップロードした画像を自動でリサイズする機能があります。管理画面の「設定」→「メディア」から、サムネイル・中サイズ・大サイズそれぞれの上限ピクセルを設定できます。初期設定のままでは大きすぎる場合があるため、サイトのレイアウトに合わせて見直しておくと、自動生成される画像サイズを適切にコントロールできます。

Q圧縮すると画質が劣化しますか?
適切な設定で圧縮した場合、人の目ではほとんど違いが分かりません。Squooshなら圧縮前後をリアルタイムで比較できるため、許容範囲を確認しながら調整できます。品質80〜85%程度が、サイズと画質のバランスが取れた目安です。
Qすでにアップ済みの画像をまとめて最適化できますか?
WordPressプラグインの「EWWW Image Optimizer」や「Smush」には、既存の画像をまとめて再圧縮する機能があります。サイト開設後に初めて対応する場合でも、一括処理で改善できます。
QPageSpeed Insightsのスコアは何点以上を目指すべきですか?
モバイルで50点以上、できれば70点以上を目安にするといいでしょう。100点を目指す必要はありませんが、50点を下回る場合は改善の余地が大きいサインです。画像最適化だけで20〜30点改善するケースも珍しくありません。