Switching
最適化

ネットショップ商品画像の最適化 実践ガイド

プラットフォーム別の画像サイズ規定、切り抜き(PNG)と演出カット(JPG)の使い分け、サイズを揃える理由、速い読み込みとモバイル対応まで、商品画像を整える方法を解説します。

2026年6月24日· 最終更新日 2026年9月3日

商品画像はまずプラットフォームのピクセル規定を確認し、背景を切り抜いた白抜き画像はPNG、モデル・演出カットはJPGで保存するのが基本です。同じカテゴリの商品は同じピクセルサイズと同じ比率に揃えると一覧が整って見えます。モバイルの読み込みを考えると、詳細ページの画像は横1000px前後・1枚300KB以下を目標にすると無難です。

ネットショッピングで顧客が触れられるのは画像だけです。だから商品画像は売上に直結します。ただし画質が良ければいいわけではなく、プラットフォームの規格に合い、速く表示され、モバイルでもくっきり見える必要があります。この記事では、楽天やメルカリShopsのようなショップを想定し、商品画像を整える実践的な順番をまとめます。

まずプラットフォームの画像規定を確認

最初に出店先の画像要件を確認しましょう。メイン画像はほとんどが正方形を求め、最小解像度と最大容量が決まっています。規格を外れるとアップロードが拒否されたり、強制的に切り取られたりします。

  • 楽天のメイン画像:正方形推奨、700×700px以上
  • Amazonのメイン画像:白背景必須、長辺1000px以上(1600px以上でズーム可)
  • 商品詳細ページ:横幅は表示枠に合わせ、縦は長くつなげる
  • 共通:容量は1枚あたり数百KB〜数MB以下に管理すると安全

切り抜きはPNG、演出カットはJPG

商品画像は大きく2種類あります。背景を消した「切り抜き」と、実際の使用シーンを写した「演出カット」です。この2つはフォーマットを分けるのがおすすめです。

切り抜きは背景を透明にする必要があるため、PNGが必須です。透明背景のおかげで、どんな背景色の上にも自然に載せられます。一方、背景が一面にある演出カットやライフスタイルカットは透明が不要なので、JPGのほうがはるかに軽くなります。もし白背景で撮った切り抜きがすでに白背景で確定しているなら、PNGをJPGに変換して容量を大きく減らせます。

サイズを揃えると陳列がきれいになる

複数の商品を並べたとき、画像のサイズや比率がバラバラだと陳列が雑に見え、信頼感が下がります。すべてのメイン画像を同じピクセル(例:1000×1000)と同じ余白比率に揃えれば、一覧が整って見え、ブランドの印象が引き締まります。撮影角度が違っても、リサイズでキャンバスサイズを合わせれば統一感が生まれます。

速い読み込みとモバイル対応

ショッピングのトラフィックの大半はモバイルで発生し、画像の表示が遅いと顧客はそのまま離脱します。詳細ページに原本写真をそのまま何枚も入れると、ページが数十MBに膨れ上がり、読み込みに時間がかかります。

  • 表示幅(例:1000px)に合わせて先にリサイズする
  • そのあと圧縮で1枚あたりの容量を目標値以下に下げる
  • 文字の多い詳細カットは圧縮しすぎると文字が潰れるので注意する
  • 切り抜きが白背景で確定なら、PNG→JPG変換で容量を減らす

Switchingのリサイズツールでサイズを揃え、PNGをJPGに変換して容量を減らし、画像圧縮ツールで目標容量に合わせればOKです。すべての変換がブラウザ内だけで行われ、ファイルがサーバーにアップロードされないため、発売前の新商品画像でも流出の心配なく扱えます。

よくある質問

白抜き画像をJPGで保存してはいけませんか?
JPGは透明を扱えないため、背景が白か黒で塗りつぶされます。ストアの背景色が白なら白背景のJPGでも目立ちませんが、ダークモードや色付きの背景では白い四角がそのまま見えてしまいます。白抜きはPNGのままが安全です。
詳細ページの長い画像はどう分割すべきですか?
縦に非常に長い1枚は読み込みが遅く、一部のブラウザで表示の上限に当たることがあります。縦3000〜4000px単位で分けて複数枚にすると順次読み込まれ、体感速度が良くなります。
一覧でサムネイルが切れて見えます。
プラットフォームが正方形に切り取ることが多いためです。原本が長方形だと中央だけが残り上下が切られるので、一覧用の画像は初めから正方形で作り、商品を中央に余白を取って配置してください。
WebPを使ってもよいですか?
プラットフォームが許可していれば、同じ画質でJPGより20〜30%軽くなります。ただしJPG・PNGしか受け付けないショップもあるため、アップロード規定を先に確認し、対応していない場合はJPGで品質80前後にするのが現実的です。

関連するツール