Divi内で画像を使用するための究極のガイド

公開: 2017-04-21

Diviを使用すると、Webサイトに画像を簡単に追加できます。ただし、一部の人にとっての課題は、各インスタンスで使用する正しい画像サイズを知ることです。各Webサイトは異なるため、すべてのWebサイトに標準の「完璧な」サイズはありません。しかし、Webデザイナーとして、あなたは必ずあなたのイメージがあなたのディビサイトに適している作るために行うことができますいくつかのものがあります。そこでこの投稿が登場します！

この記事では、Divi内で画像を使用する際の推測作業を取り除き、Divi Webサイトに最適な画像サイズを毎回見つける（または作成する）方法を説明します。

大きな絵

Divi Webサイトに最適な画像サイズを見つけるには、次の3つの主な要因があります。

アスペクト比：画像の高さと幅。
列のレイアウト：画像の最大幅。
応答性：さまざまな画面サイズで画像のサイズに加えられた変更。

以下のセクションでは、これら3つの要素を理解することで、Divi全体でどのように使用できるかを詳しく説明します。これにより、あらゆるユースケースに最適な画像サイズが得られます。

Divi画像最適化ガイドライン

Diviの画像アスペクト比（16：9、4：3、3：4）を使用する

アスペクト比は、画像または画面の幅と高さの比例寸法を表します。コロンの左側の数字は幅（x軸）を表し、コロンの右側の数字は高さ（y軸）を表します。最も一般的な2つのアスペクト比は、4：3と16：9です。以前にテレビ画面やモニターの設定を調整したことがあれば、これらは見覚えがあるはずです。 4：3のアスペクト比は、古いテレビやモニターの標準的な画面サイズであり、よりボックスのようなディスプレイを備えています。今日の新しい高解像度テレビとモニターのアスペクト比は16：9で、ディスプレイの幅が広くなっています。 3：4のアスペクト比は、Diviでポートレートを表示するのに役立ちます。

Diviは、16：9、4：3、3：4の3つのアスペクト比を念頭に置いて構築されました。この投稿では、これらのアスペクト比に基づいて、推奨されるすべての画像のサイズを決定します。まだ行っていない場合は、Diviの画像テンプレートをチェックして、画像に推奨される標準サイズとアスペクト比を確認できます。

注：適切な画像の寸法を見つけるのに役立つ便利なアスペクト比計算機があります。

アップロードする前に画像を最適化する

WordPressにアップロードする前に、画像を最適化（サイズ変更、圧縮、トリミングなど）することをお勧めします。また、すべての画像ファイルサイズを60kbから200kbの間に保つように最善を尽くしてください。そうすれば、ページの読み込み時間を大幅に遅くすることはありません。画像を最適化する方法の完全なガイドについては、こちらをご覧ください。

SEOを忘れないでください

画像の読み取りに関しては、検索エンジンは画像のファイル名、「alt」テキスト、キャプション、ファイルタイプ、ファイルサイズなどに依存します。この情報は、画像を表示するimgタグに配置されます。メディアギャラリーに新しい画像をアップロードするときは、必ずこの情報を画像に追加してください。

さらに、Divi Builderを使用すると、特定のモジュール内から「alt」テキストとタイトルテキストを追加できます。特定のDiviモジュールを使用するときは、これらに注意してください。

私が調査したところ、背景画像はimgタグでラップされていないため、Googleは自動的に読み取りません。背景画像はCSSを使用して表示され、主に設計目的でのみ使用されます。

ファイル形式

一般に、Web上のほとんどの画像は、GIF形式のJPEG、PNGのいずれかです。 JPEGは、互換性、色の使用、ファイルサイズが小さいため、ほとんどの状況に適しています。

JPEGは、注目の画像や背景画像など、すべてのフルカラー写真に使用する必要があります。

PNGは、Webと非常に互換性のある形式でもあります。 PNGは、詳細が多い小さな画像に最適です。 PNG形式は、ロゴやグラフィック要素に最適な透明な背景機能もサポートしています。

