WordPressの画像サイズの完全なガイド（初心者向け）

画像はウェブサイトを実現します。ストーリーを語り、重要なコンテンツを強調し、ユーザーエンゲージメントを改善します。しかし、新しいWordPressユーザーにとっては、舞台裏で画像サイズがどのように機能するかは必ずしも明確ではありません。

WordPressが画像の複数のバージョンを作成するのはなぜですか？ブログ投稿、ヘッダー、製品画像にはどのような寸法を選択する必要がありますか？そして、速い負荷時間を維持しながら、どのようにあなたの画像を鋭く見せ続けますか？

この完全なガイドでは、WordPressの画像サイズ、それらがどのように機能するか、保存されている場所、それらをカスタマイズする方法、最高のパフォーマンスのために最適化する方法について知っておくべきことをすべて学びます。

WordPressの画像サイズの完全なガイド

WordPressがアップロードされた画像を処理する方法

WordPressに画像をアップロードすると、保存するだけではありません。同じ画像の複数のバージョンがさまざまなサイズで自動的に作成されます。

これにより、サムネイル、ポスト、ギャラリー、スライダーなど、サイトのどこでどのように使用されるかに応じて、適切なサイズの画像が提供されます。

WordPressに画像はどこに保存されますか？

管理側から、画像を含むすべてのアップロードされたメディアファイルがメディアライブラリに表示されます。ダッシュボードのメディア>>ライブラリにアクセスしてアクセスできます。

ここでは、アップロードされた画像をグリッドまたはリストレイアウトで表示できます。また、メディアタイプ（写真、ビデオ、オーディオなど）でフィルタリングしたり、画像タイトル、キャプション、または説明のキーワードを使用して検索することもできます。

舞台裏で、WordPressは、サーバー上に/wp-content/uploads/ディレクトリに画像を保存します。デフォルトでは、このフォルダーは、画像がアップロードされた時期に基づいて年と月ごとに整理されています。

この構造化されたアプローチにより、メディアファイルを時間の経過とともに簡単に管理できます。

あなたがより高度なユーザーであり、この構造を変更したい場合、一部のプラグインを使用すると、メディアをカスタムフォルダーに整理できます。ただし、ほとんどの初心者にとっては、デフォルトのシステムは正常に機能します。

WordPressのデフォルトの画像サイズ

画像を追加すると、WordPressはさまざまなサイズの複数のバージョンを自動的に作成します。これらのデフォルトサイズは、WordPress設定で設定されており、テーマとレイアウトに応じてサイトのさまざまなセクションで使用されます。

WordPressが生成する標準のデフォルトサイズは次のとおりです。

• サムネイル- 150×150ピクセル：ブログアーカイブ、サイドバー、ギャラリーでよく使用されます。
• 中- 300×300ピクセル：一般的に、より小さなインポスト画像または製品サムネイルに使用されます。
• 大きい- 1024×1024ピクセル：通常、ヒーローの画像、特集画像、またはスライダーに使用されます。
• 完全なsiz e - 変更せずにアップロードした元の画像。

プラグインとテーマは、特定のレイアウト要件に適合する独自のカスタム画像サイズを作成することもできます。そのため、テーマに応じて、投稿やページに画像を追加する際に追加のサイズのオプションが表示される場合があります。

デフォルトの画像サイズを変更する方法

組み込みの画像サイズがニーズに合わない場合、WordPressは簡単に変更できます。

これを行うには、ダッシュボードに移動して、 [設定] >>メディアを選択します。ここでは、サムネイル、中程度、および大きな画像サイズに希望する幅と高さを入力するオプションが表示されます。

変更を行ったら、画面の下部にある[変更]をクリックします。前進すると、アップロードするすべての新しい画像は、これらの新しい次元に従います。ただし、以前にアップロードされた画像は、それらを再生しない限り影響を受けません（詳細については後で詳しく説明します）。

コンテンツ領域の最大表示幅に一致する画像サイズを選択することをお勧めします。たとえば、ブログ投稿のコンテンツが幅800ピクセルの場合、3000ピクセル全体の画像をアップロードすることは目的を果たさず、サーバースペースのみを無駄にします。

WordPressのカスタム画像サイズ

デフォルトのサイズに加えて、たとえば、1つのセクションに正方形のサムネイルや別のセクション用の長方形のサムネイルが必要な場合、サイトに画像がどのように表示されるかをさらに制御する必要がある場合があります。

開発者は、テーマのfunctions.phpファイルにコードを使用してカスタム画像サイズを追加できます。例えば：

add_image_size（ 'custom-size、400、250、true）;

これにより、WordPressに、ハードトリッピングが有効になっている400×250ピクセルの画像を生成するように指示されます。テーマファイルの編集が快適でない場合は、シンプルな画像サイズなどのプラグインを使用して、ダッシュボードから画像サイズを追加、削除、または再生できます。

WordPressが表示するサイズを選択する方法

WordPressは、コンテキストに応じて表示する画像サイズを選択することに賢明です。

たとえば、ブログリストでは、サムネイルバージョンを表示する場合がありますが、投稿内には中程度または大規模を選択できます。使用するテーマは、この動作に大きな影響を与えます。これらのテンプレートは、どの画像サイズがロードされているか、どこにあるかを決定します。

