WordPressで拡大縮小された画像を簡単に配信する方法（ステップバイステップ）

WordPressサイトで拡大縮小された画像を配信したいとお考えですか？

Imagelyは、そのサイズに注意を払わずに画像をアップロードすることによって、ウェブサイトの速度を遅くすることがよくあります。

画像を正しいサイズで提供することで、品質を落とすことなくWordPressのパフォーマンスを向上させることができます。

この投稿では、WordPressで拡大縮小された画像を簡単に提供する方法を紹介します。

なぜWordPressで拡大縮小された画像を配信するのか？

WordPressサイトでは、ブログ投稿、サムネイル、ページヘッダー、カバー画像などに画像が必要です。

テーマにもよりますが、これらの画像は一定のピクセル数を占めます。例えば、アイキャッチ画像は680×382ピクセル、サムネイルは100×100ピクセルです。

サイトに必要な正しいサイズに縮小された画像を使用することが重要です。例えば、アイキャッチ画像が680×382ピクセルの場合、そのサイズで保存する必要があります。

そうしないと、サイトの表示が遅くなったり、ユーザー体験の質が低下したりします。以下はその一般的な理由です：

• 訪問者は必要以上に大きなファイルをダウンロードしなければならず、ロード時間が長くなります。
• 許容スペースより少ないピクセルの画像を使用すると、大きなサイズで表示したときにぼやけて見えます。
• あなたのサイトは、その場で画像サイズを変更しなければならないため、ユーザーにコンテンツを表示するまでに多くの処理を実行しなければならない。

Imagelyにかかわらず、ユーザーに悪い経験を与えることになり、イメージSEOにも悪影響を及ぼす可能性がある。

そのため、GTMetrixスキャンを使用してサイトのパフォーマンスをテストすると、多くの場合、サイトの高速化のためにスケーリングされた画像を提供することが推奨されます。

ということで、WordPressで拡大縮小された画像を簡単に提供する方法を見ていきましょう。ここでは2つの方法を取り上げます：

方法1：プラグインで拡大縮小された画像を提供する

画像を拡大縮小して提供する最も簡単な方法は、サイトの画像を自動的に適切なサイズで表示するプラグインを使用することです。この方法は最も簡単ですが、2番目の方法ほどの柔軟性はありません。

無料のOptimoleプラグインは、WordPressの画像圧縮プラグインの中でもトップクラスで、画像を自動的に拡大縮小してくれます。しかし、月に5,000人以上の訪問者がある場合は、プレミアムバージョンが必要です。

まず、Optimoleプラグインをインストールし、有効化する必要があります。詳しくはWordPressプラグインのインストール方法をご覧ください。

有効化すると、自動的にMedia ” Optimoleのページに移動し、APIキーのサインアップまたは既存のAPIキーの入力を求められます。これはとても簡単です。

メールアドレスが正しいことを確認し、「アカウントの作成と接続」ボタンをクリックしてください。Optimoleへの接続は自動的に行われます。他のサイトにアクセスしたり、手動でキーを貼り付けたりする必要はありません。

Optimoleはバックグラウンドで画像の最適化を開始します。各訪問者の端末やブラウザーに適した画像サイズを自動的に選択し、高速なOptimole Cloud ServiceCDNから画像を提供します。

設定」タブをクリックすると、投稿日やページ内の画像が自動的にOptimoleによって最適化・拡大縮小された画像に置き換えられます。

これはCDNを経由するため、その場で行われるわけではなく、サイトのパフォーマンスが低下することはない。

また、プラグインはレイジーロードを有効化しており、現在表示されていないページ上の画像は必要になるまで読み込まれません。これもページの読み込み時間を短縮し、サイトのパフォーマンスを向上させる効果的な方法です。

これらの設定は、ほとんどのサイトに適しています。しかし、「高度な設定」メニューの設定を使って、Optimoleをさらにカスタマイズすることができます。

設定を変更した場合は、ページ下部の「変更を保存」ボタンを忘れずにクリックしてください。

方法2：手動でスケーリングされた画像を提供する

プラグインを使わずに画像を拡大縮小することもできます。画像編集ソフトを使う方法、WordPressメディアライブラリの画像編集機能を使う方法、WordPressメディア設定の値を変更する方法の3つがあります。

画像編集ソフトによる画像の拡大縮小

Adobe PhotoshopやAffinity Photoなど、コンピューター上の写真編集ソフトを使えば、サイトにアップダーする前に画像を適切なサイズに縮小することができます。

このソフトウェアでは、画像に適切なピクセル数を選択し、小さなファイルサイズとお好みのファイル形式で保存することができます。

例えば、これはAffinity Photoの切り抜きツールのデモのスクリーンショットです。

最初から画像サイズを正しく設定する以外にも、画像をアップロードする前にできることがあります。

詳しくは、ウェブパフォーマンスのために画像を最適化する方法をご覧ください。

WordPressメディアライブラリで画像を拡大縮小する

WordPressで基本的な画像編集ができることをご存知ですか？WordPressの画像編集機能では、画像の切り抜き、回転、反転、拡大縮小ができます。

投稿やページを編集する際には、編集したい画像をクリックする必要があります。次に「置換」ボタンをクリックし、メニューから「メディアライブラリを開く」を選択します。

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

右側には、画像のaltテキスト、タイトル、キャプション、説明を追加できるエリアがあります。画像の編集」リンクもあります。

そのリンクをクリックするだけで、「画像の編集」ページにアクセスできます。

ここには、画像のプレビュー、編集ボタン、その他画像の拡大縮小やトリミングに便利なオプション設定があります。

画像を拡大縮小するには、右側の「Scale Image」の下にある「New dimensions」の値のいずれかを変更するだけです。

例えば、この画像の解像度は2560×1637ピクセルと非常に大きい。最初の’Scale Image’フィールドに入力することで、1200ピクセルの幅に縮小することができます。

画像の高さの値は、画像の比率を保つために自動的に変更されるので、変更するのはすべて幅だけです。

その後、’Scale’ボタンをクリックして画像の解像度を変更します。

WordPressでは、画像を縮小することしかできません。画像のサイズを大きくすることはできません。

詳しい手順については、WordPressで基本的な画像編集を行う方法と、WordPress投稿サムネイルのトリミングと編集方法をご覧ください。

メディア設定で画像サイズを調整する

サイトに画像をアップロードすると、WordPressは自動的に異なるサイズのコピーを複数作成します。WordPress管理エリアの設定 ” メディアページで、これらのサイズをカスタマイズできます。

ここでは、サムネイル、中、大の画像サイズの寸法を簡単に変更できます。

サイトによっては、サムネイル、ミディアム、ラージ以外の画像サイズが必要な場合があります。WordPressで追加画像サイズを作成する方法をご覧ください。

初期設定の画像サイズを変更したり、追加の画像サイズを作成した場合、影響を受けるのは新規画像のみです。既存の画像については、画像サイズを再生成する必要があります。

投稿やページに画像を追加する際、ページ左のブロック設定で画像サイズを選択することができます。

このチュートリアルで、WordPressで拡大縮小された画像を提供する方法を学んでいただけたでしょうか。WordPressの画像SEOの最適化に関するガイド、またはAIを使ってブログ投稿用の画像を生成する方法に関する投稿もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.