すべてのデバイス向けにヒーローバナー画像を最適化する

ヒーローバナーはどのように機能しますか?

GemPages は、さまざまなデバイスでのページの読み込み速度を向上させるために、Hero Banner イメージのサイズを自動的に変更します。

• タブレットビュー: 画像は最大幅 1024 ピクセルにサイズ変更されます。
• モバイルビュー： 画像は最大幅 768 ピクセルにサイズ変更されます。

同じ画像をデスクトップとモバイルの両方のディスプレイで使用する場合、このサイズ変更により画質が低下する可能性があります。ヒーローバナーを最適な状態で表示するには、次の2つの方法があります。

• 同じ画像比率 すべてのデバイス用。
• 　 別々の画像 デバイスごとに。

すべてのデバイス向けにヒーローバナー画像を最適化するにはどうすればよいでしょうか?

オプション 1: すべてのデバイスで単一の画像比率を使用する

デスクトップ、タブレット、モバイルで同じ画像を使用する場合は、 ヒーローエレメント 設定を開いて、次の手順に従います。

ステップ1： 画像をヒーローバナーにアップロードします。 

• ノーザンダイバー社の 設定 左サイドバーのタブをクリックし、下にスクロールして 経歴 のセクションから無料でダウンロードできます。
• クリックして "追加...」ボタンの横にある 画像 画像の背景設定を拡張するオプション。
• ヒット 新しい画像をアップロードする画像が1920ピクセル以上であることを確認してください ワイド。

ステップ2： 各デバイスビューのサイズ/バナー比率を設定します。

• 見つける フレーム オプションの下に サイズ のセクションから無料でダウンロードできます。
• 選択する バナーソースとして をドロップダウンから選択します。

バナーは、画像の元の比率を維持しながら、画面サイズに合わせて自動的にサイズ変更されます。

オプション 2: デバイスごとに個別の画像を使用する

デスクトップおよびタブレットの場合:

ヒーローバナーに画像をアップロードしてください。幅1920ピクセル以上の画像を使用してください。これにより、大画面でも高画質な画像が表示されます。

モバイルの場合：

ステップ1： 最適化するデバイス ビューポートを選択します。

ステップ2： モバイルデバイス向けに最適化された画像をアップロードします。 

画像はバナーの幅と高さの比率と一致し、最小幅は 768 ピクセルである必要があります。

例： バナーの幅が 375 ピクセル、バナーの高さが 500 ピクセルの場合、アップロードされた画像は 375:500 の比率を維持し、幅を 768 ピクセルにする必要があります。

• 最小幅 = 768ピクセル
• 計算された高さ = (768/375)×500=1024px
• この例の場合、最適なサイズは 768×1024 ピクセルになります。