WordPress で使用する画像のサイズ (重要な要素とヒント)

ウェブサイトの読み込み速度が遅いと感じていますか? Web サイトの速度が遅いのはさまざまな要因が考えられますが、大きな画像サイズもその 1 つです。大量のコンテンツを含む Web サイトをお持ちの場合、画像サイズがサイト速度の遅さの原因の 1 つである可能性があります。したがって、サイトの邪魔にならないように WordPress 画像を最適化することが重要です。このガイドでは、WordPress Web サイトに最適な画像サイズを決定するための概要を説明します。これは、顧客との対話を強化し、生産性を向上させるのに役立ちます。

WordPress の画像サイズを理解する

WordPress の画像サイズは、サイズ (ピクセル単位) と画像ファイルのサイズ (キロバイト (KB) またはメガバイト (MB) 単位) によって決まります。 WordPress サイトに画像を表示する場合、画像のサイズは見た目の美しさだけではなく、サイトのパフォーマンス、ユーザー エクスペリエンス、検索エンジンの最適化 (SEO) に直接影響することを認識することが重要です。 WordPress は、アップロード時に拡大縮小されたバージョンを自動的に作成することで、ユーザーが非常に大きな画像を使用しないように保護します。さらに、アップロードするすべての画像には、サイトで使用される場所に応じて、表示されるバリエーションやサイズが異なります。詳細については以下をご覧ください。

SRCSet の機能

画像を WordPress にアップロードすると、プラットフォームはその画像の複数のサイズ (サムネイル、中、大など) を自動的に作成します。 SRCset 属性を使用すると、ブラウザはデバイスの画面サイズとピクセル密度に応じて最適な画像サイズを選択できます。

たとえば、ブログ投稿に画像が含まれており、ユーザーが大きな画面を備えたデスクトップから Web サイトにアクセスした場合、ブラウザは大きなバージョン (1024 ピクセルなど) を読み込む可能性があります。一方、ユーザーが携帯電話から閲覧している場合、ブラウザはより小さいバージョン (例: 300px) を選択し、読み込みが速くなります。

WordPress にアップロードするすべての画像のデフォルトのサイズは次のとおりです。

• サムネイル: 150 x 150 ピクセル
• 中: 300 x 300 ピクセル (設定によって異なります)
• 大: 1024 x 1024 ピクセル (設定によって異なります)
• フルサイズ:元の寸法

デフォルトの画像サイズを変更したい場合は、WordPress ダッシュボードの[設定] → [メディア]で変更できます。

WordPress で使用する画像のサイズ

ほとんどの場合、画像ファイルのサイズは 200kb を超えてはなりません。ほとんどの画像は 50kb ～ 100kb 以下になるはずです。画像ファイルをその範囲内に保つには、サイズなどの他の要素を考慮する必要があります。

WordPress で一般的に推奨される画像サイズをいくつか示します。

• ブログ投稿画像: 1200 x 630 ピクセル
• アイキャッチ画像 (投稿サムネイル): 1200 x 800 ピクセル
• ヘッダー画像/ヒーロー画像: 1600 x 900 ピクセルまたは 1920 x 1080 ピクセル
• 背景画像: 1920 x 1080 ピクセル
• スライダーとバナー: 1200 x 600 ピクセルまたは 1920 x 800 ピクセル
• 製品画像 (WooCommerce): 800 x 800 ピクセルまたは 1000 x 1000 ピクセル
• ロゴ画像: 200 x 100 ピクセルまたは 250 x 100 ピクセル

特別な理由がない限り、幅 5000 ピクセルの 5MB の画像をアップロードしないでください。 WordPress は、よりウェブサイトに適したバージョンを作成して使用できるようにします。ただし、元のサイズを表示すると、ページの読み込み速度が低下します。

WordPress にアップロードする適切な画像サイズを選択することは、Web サイトのパフォーマンスを最適化し、すべてのデバイスで画像が鮮明に見えるようにするために重要です。理想的な画像サイズは、画像が使用されるコンテキスト (ブログ投稿、サムネイル、スライダーなど)、応答性、ファイル サイズ、品質の考慮事項によって異なります。

