WordPressの画像を軽くする方法｜表示幅とファイル容量の違い

本文の写真を小さく表示しただけでは、読者が読み込む画像データまで小さくなったとは限りません。表示を整えるときと、読み込むデータを軽くするときは、確認する場所が違います。

1. 表示幅・画像の寸法・ファイル容量を区別する

• 表示幅：ページ上で画像がどれくらい大きく見えるか。
• 画像の寸法：画像自体の縦横のピクセル数。
• ファイル容量：画像データの重さ。KBやMBで表示されます。

WordPressでは画像から複数サイズを生成し、対応する書き出し方ではブラウザが画面に合う画像を選べます。ただし、元画像の大きさや、実際に読み込まれるファイルは、挿入方法・テーマ・閲覧環境によって変わります。

2. 元の写真を残し、掲載用のコピーを作る

1. 元ファイルは残し、別名のコピーを用意します。
2. 写真を掲載する幅に対して、極端に大きい画像なら寸法を縮めます。拡大して見せる写真や細かい文字入り画像は、必要な解像度を残してください。
3. 写真ならJPEGやWebPなどで試し、保存前後の容量と見た目を比較します。文字や透明な背景が大切な画像は、形式を変えて見え方が崩れないかも確認します。

3. WordPressで差し替え、表示と容量を比べる

1. 新しいファイルをメディアライブラリに追加します。対象の画像を置き換え、代替テキスト、キャプション、画像リンクが必要なら引き継ぎます。
2. プレビューで写真の見た目を確認してから更新します。PCとスマホで、文字や細部が読めるか確認してください。
3. 軽くなったかを厳密に見る場合は、ブラウザの開発者ツールの「ネットワーク」で画像を絞り込み、実際に読み込まれたファイルと転送サイズを同じ条件で見比べます。

古い画像が別の記事でも使われていないか確認するまでは、メディアライブラリの元ファイルを削除しないでください。最初は、ページ上部にある大きな写真を1枚ずつ見直すと、変更の影響を確かめやすくなります。

関連記事

• 画像の見た目の大きさを調整する
• 差し替え後に代替テキストを確認する
• 公開後に画像が表示されないときの確認方法

サイトの準備に使えるサービス

これから公開先を用意する方は、ドメインとサーバーの条件を見比べてみてください。