商品写真を圧縮してネット販売(解像度はそのまま、ファイルは小さく)

あなたは今、商品写真の撮影に20分かけた。窓からの自然光。きれいな台。商品は中央に、ピンと合っていて、「買う」をクリックしたくなるような仕上がり。パソコンに移してファイルサイズを見ると:1.1MB。写真1枚。これを1出品につき10枚、さらに出品している商品の数だけ掛ける。あなたのショップページは毎回数MBの画像を読み込み、その大半がモバイル回線――100KB増えるごとに読み込みが1秒遅くなる。

ほとんどの人が間違っているのはこれだ。エディタで写真を開き、サイズを800×600以下に縮めて保存する。ファイルは小さくなる、確かに。でも、マウスオーバーでズームさせるための画素も捨てている。メルカリ、ラクテン、BASE、Amazonといった場で、買い手はタップかホバーで細部を見ることを期待している。リサイズはそれを殺す。正しいやり方は、画素は1ピクセルも残して、別の方法でファイルを小さくすること――つまり品質を下げることだ。

ちゃんと検証した。本物の商品写真――手作りの陶器マグカップ、1024×949ピクセル、カメラからそのまま書き出した1,156KBのPNG――をブラウザ内JPEG圧縮ツールで9段階の品質で通した。同じ写真、同じ解像度、変えたのはエンコードの強さだけ。結果はこう。

各プラットフォームが画像に本当に求めているもの

ルールは場によって違うが、パターンはどこでも同じだ。大きく、ディテールがあって、それでいて速く読み込まれる画像を求めている。主要な場の並びはこう。

• メルカリ: 1枚最大5MB、JPEG/PNG。正方形〜縦長の画像がタイムラインで映える。
• ラクテン(楽天): 1枚最大10MB程度。商品写真にはJPEGを強く推奨。
• Yahoo!ショッピング / BASE: 最大5〜10MB。モバイルファーストなので画像速度が重要。
• Amazon.co.jp: 白背景が必須で、1MB程度を目安にすることが多い。ズームは2000px以上で最も効く。
• Etsy(海外販売): 最短辺2000px以上を推奨し、ズームをシャープに保つ。出品あたり最大10枚。

パターンに気づいたか?小さくリサイズしろと言う場はどこにもない。すべてが高解像度でズームが効く画像を評価している。問題は画素が多すぎることではない。その画素に詰め込まれた、見えないデータが多すぎることだ。

品質かリサイズか: なぜスライダーが勝つか

JPEGファイルには2つのものが入っている。画素データ(写真が何を映しているか)と符号化の詳細(各画素の色がどのくらいの精度で保存されているか)だ。サイズを変えると、画素を永久に捨てる。品質を下げると、すべての画素を保ち、各色をより少ない精度のビットで保存するだけだ。通常の出品サイズ(スマホでおそらく600〜800ピクセル幅)で見る商品写真では、品質95と75の差は本質的に見えない。しかしファイルサイズの差は膨大だ。179 KB対58 KB。画素を1ピクセルも失わずに68%の削減だ。

PNGはさらに悪い。商品写真をPNGで保存すると、エンコーダは各画素を完璧に保存する。つまり1024ピクセル幅の商品写真は、60 KBのJPEGと同じだけの視覚情報しかなくても、簡単に1〜3 MBに達する。JPEGはあらゆるプラットフォームが写真に推奨する形式で、グラデーションや質感、自然光のあるもの――つまり事実上すべての商品写真――にはPNGよりずっとよく圧縮される。

圧縮していない写真を10枚アップするとどうなるか

プラットフォームは出品あたり複数画像を許可する。メルカリは最大10枚(一部9枚)。各写真が1.1 MBのPNGから始まる場合の計算はこう。

1出品で11.3MBから574KBへ下がることは、4Gで1秒で開くページと4秒グルグル回るページの差だ。モバイル回線ではこの差が、待つか戻るかを決める。軽い画像はCore Web Vitalsのスコアも助け、一部のプラットフォームはそれを内部検索の順位に組み込んでいる。Shopifyストアも併せ持つなら、Shopify画像最適化ガイドが技術面を深掘りしている。

アップする前に私が行っている手順