GIFは、色が限られている小さな画像に適しています。 GIFはアニメーション化できるのでユニークで、便利な場合があります。

Diviの列レイアウトに基づく画像寸法ガイドライン

以下の画像サイズのガイドラインは、Diviのデフォルトのレイアウト設定に基づいています。これには、1080pxのコンテンツ幅と3のガター幅が含まれます。これらの設定を変更すると、画像のサイズをわずかに調整する必要がある場合があります。

一般的な経験則では、画像は少なくとも画像が配置されている列と同じ幅にする必要があります。各列のレイアウトに応じて、画像に必要なサイズは次のとおりです。

これは、画像に必要な高さには対応していません。したがって、4：3および16：9のアスペクト比に従った寸法のリストを次に示します。これは、モバイル向けに適切に拡大縮小される幅と高さで画像を維持するのに役立ちます。

次の画像のサイズは、16：9のアスペクト比の標準に準拠しています

1列：1080 x 608
3/4列：795 x 447
⅔列：700 x 394
1/2列：510 x 287
⅓列：320 x 181
1/4列：225 x 128

次の画像のサイズは、4：3のアスペクト比の標準に準拠しています

1列：1080 x 810
3/4列：795 x 597
⅔列：700 x 526
1/2列：510 x 384
⅓列：320 x 241
1/4列：225 x 170

さまざまなDiviモジュールの画像寸法

画像モジュール

画像モジュールを使用する場合は、16：9および4：3のレイアウトに従って、各列レイアウトに必要な画像サイズを選択できます。

たとえば、アスペクト比が4：3の4列のレイアウトを使用している場合、各列に225x170pxの画像を挿入します。

各列に特定のサイズを使用することの利点は、画像ファイルのサイズを無駄にすることなく、必要な正確な画像サイズが得られることです。これにより、ページの読み込み時間が遅くなる可能性があります。

欠点は、タブレットのような小さな画面では列幅を埋められないことです。画面サイズが1080pxのブレークポイントを下回ると、4列のレイアウトが2列のレイアウトに変わります。この2列のレイアウトには、幅370pxの画像サイズの余地があります。したがって、タブレットディスプレイの列幅全体に画像を表示する場合は、225ピクセル幅ではなく370ピクセル幅の画像サイズから始めることをお勧めします。

2列のタブレットディスプレイで225x170pxの画像を含む4列のレイアウトは次のようになります。

見た目はかなり良いですが、幅が370ピクセルの画像から始めた場合は、次のように2列のタブレットディスプレイの列幅を満たす画像が表示されます。

したがって、すべてのデバイスで画像を列の最大幅に合わせたい場合は、画像モジュールを使用するときに、列のレイアウトごとに次のサイズをお勧めします。

4：3のアスペクト比の場合：

1列：1080 x 810
⅔列：770 x 578
3/4列：770 x 578
1/2列：770 x 578
⅓列：770 x 578
1/4列：370 x 278

16：9のアスペクト比の場合：

1列：1080 x 608
⅔列：770 x 433
3/4列：770 x 433
1/2列：770 x 433
⅓列：770 x 433
1/4列：370 x 208

スライダーとポストスライダーの背景画像

スライダーの背景画像は、少なくともそれが置かれている列の幅である必要があります。したがって、画像サイズの決定は非常に簡単です。各列幅の画像サイズのガイドラインを使用してください。

スライダーの背景画像の高さはスライダーの内容によって決まるため、背景画像の高さを調整する必要がある場合があります。

次の画像のサイズは、16：9のアスペクト比の標準に準拠しています。

1列：1080 x 608
3/4列：795 x 447
⅔列：700 x 394
1/2列：510 x 287
⅓列：320 x 181
1/4列：225 x 128

次の画像のサイズは、4：3のアスペクト比の標準に従います。

