製品イメージ設定

Product Details ​ページに表示する大きな画像をアップロードする場合は、最大ピクセルサイズ(幅と高さ)を設定し、アップロード時にファイルのサイズを自動的に変更することを検討してください。 このタイプの製品画像のアップロードをサポートするには、アップロード時に大きな画像ファイルの自動サイズ変更を有効にするオプションがあります。 カタログに追加したいが、表示する画像アセットがまだない製品については、プレースホルダー画像を設定できます。

製品画像のサイズ変更

製品画像をアップロードする際に、様々なサイズの大きい画像を追加して、Product Details ​ページに詳細で高品質なズームを提供できます。 すべての画像のサイズと外観を同じにするために、すべての画像が特定のピクセルサイズと一致するように画像サイズを変更するオプションがあります。 このオプションは、設定を使用してすべての製品画像のサイズを自動的に変更します。これにより、ズームのパフォーマンス、画像の読み込みの高速化、製品画像の外観の統一に役立ちます。

NOTE
最高の互換性を得るには、sRGB のカラープロファイルを使用してすべての製品画像をアップロードすることをお勧めします。 その他のすべてのカラープロファイルは、製品画像のアップロード中に sRGB カラープロファイルに自動的に変換されるので、アップロードされた画像のカラーが一貫しない場合があります。

最大のピクセル幅と高さを設定すると、画像のサイズがピクセル単位の物理的寸法に変更されます。 Commerceは、比率を維持しながら、幅または高さのいずれか高い方の量に応じて画像のサイズを変更します。 JPG画像の画質を下げると、ファイルサイズが小さくなります。

例えば、3000 x 2100 ピクセルのJPGが 100% の場合、5 mb 以上の画像ファイルになることがあります。 この画像のサイズを変更すると、幅が 1920 ピクセルに減少し、比率と画質が 80% に維持され、より小さいファイルサイズで高品質が提供されます。

画像のサイズ変更を有効にする

  1. 管理者 サイドバーで、Stores/Settings/Configuration ​に移動します。

  2. 左側のパネルで「Advanced」を展開し、「System」を選択します。

  3. 展開セレクター 「画像アップロード設定 セクション を展開します。

    デフォルトの設定を変更するには、必要に応じて「Use system value」チェックボックスの選択を解除します。

    画像のアップロード設定 {width="600" modal="regular"}

    これらの設定の詳細なリストについては、設定リファレンス画像のアップロード設定 を参照してください。

  4. 有効にするには、Enable Frontend ResizeYes に設定されていることを確認します。

  5. 1100% の Quality 設定を入力します。

    ファイルサイズを小さくして画質を高くするには、80~90% の設定をお勧めします。

  6. 画像の Maximum Width をピクセル単位で設定します。

    画像のサイズを変更しても、その幅を超えることはなく、縦横比を維持します。

  7. 画像の Maximum Height をピクセル単位で設定します。

    画像のサイズを変更しても、この高さを超えることはなく、縦横比を維持します。

  8. 完了したら、「Save Config」をクリックします。

フィールドの説明

フィールド
範囲
説明
Quality
グローバル
サイズ変更された画像のJPG画質を指定します。 画質が低いとファイルサイズは小さくなります。 高品質でファイルサイズを減らすには、80~90% をお勧めします。 デフォルト:80
Enable Frontend Resize
グローバル
を使用すると、Product Details ​ページにアップロードできる大きい画像やサイズを超過した画像のサイズを、Commerceで変更できます。 Commerceは、ファイルのアップロード時にJavaScriptを使用して画像ファイルのサイズを変更します。 画像のサイズを変更すると、最大幅または最大高さの最大サイズに合わせて、正確な比率が維持されます。 デフォルト:Yes
Maximum Width
グローバル
画像の最大ピクセル幅を決定します。 画像のサイズを変更しても、この幅を超えることはありません。 デフォルト:1920
Maximum Height
グローバル
画像の最大ピクセル高さを決定します。 画像のサイズを変更しても、この高さを超えることはありません。 デフォルト:1200

画像プレースホルダー

Adobe CommerceとMagento Open Sourceでは、永続的な商品画像が使用可能になるまで、一時的な画像をプレースホルダーとして使用します。 役割ごとに異なるプレースホルダーをアップロードできます。 最初のプレースホルダー画像はサンプルロゴで、選択した画像に置き換えることができます。

画像のプレースホルダー

プレースホルダー画像をアップロードするには:

  1. 管理者 サイドバーで、Stores/Settings/Configuration ​に移動します。

  2. 左側のパネルで「Catalog」を展開し、その下の「Catalog」を選択します。

  3. Product Image Placeholders」セクションの 展開アイコン 展開します。

    製品画像のプレースホルダー {width="600" modal="regular"}

    これらの設定の詳細なリストについては、設定リファレンス製品画像プレースホルダー を参照してください。

  4. 各画像の役割に対して「Choose File」をクリックし、コンピューター上で画像を見つけてファイルをアップロードします。

    3 つの役割すべてに同じ画像を使用することも、役割ごとに異なるプレースホルダー画像をアップロードすることもできます。

  5. 完了したら、「Save」をクリックします。

画像の役割と推奨サイズについて詳しくは、 画像のアップロードを参照してください。

recommendation-more-help
af062d56-f22c-4537-813d-bedf8b92a071