1. フル解像度で書き出す。 写真はネイティブサイズのまま――最短辺2000px以上が理想。省スペースのために縮小してはいけない。
2. 写真をブラウザ内圧縮ツールに放り込む。 ツールがバッチ対応なら10枚まとめて。私が使っているものは最大20ファイル同時処理でき、すべてブラウザ内で動く――サーバーには何も送信されない。
3. 既定の結果を見る。 多くは品質80から始まり、1.1MBの写真がすでに67KBになる。それで十分なことも多い。
4. もっと小さくしたいなら、品質スライダーを75に。 サイズの表示が落ちるのを見よう。75なら58KBで、寸法は1ピクセルも変わらない。すべての画素がそのまま。
5. ダウンロード前にプレビュー。 良いツールは圧縮前後の比較を並べて見せる。100%拡大で圧縮版がきれいならダウンロード。変なら80か85に戻す。
6. 販売プラットフォームにアップ。 シャープで高速読み込みのJPEGが10枚。ズームも効く。モバイルも速い。完了。

品質75は本当に見劣りするか

正直に?デスクトップ画面で100%表示すると、わずかに、だ。最も細かい質感(陶器の釉薬の粒子、布の織り、金属の光沢)がほんの少しシャープさを失う。200%表示で素早く行き来すれば、圧縮版と原画を見分けられる。

だが本質はこうだ。誰もあなたの商品写真を200%では見ない。メルカリの検索結果は主画が約500〜700ピクセル、出品ページで約800〜1000。ズームの上限はアップした解像度、つまりあなたの完全な1024+ピクセルのままだ。そのサイズの普通のスマホ画面では、品質75は原画と見分けがつかない。見えない微細ディテールと引き換えに、95%小さいファイルを得ているのだ。毎回引き合う取引だ。

質感の忠実度が重要なものを売るなら――編み目自体が売りの手編みセーター、ファセットの輝きでクリックを生むアクセサリー――品質80か85にとどめよう。それでも元のPNGより80〜90%ファイルを減らせる。それ以外――陶器、プリント、雑貨、小物――は75があなたの数字だ。

売り手がやりがちで時間と売上を失うミス

• 「省スペース」のために1000ピクセル以下に縮小する。 これが私が見る最多のミス1位だ。確かにファイルは小さくなる。でもズームを無効にし、Retina画面で写真をボケて見せ、後でトリミングする余裕も奪う。解像度は保つ。品質を下げるんだ。
• 商品写真をPNGで保存する。 PNGは無劣化、聞こえはいいが、1MBの写真が3MBのPNGになり、読み込みが3倍遅くなる。JPEGで保存しろ。写真は常にJPEGだ。
• 同じJPEGを何度も上書き保存する。 毎回の「名前を付けて保存」で再圧縮される。2、3回でアーティファクトが蓄積し、ファイルサイズはほとんど動かないのに写真がボケ始める。元のソースファイル(RAW書き出しかカメラJPEG)から一度だけ圧縮しろ。
• サーバー側のオンライン圧縮ツールを使う。 あなたの写真は見知らぬサーバーへ渡り、そこで処理されて戻ってくる。未発表のデザインや発売前の商品なら、それは知的財産の漏洩リスクだ。ブラウザ側の圧縮はすべてあなたの端末で動く――ファイルは端末から出ない。未発表在庫や自社デザインを扱う売り手が多いことを考えれば、これは多くの人が思う以上に重要だ。
• 70〜80のスイートスポットを無視する。 削減カーブは上端が最も急だ。95→75で68%減。60→50では11%しか減らない。楽な削減はすべて85から70の間にある。そこに注意を向けるべきだ。

特定の状況のための関連ガイド

あなたの商品写真の要件は、上の一般的な場合より具体的かもしれない。特定のサイズ上限や専門プラットフォームに直面しているなら、これらのガイドがさらに深く掘り下げる。

• 特にAmazonで売る(1MBの厳しい目標と白背景必須)? Amazon商品画像圧縮ガイドを読もう。
• 厳しいフォームやアバター上限に合わせて写真を50KB未満に収めたい? 50KB未満の手順がまさにその事例を扱う。
• 品質60と80が本当にそんなに違うか気になる? JPEG品質の比較が4種類の画像で並べて見せる。
• Shopifyストアを市場出品と併せ持つ? 画像速度はCore Web VitalsとGoogle順位に直結する。Shopify画像ガイドを参照。
• 分析やデザインモックをスクショして出品に入れる? スクショはJPG保存でボケる。スクショ圧縮ガイドが文字をシャープに保つ。

まとめ

商品写真を縮小するのをやめろ。フル解像度のまま保て――最短辺最低2000ピクセル――そして品質75(質感重視なら80)のJPEGで圧縮しろ。1.1MBの写真が58KBになる。10枚で574KB、11MBではなく。出品ページはモバイルでより速く読み込み、ズームも効いたまま。それをソフトのインストールも、アカウント作成も、他人のサーバーへの写真送信もなしでやったのだ。

次に解像度スライダーを左へ引こうとしたら、止まれ。品質スライダーを引け。同じ結果、ダメージなし。