WordPress サイズ画像に関して考慮すべき重要な要素

WordPress 用の画像を選択または作成するときは、パフォーマンスとデザインが確実に最適化されるように、いくつかの重要な要素を考慮する必要があります。これらの要素には、画像サイズ、ファイル タイプ、寸法などが含まれます。詳細な内訳は次のとおりです。

画像の寸法

画像のサイズは、Web サイトのさまざまな部分での画像の表示方法に直接影響します。大きすぎる画像を使用すると読み込み時間が遅くなり、ユーザー エクスペリエンスと SEO に悪影響を及ぼします。画像が小さすぎると、ピクセル化したりぼやけて見える可能性があり、サイト全体の視覚的な品質が低下します。

多くの場合、WordPress テーマによって、ヘッダー、ブログ投稿、ギャラリーなどのさまざまなセクションの理想的な画像サイズが決まります。推奨されるサイズについては、テーマのドキュメントを確認してください。

ファイルサイズ

ファイル サイズが大きいと読み込み時間が遅くなり、ユーザー エクスペリエンス (特にモバイル デバイス上) と検索エンジンのランキングの両方に悪影響を及ぼします。サイトが遅いと直帰率が高くなります。つまり、訪問者が完全に読み込まれる前にサイトを離れる可能性が高くなります。

理想的には、画像ファイルのサイズを 500KB 未満に抑えます。ただし、画像が目立つように表示される場合は、品質を向上させるために最大 1MB まで許容することがあります。画像圧縮ツールを使用して、視覚的な品質を維持しながらファイル サイズを削減します。手動圧縮の場合は、TinyPNG や JPEG-Optimizer などのツールがうまく機能します。圧縮後、Google PageSpeed Insights や GTmetrix などのツールを使用してページの読み込み時間をテストします。ロード時間が遅い場合は、画像サイズをさらに小さくします。

ファイル形式

ファイル形式が異なれば目的も異なるため、適切な形式を選択すると、品質とパフォーマンスのバランスをとることができます。間違った形式を使用すると、特に透明度やシャープなエッジが含まれる場合、ファイル サイズが不必要に大きくなったり、画質が低下したりする可能性があります。

JPEG (JPG) は、色やグラデーションが多い写真や画像に最適です。非可逆圧縮をサポートしています。つまり、一部の詳細を削除してファイル サイズを削減しますが、複雑な画像のファイル サイズを削減するのに最適です。一方、PNG は、ロゴ、アイコン、または透明度のある画像に最適です。 PNG は可逆圧縮を提供し、ファイル サイズは大きくなりますが、画質は維持されます。

アスペクト比

一貫したアスペクト比により、さまざまなデバイスや画面サイズでも画像が正しく表示されます。一貫性のないアスペクト比を使用すると、画像が切り取られたり、歪んだり、位置が適切に整わなかったりする可能性があり、サイトの視覚的な一貫性に影響を与える可能性があります。

固定レイアウトの画像 (スライダーやバナーなど) の場合は、常にテーマまたはプラグインのドキュメントで推奨されているアスペクト比に従ってください (例: バナーの 16:9 比率)。ギャラリーまたはグリッドの場合は、単一のアスペクト比 (正方形のサムネイルの場合は 4:3 または 1:1 など) を選択し、均一にするためにすべての画像をその比率に合わせてトリミングします。レスポンシブ画像設定を使用する場合は、さまざまなデバイスと画面サイズでサイトをテストし、さまざまなビューポートでアスペクト比が適切に機能することを確認します。

WordPress の画像サイズのベストプラクティス

ウェブサイトの速度はユーザー エクスペリエンスと SEO にとって非常に重要であり、サイズが大きすぎる画像は WordPress サイトの速度を大幅に低下させる可能性があります。品質を犠牲にすることなく高速な読み込み時間を維持するには、画像サイズを最適化することが重要です。ここでは、画像サイズを効果的に削減し、サイトのパフォーマンスを向上させるためのクイックガイドを紹介します。

