製品画像設定

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

製品画像のサイズ変更

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

NOTE
最適な互換性を得るには、sRGB カラープロファイルを持つすべての製品画像をアップロードすることをお勧めします。 他のすべてのカラープロファイルは、製品画像のアップロード中に自動的にsRGB カラープロファイルに変換されます。これにより、アップロードされた画像で色の一貫性が失われる可能性があります。

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

例えば、100%の3000 x 2100 ピクセルのJPGは、5 mb以上の画像ファイルにすることができます。 この画像のサイズを変更すると、幅が1920 ピクセルに縮小され、縦横比が維持され、画質が80%に縮小され、ファイルサイズが大幅に小さくなり、高品質になります。

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

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

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

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

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

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

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

  4. 有効にするには、Enable Frontend Resize​がYesに設定されていることを確認してください。

  5. Quality​の設定を1から100%の間で入力してください。

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

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

    画像のサイズを変更しても、この幅を超えず、縦横比が保持されます。

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

    画像のサイズを変更しても、この高さを超えず、縦横比が保持されます。

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

フィールドの説明

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

画像プレースホルダー

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

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

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

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

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

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

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

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

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

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

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

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

recommendation-more-help
commerce-admin-help-catalog