1列：1080 x 810
3/4列：795 x 597
⅔列：700 x 526
1/2列：510 x 384
⅓列：320 x 241
1/4列：225 x 170

また、スライダーをモバイルデバイスの列の幅にまたがらせる場合は、次のガイドラインを使用してください。

4：3のアスペクト比の場合：

1列：1080 x 810
⅔列：770 x 578
3/4列：770 x 578
1/2列：770 x 578
⅓列：770 x 578
1/4列：370 x 278

16：9のアスペクト比の場合：

1列：1080 x 608
⅔列：770 x 433
3/4列：770 x 433
1/2列：770 x 433
⅓列：770 x 433
1/4列：370 x 208

全幅スライダーの背景画像

推奨最小幅：1920px

全幅スライダーの背景画像の幅は、常にブラウザーの幅によって決まります。標準の画面サイズに基づいて、画像の幅は1280px以上にすることをお勧めします。しかし、より大きなモニターの場合、より安全な方法は、幅1920pxの画像を使用することです。

繰り返しになりますが、スライダーを使用すると、高さは常にコンテンツの量によって決定されるため、ニーズに合わせて高さを調整する必要がある場合があります。

スライダーとポストスライダーの注目の画像

スライドの注目画像は、2/3列、3/4列、または1列幅のスライダーにのみ表示されます。デスクトップおよびモバイルデバイスに合わせて調整するために、スライド画像は少なくともこの幅にすることをお勧めします。

1列：450
3/4列：330
⅔列：320

注：ブラウザの幅が768ピクセル未満の場合、画像は非表示になり、投稿の抜粋のみが表示されます。

ライトボックスディスプレイの画像

画像でライトボックス機能を使用している場合は、より大きな画像を使用することをお勧めします。通常、1500 x 844は、大型モニターのライトボックスディスプレイでの良好なフルスクリーン画像に適しています。

オーディオモジュールカバーアート画像

幅：少なくとも780px

画像は最初は小さい（230 x 130）ですが、画面サイズが780px未満の場合はコンテンツセクションの幅全体に広がります。

全幅レイアウトのブログモジュール注目の画像

画像の幅：列の幅のサイズと同じ

ブログモジュールを使用して表示する投稿に注目の画像を追加するのは非常に簡単です。注目の画像は、それが置かれている列と同じ幅である必要があります。たとえば、右側のサイドバーがある3分の2の列でブログモジュールを使用している場合、少なくとも700pxの幅の注目画像を使用する必要があります。 Diviの3分の2の列の幅。

注目の画像は、単一の投稿テンプレート（投稿の抜粋をクリックした後に投稿全体を表示するページ）でも使用されることを忘れないでください。したがって、単一ページのテンプレートでも3分の2の列を使用して、注目の画像を表示していることを確認してください。

1列：1080
3/4列：795
⅔列：700
1/2列：510
⅓列：320
1/4列：225

グリッドレイアウトのブログモジュール注目の画像

幅：単一の投稿の列の幅のサイズと同じ（デフォルトは795px）

また、ブログモジュールの全幅レイアウトと同様に、注目の画像は1つの投稿を表示するために大きくする必要があります。ブロググリッドレイアウトの優れている点は、Diviがメディアギャラリーにアップロードされた注目の画像の小さいバージョン（幅400px）を使用していることです。この小さい画像は自動的に作成および表示されるため、グリッド列に対して大きすぎる画像ファイルサイズをページに読み込むことを心配する必要はありません。

ポルフォリオモジュールの注目画像（全幅およびグリッドレイアウト、標準およびフィルター可能）

幅：単一の投稿の列の幅と同じ（デフォルト：795px）

クリックしてグリッドレイアウトからポートフォリオアイテムを表示すると、注目の画像がコンテンツセクションの幅に広がります。ブログモジュールと同じように、