画像のサイズを適切なサイズに変更する

サイトの表示ニーズに合わせたサイズの画像をアップロードします。ストレージと帯域幅を消費するため、WordPress によって自動的にサイズが変更される大きな画像をアップロードしないでください。画像をアップロードする前に、テーマのレイアウトに基づいて必要な最大サイズを決定します。たとえば、コンテンツ領域の幅が 800 ピクセルの場合、それより広い画像は正しく表示されず、ページの速度が遅くなります。

WordPress で画像のサイズを変更する

すでに特大の画像をアップロードしている場合は、WordPress で直接サイズを変更できます。 WordPress ダッシュボードで[メディア] > [ライブラリ]に移動します。

既存の画像をクリックするか、新しい画像ファイルをアップロードします。この例では、新しい画像ファイルをアップロードすることを選択しました。

追加された画像をクリックすると、その詳細がすべて表示されます。右下隅にある「詳細を編集」をクリックして、追加された設定にアクセスします。

画像の詳細で、[画像の編集] ボタンをクリックします。

[画像の拡大縮小] で、新しい寸法 (幅または高さのいずれか) を入力すると、WordPress が画像を比例して拡大縮小します。 「スケール」をクリックして変更を適用します。

注:画像を元のバージョンより大きく拡大することはできません。その場合には、WordPress が通知します。

画像圧縮ツールを使用する

前述したように、画像を圧縮するとファイル サイズが小さくなります。 Adobe Photoshop や Microsoft Photos などの編集ソフトウェアを含む、さまざまな画像圧縮ツールが利用可能です。

あるいは、TinyPNG などのオンライン ツールを使用してこれを実現することもできます。

このツールは、WEBP、JPEG、および PNG ファイルのサイズを最小限に抑えるために非可逆圧縮を優先します。画像をアップロードするだけで、TinyPNG が圧縮を処理します。

あるいは、Imagify などの堅牢な画像最適化プラグインを利用することもできます。インストールして有効化する前に、WordPress ダッシュボードの「プラグイン」セクションから新しいプラグインを追加してください。

WordPress サイトに Imagify をインストールしてアクティブ化した後、 [設定] > [Imagify]に移動して圧縮設定を構成します。

設定が完了したら、「変更を保存」をクリックします。 Imagify は、サイトにアップロードした画像を自動的に圧縮します。

最大アップロード制限の変更

WordPress はファイルアップロードの最大サイズを設定しますが、これはホスティングプロバイダーが課す制限によって異なる場合があります。 WordPress ダッシュボードで[メディア] > [新規追加]に移動し、現在のファイルのアップロード制限を確認します。アップロードサイズの制限はこのページに表示されます。

通常、より大きなファイルをアップロードする予定がない限り、この制限を調整する必要はありません。ただし、特に複数の作成者がいるブログを管理している場合は、他の人が不必要に大きな画像をアップロードするのを防ぐために、ファイル サイズの制限を下げると便利です。ホスティングプロバイダーに問い合わせて、最大アップロードサイズを変更したり、php.ini ファイルを編集して制限を更新したりすることができます。

遅延読み込みを使用する

遅延読み込みは、実際に必要になるまで Web ページ上の画像の読み込みを遅らせるパフォーマンス向上手法です。遅延読み込みでは、ページにアクセスしたときにすべての画像を強制的に直ちに読み込むのではなく、ユーザーが下にスクロールして画像が表示されたときにのみ画像を読み込みます。これにより、ページの初期読み込み時間が短縮され、帯域幅が節約され、ユーザー エクスペリエンスが向上します。

現在、ほとんどの WordPress テーマとプラグインには、遅延読み込みのサポートが組み込まれています。 WordPress 自体には、バージョン 5.5 の時点でネイティブの遅延読み込み機能も含まれています。さらに、WP Rocket、WP Rocket の Lazy Load、a3 Lazy Load などのさまざまなプラグインは、遅延読み込みプロセスのより高度な制御とカスタマイズを提供するため、技術的な専門知識がなくても、WordPress サイトに簡単に実装できます。

