多くの初心者は、画像のサイズを考慮せずにアップロードするため、読み込み時間が遅くなり、ユーザーエクスペリエンスが低下します。拡大縮小された画像を提供することは、画質を落とすことなくパフォーマンスを向上させる手っ取り早い方法です。
私たちはアップロードする前に画像を最適化するようにしていますが、必要な寸法に合わせて拡大縮小した画像を提供する必要がある場合もあります。
このチュートリアルでは、WordPressで拡大縮小された画像を簡単に提供する手順を説明します。
なぜWordPressで拡大縮小された画像を配信するのか？
WordPressサイトでは、ブログ投稿、サムネイル、ページヘッダー、カバー画像などに画像を使用することが多いでしょう。それぞれの画像には目的があり、訪問者に視覚的な体験を提供するのに役立ちます。
テーマによって、これらの画像は特定のピクセル寸法で表示されます。例えば、アイキャッチ画像は680×382ピクセルで表示され、サムネイルは100×100ピクセルで表示されます。
サイトに必要なサイズの画像を保存することが重要です。例えば、アイキャッチ画像のスペースが680×382ピクセルの場合、画像ファイルはその寸法に一致させる必要があります。
画像のサイズを変更しないと、読み込み時間が遅くなったり、ユーザー体験の質が低下したりする可能性があります。その理由をいくつか挙げてみましょう：
- 必要以上に大きなファイルは、訪問者が余分なデータをダウンロードする必要があるため、ロード時間が遅くなります。
- 必要以上に少ないピクセルの画像を使用すると、大きなディスプレイサイズではぼやけて見えたり、ピクセルがぼやけて見えたりすることがあります。
- ウェブサイトはその場で画像のサイズを変更しなければならず、ユーザーにコンテンツが表示されるまでに多くの処理時間が必須となります。
これらはすべて、訪問者にとって満足度の低い体験につながり、イメージSEOにも悪影響を及ぼす可能性がある。
そのため、GTMetrixのようなツールでサイトのパフォーマンスをテストすると、速度向上のためにスケーリングされた画像を提供するよう推奨されることがよくあります。
専門家による最適化でWordPressの速度を上げましょう！
画像の読み込みが遅く、サイトの足を引っ張っていませんか？WordPressスピード最適化サービスなら、サイトのパフォーマンスを瞬時に向上させることができます。
画像の拡大縮小から高度なスピード調整まで、技術的な詳細はすべてWordPressの専門家にお任せください。
それでは、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では、これら3つのサイズ以上の画像が必要な場合、さらに画像サイズを作成することもできます。
初期設定の画像サイズを変更したり、追加の画像サイズを作成した場合、影響を受けるのは新規画像のみです。既存の画像については、画像サイズを再生成する必要があります。
投稿やページに画像を追加する際、ページ左のブロック設定で画像サイズを選択することができます。
ボーナス・リソース
メディアと画像はWordPressサイトを魅力的にします。以下は、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.
Jiří Vaněk
When I change an image using WordPress, does it create a new scaled-down copy, or does WordPress just scale the image to a different size but keep the original image? My concern is whether the size of the loaded image will also change at the same time or not.
WPBeginner Support
You would determine which of those options that it does in the plugin’s settings.
管理者
Jiří Vaněk
I understand and thank you for your reply. I am primarily interested in the second option, in order to create a smaller copy of the image and thus reduce the demands on transmitted data. Thank you for the clarification.