ブログモジュールの場合と同様に、Diviは、ポートフォリオモジュールのグリッドレイアウトに使用するポートフォリオ注目画像の小さいバージョン（幅400ピクセル）を作成します。これは、ファイルサイズを縮小し、ページの読み込み時間を短縮するのに役立ちます。したがって、新しいポートフォリオアイテムを作成するときは、注目の画像が少なくとも単一のポートフォリオ投稿テンプレートの列と同じ幅であることが重要です。

宣伝文のモジュール画像

最大幅：550px

宣伝文句の画像は、通常の1080pxではなく550pxの最大幅を持つ1列を除いて、画像の幅を列の幅と一致させるという同じルールに従います。したがって、安全な方法は、最大幅が550pxの画像を挿入することです。各列レイアウトの宣伝文モジュールの画像幅は次のとおりです。

1列：550px
1/2列：510px
⅓列：320px
1/4列：225px

ギャラリーモジュールの画像（スライダーとグリッドのレイアウト）

推奨寸法：1500 x 844

ギャラリーモジュールの画像はライトボックスディスプレイで開くため、ライトボックスで画像を表示するときにブラウザウィンドウを埋めるのに十分な大きさの画像を使用することをお勧めします（大型モニターの場合は幅約1500ピクセル）。

グリッドレイアウトの場合、Diviはギャラリーの小さいバージョン（幅400px）を作成します。そのため、ライトボックス用に予約されている大きな画像ファイルサイズはギャラリーグリッドに表示されません。これは、ファイルサイズを縮小し、ページの読み込み時間を短縮するのに役立ちます。

スライダー表示の場合、スライドを通過すると画像の高さが変化するため、すべての画像を同じ幅と高さに保つことが重要です。

人物モジュール画像

推奨寸法

幅：600px

人物モジュールでは、ポートレートに最適なアスペクト比3：4を紹介します。各アスペクト比の推奨人物モジュール画像サイズは次のとおりです。

3：4 – 600 x 800（ポートレートに推奨）
16：9 – 600 x 338
4：3 – 600 x 400

レスポンシブ機能

1列レイアウトの人物モジュール画像がコンテンツの左側に320pxで表示されます。

画面サイズが767px未満の場合、画像はコンテンツ領域の幅にまたがり、最大幅は600pxになります。

次のgifは、さまざまな画面サイズで600 x 800の画像（3：4のアスペクト比を使用）を使用した人物モジュールを示しています。

投稿タイトルモジュール注目の画像

幅：列の幅と同じ

投稿タイトルモジュールには、現在の投稿のタイトルと、オプションで投稿の注目画像が表示されます。注目の画像の配置は、タイトルの上、タイトルの下、またはタイトルの背景として選択できます。選択内容に関係なく、画像はコンテンツセクションの幅にまたがります。したがって、投稿タイトルモジュールに1列のレイアウトを使用している場合は、1080pxの幅が注目の画像に最適です。

ショップモジュールの製品画像

推奨事項

推奨幅：330px
推奨列数：3列以上

ショップモジュールを使用すると、1列のレイアウトから6列のレイアウトまで製品を表示できます。各列レイアウトに表示されたときの商品画像の幅は次のとおりです。

6列：150px
5列：183px
4列：240px
3列：332px
2列：520px
1列：1080px

機能性

ショップモジュールは実際には1/3列以下で商品を表示するように構築されているため、Diviは商品画像の小さいバージョン（最大幅400px）を生成します。つまり、2列と1列のレイアウトでは、商品画像のぼやけたバージョンが表示される場合があります。

また、ショップモジュールで商品をクリックすると、単一の商品ページに商品の画像が300ピクセルで表示されます。

3列のレイアウトと単一の商品ページに対応するために、少なくとも330px幅の商品画像サイズを使用することをお勧めします。

お客様の声のポートレート画像

モジュール設定に基づく画像サイズ

