WordPressで画像を軽量化して表示速度を改善する方法｜大きな画像を小さく表示してクリックで原寸表示する設定

WordPressブログでは、記事内に高解像度の画像を多く使用するとページの読み込み速度が低下する原因になります。特に1280×720pxのような画像を、表示上は640×360pxに縮小しているだけでは、実際には大きなファイルを読み込んでいるため速度改善にはつながりません。

この記事では、WordPressで画像の表示サイズと読み込みサイズを分ける方法、サムネイル画像を表示してクリック時に元画像を表示する方法、プラグインを使った効率的な画像管理方法について解説します。

表示サイズを小さくするだけでは画像容量は減らない

WordPressの画像ブロックやテーマ側の設定で、1280×720pxの画像を640×360pxとして表示することは可能です。しかし、この方法ではHTML上で表示サイズを指定しているだけで、ブラウザは元の1280×720pxの画像データを読み込みます。

例えば、容量が500KBある1280×720pxのJPEG画像を640×360px表示に設定しても、読み込まれるデータ量は500KBのままです。

ページ速度を改善するには、表示する画像そのものを640×360px程度のサイズに変更し、必要な場合だけ元画像を読み込む仕組みにする必要があります。

WordPressには、画像をアップロードした際に複数サイズの画像を自動生成する機能があります。

1280×720pxの画像をアップロードすると、WordPressは環境によって以下のようなサイズの画像を作成します。

記事投稿時に画像を挿入する際、「画像サイズ」の項目から中サイズや大サイズを選択すると、WordPressが生成した別サイズの画像URLを読み込むことができます。

この方法なら、本文では640×360px程度の画像を読み込み、クリック時には元画像を表示する構成にできます。

本文には小さい画像を表示し、クリックすると大きな画像を表示する仕組みにはライトボックス機能が便利です。

ライトボックスとは、画像をクリックした際にページ移動せず、画面上に拡大画像を表示する機能です。

WordPressでは、テーマやプラグインによって簡単に設定できます。例えば画像ギャラリー系プラグインやライトボックス対応プラグインを利用すると、サムネイル画像から元画像へのリンクを自動的に処理できます。

大量の記事で画像サイズを管理する場合は、画像最適化プラグインを利用すると効率的です。

代表的な画像最適化機能では、以下のような処理を自動化できます。

例えば、JPEG画像をWebP形式へ変換すると、画質を大きく落とさずにファイル容量を削減できる場合があります。

ただし、すでにアップロード済みの画像については、プラグイン導入後に一括最適化処理が必要になる場合があります。

AFFINGER6を利用している場合でも、画像ブロックで単純に幅を640pxへ変更するだけでは読み込み容量は変わりません。

記事内へ画像を挿入するときは、WordPressが生成した中サイズや大サイズの画像を選択し、必要に応じてリンク先を「メディアファイル」に設定する方法がおすすめです。

例えば、1280×720pxの画像をアップロードした場合、本文では640×360px程度の画像を表示し、クリック時のみ1280×720pxの画像を開くことで、表示速度と閲覧性を両立できます。

WordPressには、端末サイズに合わせて適切な画像を選択するsrcsetという仕組みがあります。

スマートフォンでは小さい画像、パソコンでは大きめの画像を自動的に選択できるため、不要に大きな画像を読み込むことを防げます。

WordPress標準の画像挿入機能を正しく利用すれば、この仕組みは自動的に適用されます。そのため、HTMLで画像サイズを直接指定するよりも、WordPressの画像サイズ機能を利用する方がSEOや表示速度の面でも有利です。

WordPressで1280×720pxの画像を本文では640×360px程度で表示し、クリック時に元画像を表示することは可能です。

重要なのは、単純な縮小表示ではなく、実際に読み込む画像ファイルを小さくすることです。

WordPress標準の画像サイズ機能やライトボックス、画像最適化プラグインを組み合わせることで、画像準備の手間を減らしながらページ速度を改善できます。AFFINGER6でも同じ考え方で、表示サイズではなく読み込みサイズを意識して画像を管理することが大切です。