商品画像がアップロード後にぼやける原因は、ほぼカメラにはありません。あなたのデスクトップから出ていったファイルは鮮明でした。買い手のスマートフォンが実際にダウンロードしたファイルは、もはやそれとは別物です。リサンプリングされ、再エンコードされ、上限で切り詰められ、配信のために作り直される——たいてい四回か五回。しかもそれを行うシステムが最適化しているのは、あなたの寸法表記ではなくページ表示速度です。
ぼやけた画像をわざわざアップロードする人はいません。鮮明さはアップロードの瞬間に失われるのではなく、工程ごとに少しずつ消費されていきます。そしてその大半は、出品者管理画面からは見えないところで起きています。まずパイプライン全体を一枚の表で示し、そのうえで損失の大きい三つの工程への対処を説明します。
商品画像がアップロード後にぼやける：8つの工程を順番に
| # | 工程 | ファイルに対して何をするか | 何を失うか | 自分で制御できるか |
|---|---|---|---|---|
| 1 | 撮影 | 手ブレ、ピント外し、極端に絞ったときの回折 | 実際のディテール。後から復元は不可能 | できる |
| 2 | 書き出し時のリサンプリング | 出力シャープネスをかけずに目標ピクセルサイズへ縮小 | エッジ、矢印、小さな文字のマイクロコントラスト | できる |
| 3 | 自分側の JPEG エンコード | 画質設定とクロマサブサンプリングで色情報を捨てる | 細い色付きの線、赤や青の注記文字 | できる |
| 4 | プラットフォームへの取り込み | モールがあなたの JPEG をデコードし、自社設定で再エンコード | 世代劣化、硬いエッジに出るリンギングのハロー | できない |
| 5 | ピクセル上限 | プラットフォーム独自の長辺上限で保存される | 上限を超えた部分は永久に失われる | 適切な書き出しサイズを選ぶことでのみ |
| 6 | 派生サイズ | ページが要求するのはサムネイル相当の複製で、マスターではない | 縮小率に比例したディテール | 部分的に。どの枠を狙うか次第 |
| 7 | デバイスピクセル比 | 3倍密度の画面は CSS 1px あたり画像 3px を要求する | 高精細画面では体感シャープネスの三分の二 | 部分的に |
| 8 | 配信 | 遅延読み込みのプレースホルダー、テーマ設定、低速回線時の代替表示 | 初回描画時の一時的な、あるいは恒常的な甘さ | 部分的に |
工程 1 と 2 はあなたの領分です。工程 4 と 5 はプラットフォーム側のもので、交渉の余地はありません。実務上、商品画像がアップロード後にぼやけるという苦情のほとんどは工程 3、4、7——エンコード、再エンコード、そして画面——に行き着きます。撮り直してもたいてい何も解決しないのは、そのためです。
工程 3：赤い寸法矢印が真っ先に死ぬ理由はクロマサブサンプリング
クロマサブサンプリングは JPEG エンコードの省略手法で、輝度は全解像度で保持する一方、色情報はその一部しか記録しません。一般的な 4:2:0 では、2×2 ピクセルのブロックごとに色サンプルは一つだけです。輝度のディテールは残りますが、色のディテールはファイルがあなたの端末を離れる前に四分の一へ削られています。
ソファの写真であれば、これは妥当な取引です。しかしグレーのパネル上に引かれた 1 ピクセルの赤い矢印にとっては、最悪の取引です。中間的な赤と中間的なグレーには輝度差がほとんどなく、その線の見えやすさはほぼ色相だけが担っているからです。そして色相こそ、エンコーダーが最初に捨てるチャンネルです。線は消えはしません。幅 2 ピクセルほどの、にじんだピンクのあざになり、矢印の先端は尖らなくなります。
対処法は画質スライダーを上げることではありません。注記を色ではなく輝度で勝たせることです。
- 明るい背景には暗い線、暗い背景には明るい線。コントラストは色相ではなく輝度に置きます。
- 線に細い対比色のフチや縁取りを付け、2×2 の色平均を生き延びられるようにします。
- 寸法文字はマスターサイズではなく、配信されるサイズで最低 2 px の太さを確保します。
- 彩度の高い赤や青の文字を中間調の製品の上に直接置かないこと。この二つの色相が最初に崩れます。
工程 4：誰にも見えない再エンコード
どのモールも、アップロードされた画像をデコードして自前のコピーを書き出します。JPEG は非可逆なので、二度目のエンコードは一度目の誤差を繰り返すだけでは済みません。すでに圧縮ノイズを含んだ画像を量子化するため、そのノイズが「残すべきディテール」として扱われてしまいます。目に見える結果がリンギングです。硬いエッジに沿って薄いハローが張り付き、白地に黒の文字や仕様図の直線でとりわけ目立ちます。
これを止めることはできません。できるのは、傷んだ入力を与え続けるのをやめることです。
- 可逆のマスター（PNG、TIFF、またはレイヤー付きの原本）を保管します。書き出した JPEG を開いて上書き保存するのは厳禁です。
- 書き出しは一回。マスターから、最終ピクセルサイズへ直接。途中で JPEG 保存を挟むたび、その世代分の代償を払うことになります。
- プラットフォーム側の上限がすでに処理している以上、ファイルサイズ目標に合わせて事前圧縮する必要はありません。
工程 3 と 4 から導かれる原則はこうです。一枚の商品画像が JPEG に何回エンコードされたかは、単一のエンコードで画質スライダーをいくつにしたかよりも重要です。
工程 5：ズームを生かすためのピクセル下限
ズームは、仕様が読めるかどうかを買い手が確かめるための機能であり、どのプラットフォームもピクセル数のしきい値で制御しています。しきい値に届かなければ、画像は「ぼやけている」のではなく、配信すべき高解像度版がそもそも生成されていないだけです。
| プラットフォーム | 最低受け入れサイズ | ズームのしきい値 | 上限 |
|---|---|---|---|
| Amazon | 長辺 500 px | 最低 1,000 px。最良のズーム体験には 1,600 px 以上 | 長辺 10,000 px |
| eBay | 長辺 500 px | 長辺 1,600 px | 1 枚あたり 12 MB |
| Shopify | 下限の公表なし | ズームを機能させるには 800 × 800 px 超 | 5,000 × 5,000 px、20 MB まで。正方形は 2,048 × 2,048 px 推奨 |
ここから二つのことが言えます。第一に、物理的に大きいファイルをアップロードしても、そもそも撮れていない解像度が増えるわけではありません。これは 300 DPI と 72 DPI の議論の背後にあるのと同じ混同で、ファイルのヘッダーに書かれた数値が画像のディテールと取り違えられています。第二に、プラットフォームの上限に合わせて書き出すのはたいていコストがかからず、いまテーマがたまたま表示しているサイズに合わせて書き出すより常に安全です。
工程 7：高精細画面にかかる 2 倍の税
デバイスピクセル比とは、ブラウザーが CSS 1 ピクセルを描くのに使う物理ピクセル数のことです。現在のスマートフォンは 2 か 3 を返すのが普通です。1,000 ピクセルの画像を 500 CSS ピクセルの枠に入れると、古いノートパソコンでは鮮明に見え、スマートフォンでは明らかに甘く見えます。スマートフォンが求めたのは 1,500 ピクセルで、届いたのは 1,000 ピクセルだからです。
「自分のモニターでは問題なく見える」と出品者が言う理由の大半がこれです。実際、問題なく見えているのでしょう。あなたのモニターが要求したピクセル数は、買い手のスマートフォンより少なかっただけです。そのファイルで問題ないと判断する前に、すべての商品画像をスマートフォンの 100% 表示で確認してください。
トリミングはこれをさらに悪化させます。プラットフォームの表示枠の形状が書き出した比率と違えば、画像の最も鮮明な部分が、縮小される前に切り落とされることがあります。これは別種の失敗ですが、目には同じ甘さとして映ります。それは切り分けて考えるべき判断で、商品画像のアスペクト比 で扱っています。
効果の大きい順に、何を変えるか
- プラットフォームの上限サイズで、可逆マスターから、一回だけ書き出す。 単独では最大の効果があり、費用はかかりません。
- 画質スライダーに触れる前に、注記のコントラストを直す。 輝度はどのエンコードも通り抜けますが、色相は通り抜けません。
- シャープネスは縮小の後に。決して前ではない。 6,000 px のマスターにシャープをかけてから縮小すると、その処理は捨てられ、ハローだけが残ります。
- JPEG の往復をやめる。 配信サイズごとに、マスターから一回だけ書き出します。
- スマートフォンで検証する。 デスクトップのプレビューでもなく、アップロード画面でもありません。
これらすべての上流に、もう一つのレバーがあります。注記がそもそもどう作られたか、です。寸法線や仕様の文字を図形として描き、配信ピクセルサイズで一度だけ書き出したものは、プラットフォームの再エンコードを通り抜けても鮮明さを保ちます。硬いエッジと高い輝度コントラストを持つ形状が、等倍解像度でレンダリングされているからです。同じ数値を、画像編集ソフトで拡大表示しながら写真の上に打ち込み、あとから縮小した場合は、圧縮が始まる前の時点ですでに甘くなっています。計測を製品の実際のエッジにスナップさせ、各プラットフォームの仕様図サイズで注記入り画像を書き出せるツールを使えば、工程 2 と 3 をまるごと省けます。しかも図形が生成ではなく実測に基づく以上、矢印の上の数値は巻尺の数値であって、画像モデルがそれらしく作り出した値ではありません。手法を比較検討しているなら、製品写真に寸法を入れるツールの一覧 が妥当な出発点になります。
60 秒でできる切り分け
撮り直す前に、まずこれを実行してください。商品画像がアップロード後にぼやける三つの原因——ピクセル不足、エンコード回数の過多、画面密度——を、一分ほどで切り分けられます。
- 公開中の商品ページをスマートフォンで開き、ピンチで拡大します。そもそもズームが作動しますか。作動しないなら、プラットフォームのズームしきい値を下回っています。これは鮮明さの問題ではなくピクセル数の問題です。
- 公開中の画像を右クリックし、新しいタブで開きます。そのピクセル寸法をアップロードしたものと比べます。数値が小さければ、プラットフォームが上限で切ったか、派生画像を作り直しています。
- 白地に黒の硬いエッジを 200% で確認します。両側に薄い明るいハローが見えるなら、ピンボケではなく再エンコードです。
- 色付きの注記線を 200% で確認します。線が横ににじんでいるのに近くの黒い文字は鮮明なら、それはクロマサブサンプリングです。
- アップロードしたファイル自体を確認します。一度でも開いて JPEG で保存し直したものなら、マスターから書き出しをやり直してください。
- マスターの長辺とプラットフォームの上限を比べます。大きく下回っているなら、より大きく書き出し直します。
六つすべてを通過してもなお甘く見えるなら、そのときはじめて撮影の問題です。そしてその段階で直すべきは書き出しではなく撮影そのものです。計測できる状態を保つ撮り方は独立した技術であり、計測のための製品撮影の方法 で扱っています。
よくある質問
自分のデスクトップでは鮮明なのに、Shopify にアップロードした商品画像がぼやけるのはなぜですか。
デスクトップで見ているのがマスターで、ストアフロントが表示しているのは派生画像だからです。Shopify は小さい画面に合わせて画像を自動的にリサイズするため、買い手が受け取るのはたいていあなたのファイルではなく縮小された複製です。Shopify は 5,000 × 5,000 px・20 MB までの画像を受け入れ、正方形の商品画像には 2,048 × 2,048 px を推奨し、ズームを機能させるには 800 × 800 px を超える画像が必要です。アップロードがこれを大きく下回っていれば、すべての派生画像が足りないディテールから出発することになります。
大きいファイルをアップロードすれば画像は鮮明になりますか。
実際に撮影できた解像度の範囲内でのみ有効です。プラットフォームのズームしきい値や派生サイズが表示を飢えさせている場合、たとえば Amazon や eBay で 800 px から 1,600 px に上げればズームが有効になるように、ピクセルを増やす意味があります。900 px の写真を 3,000 px に拡大しても、ファイルサイズが増えるだけでディテールは増えず、多くの場合そこに目に見える補間由来の甘さが加わります。
寸法文字がメイン画像では問題ないのに、ギャラリーのサムネイルでつぶれるのはなぜですか。
サムネイルは縮小によって生成される別の派生画像だからです。1,600 px のマスターで高さ 14 px の文字は、450 px のサムネイルでは約 4 px になり、これは字形がリサンプリングに耐えられる大きさを下回ります。注記文字のサイズは、マスターではなく、それが表示される最小の枠を基準に決めてください。
仕様図には JPEG ではなく PNG をアップロードすべきですか。
プラットフォームが許すなら、平面的な色・硬い線・文字が中心の画像については、そうすべきです。PNG は可逆でクロマサブサンプリングの影響を受けません。難点は、多くのモールが取り込み時にどのみち JPEG へ再エンコードすることで、PNG が守れるのは工程 2 と 3 であって工程 4 ではありません。それでも実行する価値はあります。きれいな入力は、すでに劣化した入力よりも、一度の再エンコードをはるかによく耐えるからです。
Wi-Fi よりモバイル回線のほうが画像が悪く見えるのはなぜですか。
一部のブラウザーやネットワークは、帯域が制限された接続で低画質版に差し替えます。また多くのストアフロントは、本来のファイルが読み込まれるまで小さくぼかしたプレースホルダーを表示します。一秒ほどで鮮明になるなら、それはプレースホルダーであり、直すべきものはありません。甘いままなら、工程 5 から 7 をさかのぼって確認してください。