これらすべての実践は、WordPress でプロフェッショナルな画像サイズを維持するための基本です。しかし、当社の多作な WordPress テーマおよびビルダーである Divi は、そのレスポンシブな属性を通じてそれらをさらに高めます。

Divi で完璧な画像サイズを作成する方法

画像のデザインやサイズ変更のオプションをより細かく制御したい場合は、Divi などのページビルダーを使用できます。 Divi には高度な応答機能が搭載されています。このツールは、画像のサイズ変更など、いくつかの機能を WordPress サイトに統合します。ここでは、Divi が品質を維持しながら画像のサイズを向上させる方法について詳しく説明します。

1. Diviをダウンロードしてインストールします

Divi は Elegant Themes を通じて購入でき、年間ライセンス89 ドルまたは永久ライセンス249 ドルの 2 つの価格オプションが提供されます。購入後、次の手順に従ってテーマを WordPress サイトに簡単にダウンロードしてインストールできます。

1. WordPress ダッシュボードで、 [外観] > [テーマ]に移動します。
2. 「新規追加」をクリックし、「テーマのアップロード」を選択します。
3. ダウンロードした Divi .zip ファイルを選択し、「今すぐインストール」をクリックします。
4. インストールが完了したら、「アクティブ化」をクリックして Divi をアクティブなテーマにします。

詳細なガイドについては、以下のビデオをご覧ください。

セットアップが完了したら、サイトの構築を開始できます。事前にプロセスに慣れておくために、Divi Builder の使用に関するチュートリアルをご覧ください。

ディビを始めましょう

2. ウェブサイトを作成し、Divi Builder を開いて画像を選択します

Divi テーマを WordPress にインストールしたら、すぐにウェブサイトを作成できます。 Divi は、Web サイトを構築するための複数のオプションを提供します。 Web サイトを最初から構築することも、既製のレイアウトを利用することも、Divi AI を使用して Web サイトを構築することもできます。

さらに、Divi Quick Sites を使用すると、1 ～ 2 分でプロフェッショナルな Web サイトを構築できます。

ウェブサイトを作成し、それぞれの画像を追加した後、Divi Builder にアクセスして WordPress の画像サイズを設定できます。まず、確立した Divi Web サイトにアクセスし、「Enable Visual Builder」をクリックします。

サイズを変更するには、追加した画像をクリックします。ホイールアイコンをクリックして、Divi 画像モジュールを開きます。

3. Divi レスポンシブ設定を使用して WordPress に追加した画像のサイズを変更する

Divi のレスポンシブ設定により、さまざまなデバイス (デスクトップ、タブレット、モバイル) に合わせて WordPress 上の画像のサイズを簡単に変更できます。画像モジュール設定で、「デザイン」タブに移動します。ここで、レスポンシブ設定を含むほとんどのカスタマイズが行われます。 「デザイン」タブ内で下にスクロールして「サイズ設定」セクションを見つけます。

ここでは、選択した画像の次のような複数の寸法を調整できます。

1. 幅
2. 最大幅
3. モジュールの調整
4. 最小高さ
5. 身長
6. 最大高さ

注:提供されたオプションを有効にして全幅を強制することもできます。ただし、その場合、幅と最大幅は変更できなくなります。

各属性の横に、スマートフォンまたはタブレットに似た小さなアイコン (レスポンシブ設定アイコン) が表示されます。このアイコンをクリックして、デスクトップ、タブレット、モバイルのさまざまなビュー設定を有効にします。

この場合、タブレット版の最大幅を 85% に設定します。幅を縮小し中央に配置することでホームページ上のスペースが節約され、小型デバイスでも画像がより視覚的に魅力的になります。緑色のチェック ボタンをクリックして、保存した変更を適用します。

SRCSet の機能

