BigCommerce向け画像圧縮方法:ストアを高速化
Picovert チーム著2026-02-235分で読了
BigCommerceストアの成否は画像パフォーマンスで決まります。商品画像はページの重さに 最も大きく貢献し、大きな画像はストアのCore Web Vitalsを低下させ、SEOランキングを 損ない、モバイルショッパーが商品を見る前に離脱させます。BigCommerce画像を圧縮・ 最適化することは、ストアで行える最高のROI改善の一つです。
BigCommerce画像サイズの推奨事項
- 商品画像: 1280×1280 pxが商品画像の推奨サイズです。BigCommerceは メイン画像からサムネイルを自動生成するため、高解像度バージョンのみアップロードする 必要があります
- バナー画像: 全幅バナーは1920×600 pxから1920×800 pxにする必要があります。 レティナディスプレイは2×解像度を使用しますが、ファイルサイズが倍になります — それに応じて圧縮してください
- カテゴリヘッダー画像: 1280×400 pxから1280×600 pxがカテゴリヘッダーに一般的です
- ロゴ: デバイスサイズ全体で最高の外観を得るために透明度のある 300〜400 px幅のPNG
BigCommerce画像ファイルサイズ制限
- 商品画像: 画像あたり最大8 MB(プラットフォームはこの制限まで受け入れますが、 速いローディングのために500 KB未満を目標にする必要があります)
- バナーと背景画像: ハード制限はありませんが、速いロード時間のために 全幅バナー画像は300 KB未満を目標にしてください
- 推奨ファイルサイズ: 商品画像100〜400 KB;バナー画像150〜300 KB; サムネイル20〜60 KB
BigCommerceに最適な画像形式
- WebP: BigCommerce商品画像の最良の選択。WebPは同じ品質でJPGより 25〜35%小さいです。BigCommerceテーマはWebPをネイティブでサポートします
- JPEG/JPG: すべてのブラウザで信頼できる代替。商品写真には品質80〜85%のJPGを使用してください
- PNG: グラフィック、ロゴ、透明度が必要な画像に最適。ロゴには透明度のある PNG-24を;フラットカラーグラフィックにはPNG-8を使用してください
- AVIF: WebPよりもさらに小さいですがサポートが少ない。ターゲット層が 現代的なブラウザのみを使用する場合にセカンダリーオプションとして使用してください
BigCommerce向け画像圧縮方法
- 画像リサイズを使用して商品画像を1280×1280 pxに準備します
- 画像圧縮を開き商品画像をアップロードします (バッチアップロードをサポート)
- JPG画像には品質80〜85%に設定するか、最大圧縮のためWebP出力を使用します
- 圧縮された画像をダウンロードし、商品画像マネージャーまたは一括インポートを通じて BigCommerceにアップロードします
SEOのためのBigCommerce画像最適化
BigCommerceは商品画像のalt テキストを設定でき、SEOに不可欠です。alt テキスト以外にも、 画像最適化は複数の方法でSEOに影響します:
- ページ速度: GoogleのCore Web VitalsにはLCP(Largest Contentful Paint)が 含まれており、これはEコマースページではほぼ常に商品画像です。圧縮された画像は LCPスコアを直接改善します
- モバイルファーストインデックス: Googleはインデックス作成に主にページの モバイルバージョンを使用します。大きな画像を持つモバイルページはランキングが低くなります。 モバイル最適化インデックスのために商品画像あたり300 KB未満を目標にしてください
- 画像サイトマップ: BigCommerceは画像サイトマップを自動生成します。 説明的なalt テキストを持つ圧縮された適切な名前の画像はGoogle画像検索に表示されます
既存のBigCommerce画像の処理
既存のストアにすでに大きな最適化されていない画像がある場合、圧縮されたバージョンを 再アップロードする必要があります。BigCommerceはアップロード時に自動的に画像を 圧縮しません。一括最適化するには:
- 商品カタログをエクスポートしてすべての商品画像URLを特定します
- BigCommerce CDN URLから各画像をダウンロードします
- 画像圧縮で一括圧縮します — 複数の画像を一度にアップロードしてZIPとしてダウンロードします
- 各商品リスティングに圧縮された画像を再アップロードします
BigCommerceテーマ画像設定
BigCommerceのStencilテーマにはテーマ設定に組み込みの画像最適化設定が含まれています。 確認すべき主要設定:
- 商品画像サイズ: テーマ設定またはPage Builderで設定されます。 不必要なサーバーサイドのリサイズを避けるためにアップロードされた画像解像度を 設定されたサイズに合わせてください
- 遅延ロード: 初期ページロード速度を改善するためにテーマが フォールド以下の画像にネイティブ遅延ロード(loading="lazy")を 使用していることを確認してください
BigCommerceにアップロードする前に画像圧縮ですべての画像を 圧縮してください — 無料、プライベート、ブラウザで実行されます。最適化された画像は より速くロードされ、より高い順位を獲得し、より多くのショッパーを購入者に転換します。