こんにちは、ツバサです。
ECモールに商品画像をアップしようとしたら「画像サイズが大きすぎます」と表示された。でもこれって、画像の縦横が大きいのか、データ容量が重いのか、どっちのことだろう？混乱したので調べてみた。
画像サイズとは
ひとことで言うと、「画像サイズ」という言葉は文脈によって2つの意味で使われている。1つは画像の縦横の大きさ（ピクセルサイズ）、もう1つはファイルのデータ容量（ファイルサイズ）だ。
Adobeの画像データ基礎知識のページによると、画像データを構成する要素として「ピクセル数（解像度）」と「データ容量」は別々に説明されている。つまり、本来は別の概念なのに「画像サイズ」という言葉でまとめて呼ばれてしまっているからややこしいわけだ。
| 呼び方 | 意味 | 単位 | 例 |
|---|---|---|---|
| 画像サイズ（ピクセルサイズ） | 画像の縦横の大きさ | px（ピクセル） | 1600×1200px |
| ファイルサイズ | データの容量 | KB・MB | 850KB、2.3MB |
サイビッグネットの画像データ解説にも、この2つの違いがわかりやすくまとめてあった。ECモールの規定で「画像サイズ」と言われたら、まずピクセル数のことなのかファイル容量のことなのか確認するのが先だ。
2つは連動している。ピクセル数が多ければ情報量も増えるので、基本的にはファイルサイズも大きくなる。ただ、保存形式（JPEG・PNG・WebPなど）や圧縮率によってファイルサイズは大きく変わるので、「ピクセル数が同じ＝ファイルサイズも同じ」とは限らない。ideaman'sの画像最適化検証記事では、同じ画像をJPEGとPNGで保存したときのファイルサイズ比較が載っていて参考になった。
EC実務で出てくる場面
「画像サイズが大きすぎます」というエラーに遭遇するのは、だいたい次のような場面だ。
モールのアップロード制限
楽天市場では1枚あたり5MB以下という制限がある。カメラで撮ったままの写真は5MBを超えることがあるので、そのままではアップロードできない。このとき言われている「サイズ」はファイルサイズ（MB）のほうだ。楽天RMSの画像ガイドラインにも、ファイルサイズとピクセルサイズ両方の制限が書いてある。
Webページの表示速度
自社ECサイトに大きな画像をそのまま貼ると、ページの読み込みが遅くなる。GoogleのPageSpeed Insightsのドキュメントでも、画像の最適化がページ速度改善の重要なポイントとして挙げられている。ここでの「画像サイズ」は、ピクセルサイズとファイルサイズの両方が関係してくる。
メールに添付する商品画像
取引先やカメラマンに商品画像をメールで送るとき、ファイルサイズが大きすぎると添付できない。Gmailなら1通あたり25MBが上限。複数枚送ると簡単に超えてしまう。この場合はリサイズするかJPEG圧縮率を上げてファイルサイズを軽くする必要がある。
覚えておきたいポイント
「サイズを小さく」と言われたら何を小さくするか確認する
上司や取引先から「画像サイズを小さくして」と言われたとき、ピクセル数を小さくするのか（リサイズ）、ファイル容量を軽くするのか（圧縮）で作業が変わる。確認せずに進めると二度手間になるので、最初に聞いたほうがいい。
ピクセルサイズを小さくすればファイルサイズも減る
リサイズしてピクセル数を減らせば、ファイルサイズも一緒に軽くなる。ただし、ピクセル数を減らしすぎると画像がぼやけてしまう。ECモールの推奨ピクセルサイズ（Amazonなら1600px以上）を下回らない範囲でリサイズするのがコツだ。各モールの規定はECサイト商品画像ルールまとめにまとめた。
圧縮だけでファイルサイズを減らすこともできる
ピクセルサイズはそのままで、JPEGの圧縮率を上げたりWebPに変換したりすれば、ファイルサイズだけを軽くできる。画質とのバランスになるが、EC用途なら圧縮品質80%くらいでも十分なことが多い。圧縮方法の詳細は商品画像の圧縮テクニックを参考に。