Divi はすべての画像に対してネイティブ SRCSET サポートを提供し、テーマが画像を自動的に応答性のあるものにすることができます。これにより、適切なサイズの画像が各デバイスに確実に配信され、より小さな画像をより小さなデバイスに提供することで読み込み速度が向上します。何よりも、追加の努力を必要とせずに、自動的に実行されます。

ディビを入手

画像最適化のためのその他のツール

Divi のレスポンシブ設定は、WordPress で画像のサイズを変更するための優れたソリューションを提供しますが、現在 Divi にはない追加の最適化ツールが必要になる場合があります。以下に、使用できる外部画像最適化ツールをいくつか示します。

1. EWWW Image Optimizer:アップロード時に新しい画像を自動的に圧縮し、既存のメディアに一括オプティマイザーを提供する強力な WordPress プラグイン。画像のサイズ変更とメタデータの削除が可能で、遅延読み込みと WebP 形式への変換をサポートして圧縮率を向上させます。無料バージョンはファイル サイズの制限なしでサーバー上で直接動作しますが、プレミアム バージョンはクラウド サービスを活用して最適化を強化し、圧縮率を高めます。
2. ShortPixel Image Optimizer:このプラグインは、画像のサイズを自動的に変更しながら、画像と PDF ファイルを最適化します。可逆、可逆、光沢などの柔軟な圧縮オプションを提供し、ユーザーにバランスの取れた選択肢を提供します。このプラグインは、元の画像をバックアップし、メタデータを削除し、PNG を JPEG に変換して、Retina 画像とサムネイルを最適化します。ただし、API キーを取得するには電子メールを共有する必要があります。
3. Optimole:クラウドベースのサーバーを通じてリアルタイムで画像を処理する、無料のオールインワン画像最適化プラグインです。訪問者のビューポートに基づいて最適な画像サイズを選択し、効率的に表示するために遅延読み込みを実装することが特徴です。プレミアム プランにアップグレードすると、無制限の画像変換と、ファイル サイズを削減しながら元の鮮明さを維持する高品質圧縮や Retina および WebP バージョンの自動作成などの高度な機能が提供されます。
4. WP Smush:このプラグインは、WPMU DEV プラグイン スイートの一部です。画像が WordPress サイトにアップロードされた後、自動的に最適化されます。 WP Smush には、最大 50 枚の画像を一度に圧縮できる一括最適化オプションがあり、既存のメディアを簡単に強化できます。このプラグインには、画像のサイズ変更と遅延読み込みのオプションも含まれており、アップロード時に画像からメタデータを削除するように構成できます。最大 5 MB の画像をサポートしますが、より大きなファイルを最適化するにはプレミアム バージョンにアップグレードする必要があります。

どのようなアプローチをとっても、Web サイトのパフォーマンスを向上させることができます。画像の最適化は、読み込み時間の短縮とユーザー エクスペリエンスの向上に貢献します。

結論

2024 年、WordPress で成功するサイトを作成するには、基本的な機能を超える必要があります。顧客にシームレスで魅力的なエクスペリエンスを提供することが不可欠です。画像サイズの最適化は、読み込み時間を短縮し、ブランドのアイデンティティを反映した視覚的に魅力的なレイアウトを確保するのに役立つため、これを達成するために非常に重要です。スマート プラグインとカスタマイズ オプションを利用することで、サイトのパフォーマンスを向上させ、訪問者を魅了する魅力的な店頭に変えることができます。

ビジュアルビルダーを使用して画像のサイズを変更するためのカスタマイズオプションをさらに探している場合、Divi を使用すると、すべてのデバイスで画像が完璧に見えるように、その場で調整を簡単に行うことができます。

ディビを入手

WordPress ウェブサイトを強化したいと考えていますか? Web サイトのパフォーマンスと視覚的な魅力を高めるための理想的な画像サイズを見つけてください。ユーザーエクスペリエンスを向上させるために画像サイズを効果的に管理するのに役立つツールとヒントの厳選されたリストをご覧ください。