デフォルトでは、Diviはポートレート画像を90 x 90サイズと90ボーダー幅に変換し、円として表示します。したがって、デフォルト設定を維持している場合は、画像のサイズを正確に90 x 90にすることをお勧めします。アスペクト比が1：1でなくても非常に大きな画像を使用することはできますが、無駄なファイルサイズが多くなり、速度が低下します。ページの読み込み時間を短縮します。

お客様の声モジュールの詳細設定内から、ポートレート画像の寸法と境界半径をカスタマイズできます。

これらの設定を変更するときは、円で囲まれた画像の見栄えを良くしたい場合は、幅と高さを同じにし、境界線の半径を100に保つようにしてください。

背景画像の一般的なガイドライン

モジュールに背景画像を使用する場合、背景画像は常に、少なくともモジュールが配置されている列と同じ幅である必要があります。 Diviの列幅のガイドラインに従うだけです。

1列：1080
3/4列：795
⅔列：700
1/2列：510
⅓列：320
1/4列：225

列の幅に一致する背景画像が必要なモジュールは次のとおりです。

ポートフォリオモジュール
フィルター可能なポートフォリオモジュール
召喚状モジュール
ポストスライダーモジュール
タイトル投稿モジュール
スライダーモジュール
テキストモジュール

全幅の背景画像の一般的なガイドライン

全幅セクションの背景画像を使用している場合、これらの画像はブラウザの全幅に拡大されます。つまり、これらの画像は、少なくとも1920px前後の最も大きなモニターディスプレイと同じ幅にする必要があります。

次のモジュールには、1920px幅の背景画像が必要です。

全幅ヘッダー
全幅ポートフォリオ
全幅スライダー
全幅の投稿タイトル
全幅ポストスライダー
全幅画像

また、これらすべてのモジュールで、背景画像の高さはモジュール内のコンテンツの量によって決定されるため、必要に応じて画像の高さを調整する必要がある場合があることに注意してください。

全幅ヘッダーモジュール

フルスクリーンの背景画像

全幅の背景画像と混同しないように、全画面の背景画像とは、ヘッダーがブラウザウィンドウの全サイズ（幅と高さの両方）にまたがることを可能にする全幅ヘッダーモジュールの設定を指します。

ほとんどのモニターは4：3と16：9のアスペクト比に従い、幅は1280pxまたは1920pxしかないため、フルスクリーンの背景画像には次のサイズをお勧めします。

4：3 – 1280 x 960（ポートレートに推奨）
16：9 – 1920 x 1080

全幅ヘッダーモジュールのロゴ画像

全幅ヘッダーモジュールを使用すると、ヘッダーコンテンツ領域内にロゴを配置できます。

ロゴの標準的な画像サイズはありません。一般的なガイドラインとして、大きなデスクトップではっきりと見えるようにロゴを大きくし、スマートフォンなどの小さなデバイスに収まるように小さくすることをお勧めします。

Diviのテーマロゴは93x 43で、良いアイデアが得られます。

全幅ヘッダー画像

推奨寸法：510 x 288

ロゴに加えて、全幅ヘッダーモジュールを使用すると、ヘッダー画像をヘッダーコンテンツ領域に表示できます。デフォルトでは、ヘッダー画像は2列レイアウトの右側の列に表示されます。画像は1/2列に配置されるため、ほとんどの状況で510 x288の画像が最適です。

モジュールの一般設定で[テキストとロゴの向き]オプションを変更すると、ヘッダー画像を左側の列に表示したり、必要に応じて中央に表示したりできます。

画像でヘッダーの下部をハグしたい場合は、垂直方向の配置を下部に調整することもできます。

最終的な考え

前に述べたように、すべてのWebサイトと画面サイズに完全な標準画像サイズはありません。ただし、Diviの列のレイアウトと、各モジュールが特定の画像をどのように表示するかを理解することで、Diviサイトに最適な寸法を作成できます。

これがあなたの将来のプロジェクトに役立つリソースになることを願っています。コメントであなたのフィードバックを読むのを楽しみにしています。

乾杯！