WordPressでスケーリングされた画像を簡単に提供する方法（ステップバイステップ）

WordPressサイトのスピードテストを実行した場合、「スケーリングされた画像を配信する」という警告が表示されたことがあるかもしれません。Google PageSpeedやGTmetrixのようなツールは頻繁にフラグを立てますが、明確には説明しません。

単に、画像が表示されるスペースよりも画像が大きいということです。これはページの読み込みを遅くし、SEOに悪影響を与え、モバイルユーザーをイライラさせる可能性があります。

手作業で画像を編集したり、コードを調べたりすることなく、WordPressユーザーがこの問題を解決するお手伝いをしてきました。適切なアプローチで、すぐに解決し、再発を防ぐことができます。

このガイドでは、技術的なスキルは不要で、WordPressでスケーリングされた画像を段階的に提供する方法を説明します。

WordPressでサイズ変更された画像を提供する理由

WordPressウェブサイトでは、ブログ記事、サムネイル、ページヘッダー、カバー画像などに画像を使用する可能性が高いです。各画像は目的を果たし、訪問者にとって視覚的な体験を作り出すのに役立ちます。

テーマによっては、これらの画像は特定のピクセル寸法で表示されます。たとえば、アイキャッチ画像は680×382ピクセルで表示されるかもしれませんが、サムネイルは100×100ピクセルかもしれません。

画像をサイトに必要な正確な寸法で保存することが重要です。たとえば、アイキャッチ画像のスペースが680×382ピクセルである場合、画像ファイルはその寸法と一致する必要があります。

画像のサイズを変更しないと、読み込み時間が遅くなったり、ユーザーエクスペリエンスが低下したりする可能性があります。理由はいくつかあります。

• 必要以上に大きなファイルは、訪問者が追加データをダウンロードする必要があるため、読み込み時間を遅くします。
• 必要以上にピクセル数の少ない画像を使用すると、大きな表示サイズでぼやけたりピクセル化したりして見えることがあります。
• ウェブサイトは、画像をその場でリサイズする必要があり、コンテンツがユーザーに表示される前に、より多くの処理時間が必要になります。

これらすべてが、訪問者にとって満足度の低い体験につながる可能性があり、画像SEOにも悪影響を与える可能性があります。

そのため、GTMetrix のようなツールでウェブサイトのパフォーマンスをテストすると、速度向上のためにスケーリングされた画像を提供するようにという推奨事項がよく表示されます。

さて、WordPressでスケーリングされた画像を提供する方法を順を追って説明しましょう。パフォーマンスのために画像を最適化する2つの簡単な方法をカバーします。

• 方法1：プラグインでスケーリングされた画像を提供する（より簡単）
• 方法2：手動でサイズ変更された画像を提供する
• WordPressでの画像スケーリングに関するよくある質問
• ボーナスリソース

方法1：プラグインでスケーリングされた画像を提供する（より簡単）

WordPressでスケーリングされた画像を提供する最も簡単な方法は、各訪問者のデバイスに適切なサイズで画像を自動的にリサイズして配信するプラグインを使用することです。

この方法は、すべてをバックグラウンドで処理するため、ほとんどの初心者におすすめです。セットアップが迅速で、典型的なウェブサイトでうまく機能します。

無料のOptimoleプラグインは、当社がテストした最高のWordPress画像圧縮プラグインの1つです。画像を自動的にスケーリングします。ただし、サイトの月間訪問者数が5,000人を超える場合は、プレミアムバージョンが必要になることに注意してください。

開始するには、Optimoleプラグインをインストールして有効化してください。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドに従ってください。

アクティベートしたら、メディア » Optimoleに移動します。APIキーのサインアップを求められるか、既存のキーを入力するように求められます。プロセスは簡単です。

メールを確認し、「アカウントを作成して接続」ボタンをクリックするだけです。Optimoleは、キーを貼り付けたりダッシュボードを離れたりすることなく、サイトを自動的に接続します。

Optimoleはバックグラウンドで画像の最適化を開始します。各訪問者の画面に基づいて適切なサイズを選択し、グローバルなCDNを通じて画像を提供するため、サイトは高速に保たれます。

「設定」タブでは、画像が最適化およびスケーリングされたバージョンに置き換えられていることがわかります。CDNのおかげで、これは自動的に行われ、サーバーの負荷を遅くしません。

Optimoleはデフォルトで遅延読み込みも有効にします。これは、画面に表示されていない画像は必要になるまで読み込まれないことを意味します。これにより、ページの読み込み時間が短縮され、パフォーマンスが向上します。

デフォルト設定はほとんどのサイトでうまく機能しますが、「詳細設定」メニューで微調整できます。更新を行った場合は、必ず「変更を保存」ボタンをクリックしてください。

この方法は、一度設定したらあとはお任せしたい場合に最適です。高速で初心者にも優しく、個々の画像を個別に編集する必要はありません。