WordPressは、SRCSET属性を使用してレスポンシブ画像もサポートしています。これは、訪問者のデバイスと画面解像度に基づいて、自動的に最高のサイズの画像を提供することを意味します。モバイルデバイスはより小さな画像ファイルを受信しますが、高解像度ディスプレイ（Retina画面など）はよりシャープなバージョンを受信する場合があります。

一般的なユースケースに最適な画像寸法

正しい画像寸法を選択すると、ウェブサイト全体で一貫性を維持し、厄介なストレッチやぼやけたビジュアルを回避できます。一般的に使用される画像タイプと最適なサイズを次に示します。

• ブログ注目画像： 1200×630ピクセル。これは、ポストヘッダーとソーシャル共有に適しています。
• 全幅バナーまたはヒーロー画像： 1920×1080ピクセル。大画面やスライダーに最適です。
• ロゴ画像： 250×100ピクセル。ロゴをヘッダーとフッターにカリカリに保ちます。
• ファビコン： 512×512ピクセル。ほとんどのブラウザに必要です。
• 製品画像（eコマース） ：800×800ピクセル。正方形の製品グリッドに最適です。

同様の画像タイプで一貫したアスペクト比を使用してみてください。たとえば、すべてのブログに含まれる画像は16：9の比率に従うことができますが、製品サムネイルは正方形のアスペクト比（1：1）を維持できます。

Gutenbergエディターで画像サイズを編集します

Gutenbergブロックエディターを使用してコンテンツを作成する場合、画像サイズの調整は簡単です。

画像ブロックを投稿またはページに追加すると、サイドバーにオプションが表示され、サムネイル、ミディアム、ラージ、フルなどの事前定義されたサイズを選択できます。

カスタムサイズが登録されている場合は、ここにも表示されます。」

寸法を直接入力することもできます。目的の幅と高さを入力するだけで、WordPressはそれに応じてディスプレイサイズを自動的に調整します。これにより、実際のファイルサイズは変更されませんが、ページに表示される方法だけです。

サイズの変更後にサムネイルを再生します

設定のデフォルトの画像サイズを変更した場合、WordPressは古い画像を自動的にサイズ変更しません。以前にアップロードされた画像に新しいサイズを適用するには、サムネイルを再生する必要があります。

これに役立ついくつかのプラグインがあります。最も人気のあるものは次のとおりです。

• サムネイルを再生します
• 力を再生します

これらのプラグインをインストールすると、更新された設定に基づいて数回クリックして、既存のすべての画像を変更することができます。

WordPressで画像を最適化する方法

画像の最適化は、ウェブサイトの速度とパフォーマンスを改善するために不可欠です。大規模な画像ファイルは、特にモバイル訪問者にとって、サイトを遅くし、直帰率を上げることができます。

画像を最適化する最も効果的な方法は次のとおりです。

1.適切なファイルタイプを選択します

写真やカラフルな画像にはJPEGを使用してください。圧縮をサポートし、より小さなファイルサイズで良質を維持します。鋭いエッジと透明性が重要なグラフィック、アイコン、またはスクリーンショットにはPNGを使用します。

2。アップロードする前に画像のサイズを変更します

画像のサイズを変更するためにWordPressに完全に依存しないでください。アップロードする前にコンテンツの幅に合わせてPhotoshop、Canva、または任意のオンラインリジザーなどのツールを使用してサイズを変更します。

たとえば、ブログのコンテンツ領域が幅800ピクセルの場合、2400ピクセルの画像をアップロードする必要はありません。

3。画像を圧縮します

紛失した圧縮技術を使用して画像ファイルサイズを削減できます。これにより、顕著な品質損失なしに不必要なデータを削除できます。 Tinypng、ImageOptim、またはShortPixel、Smush、およびImagifyなどのプラグインなどのツールは、このプロセスを自動化します。

4.怠zyなロードを有効にします

WordPressには、デフォルトで怠zyな読み込みが有効になっています。これは、ユーザーが下にスクロールして初期の負荷時間を短縮し、パフォーマンスを改善した場合にのみ、画面ロードの可視領域の下の画像を意味します。

画像サイズを管理するための便利なプラグイン

いくつかのWordPressプラグインは、画像サイズをより効果的に管理するのに役立ちます。

• シンプルな画像サイズ：コードの変更を必要とせずに、カスタム画像サイズを作成および管理できます。
• サムネイルを再生する：テーマスイッチまたは設定の変更後に画像サイズを再作成します。
• メディアの交換を有効にする：この機能により、URLを変更せずに画像を置き換えることができます。
• ShortPixel/Smush/Imagyify：人気のある画像最適化プラグインが画像を自動的に圧縮およびサイズ変更します。

結論

WordPressで画像サイズを理解することは、大きな違いを生む小さなが重要なことの1つです。正しく行われた場合、サイトはよりプロフェッショナルに見え、より速く読み込まれ、訪問者により良い体験を提供します。

時間をかけて画像サイズの設定を定義し、アップロードする前に画像を最適化し、適切なツールを使用してメディアファイルを効果的に管理します。やると、よりクリーンで、より速く、より一貫したWordPressサイトができます。これは、すべてのサイト所有者が目指すべきものです。

ブログの詳細

• 5ベスト無料のWordPress画像最適化プラグイン
• Elementorで画像スクロール効果を作成する方法
• ロイヤリティフリーの画像とビデオを見つけるのに最適なWeb​​サイト