とはいえ、最も柔軟なオプションではありません。画像の寸法を完全に制御したい場合や、自分で最適化を処理したい場合は、画像を個別にスケーリングして提供する方が適しているかもしれません。

方法2：手動でサイズ変更された画像を提供する

手動での画像サイズ変更は、画像の見た目とパフォーマンスを完全に制御できます。少し手間はかかりますが、サイト全体でより正確で一貫した結果が得られます。

このアプローチがより柔軟性を提供する理由は次のとおりです。

• アップロード前に正確な寸法と画像形式を選択できます。
• サードパーティ製のツールに頼ることなく、ファイルサイズを削減できます。
• プラグインの制限や月間訪問者数の上限を回避できます。
• テーマやレイアウト全体でより一貫した結果が得られます。

そのため、この方法はデザイナー、写真家、および細かく制御したい人にとって理想的です。これには3つの方法があります。

1. 画像編集ソフトウェアを使用する（推奨）
2. WordPressメディアライブラリ
3. WordPressのメディア設定内。

まずは画像編集ソフトウェアのアプローチから始めましょう。

1. 画像編集ソフトウェアで画像をスケーリングする

これは、当社のウェブサイト全体で使用されている方法です。Adobe PhotoshopやAffinity Photoのようなツールを使用すると、画像をアップロードする前にサイズを変更できます。

適切なピクセルサイズを選択し、必要なフォーマットを選び、ファイルをより小さいサイズで保存できます。すべて1つのステップで完了します。

Affinity Photoの切り抜きツールの使用例を次に示します。

適切な寸法を選択することに加えて、アップロード前に画像を軽量で高速に読み込めるようにする方法は他にもあります。

その他のヒントについては、ウェブパフォーマンスのために画像を最適化する方法に関するガイドをご覧ください。

2. WordPressメディアライブラリでの画像スケーリング

WordPress内で直接画像をリサイズすることもできます。組み込みの画像エディターを使用すると、アップロードした画像を切り抜き、回転、反転、拡大縮小できます。

これを行うには、画像が表示されている投稿またはページを開きます。画像をクリックし、「置き換え」ボタンをクリックして「メディアライブラリを開く」を選択します。

これで、画像が選択された状態でメディアライブラリが開きます。

右側には、代替テキスト、タイトル、キャプション、説明のフィールドが表示されます。その下にある「画像を編集」リンクをクリックします。

これで画像エディタ画面が表示されます。

ここから、画像をプレビューしたり、基本的な編集ツールを使用したりできます。画像のサイズを変更するには、右側にある「画像の拡大縮小」オプションを探してください。

希望する幅を入力すると、アスペクト比を維持するために高さが自動的に更新されます。

例えば、2560×1637ピクセルの画像は、ワンクリックで1200ピクセル幅に縮小できます。

新しい幅を入力したら、「スケール」ボタンをクリックして変更を保存します。

WordPressでは画像を縮小することしかできず、拡大することはできないことに注意してください。サイズを大きくすると品質が低下したり、完全に失敗したりする可能性があります。

WordPressでの画像編集にお困りですか？基本的な画像編集とサムネイルの切り抜きに関するチュートリアルをご覧ください。

メディア設定での画像サイズの調整

デフォルトでは、WordPressは各画像のさまざまなサイズのバージョンをいくつか作成します。これらのデフォルトサイズは、ダッシュボードの設定 » メディアに移動して変更できます。

ここで、サムネイル、中、大のサイズの寸法を調整できます。これは、画像がサイト全体でどのようにスケーリングされ、表示されるかに影響します。

より多くの画像サイズが必要な場合は、数行のコードまたはプラグインを使用して追加のものを作成できます。

画像サイズを変更した後、既存の画像に対してサムネイルを再生成して新しい設定を使用する必要があります。

投稿やページに画像を追加する際、ブロック設定パネルで表示するサイズを選択することもできます。

WordPressでの画像スケーリングに関するよくある質問

以下は、WordPressでの画像スケーリングと処理についてユーザーがよく抱く質問です。

update_option( 'medium_size_w', 0 );
update_option( 'medium_size_h', 0 );
update_option( 'large_size_w', 0 );
update_option( 'large_size_h', 0 );

ボーナスリソース

メディアと画像は、WordPressのウェブサイトを魅力的にします。以下は、WordPressのメディア機能を最大限に活用するのに役立つ追加のリソースです。

• WordPressにヒーロー画像を追加する方法
• WordPressブロックエディターにおけるカバー画像とアイキャッチ画像の違い（初心者向けガイド）
• WordPressに動画をアップロードしてはいけない理由
• WordPressで画像ギャラリーを作成する方法（ステップバイステップ）
• WordPressにソーシャルメディアフィードを追加する方法（ステップバイステップ）

このチュートリアルで、WordPressでスケーリングされた画像を提供する方法を学べたことを願っています。また、WordPressの画像SEOを最適化するガイドや、ブログ投稿用のAIを使用して画像を生成する方法に関する記事も参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。