商品画像の容量を小さくする方法｜画質を落とさず圧縮するポイント
ECサイトでは、多くの商品画像を掲載します。
商品写真はできるだけきれいに見せたい一方で、画像ファイルの容量が大きすぎると、ページ表示の負荷につながることがあります。
そのため商品画像では、必要な画質を保ちながら、ファイル容量を適切に小さくすることが重要です。
ただし、画像を軽くするために圧縮しすぎると、
- 商品の輪郭がにじむ
- 文字が読みづらくなる
- 生地や素材の質感が失われる
- ジュエリーやコスメの細部が崩れる
といった問題が起こることがあります。
本記事では、商品画像の容量が大きくなる原因、画質をできるだけ保ちながら圧縮する方法、ECサイトで画像を軽くするときの注意点まで解説します。
目次
- 商品画像の容量が大きくなる原因
- 商品画像の容量を小さくする基本的な考え方
- まず画像のピクセルサイズを確認する
- 表示サイズに合わせてリサイズする
- JPEG・PNG・WebPを使い分ける
- JPEGの圧縮率を調整する
- WebPで画像容量を抑える
- PNG画像の容量が大きい場合
- 画像圧縮ツールを使うときの注意点
- 画像を圧縮しすぎるとどうなる？
- 商品ごとに必要な画質は異なる
- ECサイトでは元画像をそのまま使わない
- 元画像は高品質な状態で保存する
- 商品画像を軽くする基本的な流れ
- まとめ
商品画像の容量が大きくなる原因
商品画像のファイル容量は、主に以下の要素によって変わります。
- 画像の横幅・高さ
- ピクセル数
- ファイル形式
- 圧縮率
- 写真の情報量
- 色数
- 透過情報
- 保存設定
例えば、同じ商品写真でも、4000×4000pxと1000×1000pxでは、一般的に前者の方がファイル容量は大きくなります。
また、同じピクセルサイズでも、JPEG・PNG・WebPなど保存形式によって容量は変わります。
商品画像の容量を小さくする基本的な考え方
商品画像を軽くするときは、いきなり強く圧縮するのではなく、順番に調整することが重要です。
基本的には、
- 使用する画像サイズを決める
- 必要なピクセル数までリサイズする
- 用途に合ったファイル形式を選ぶ
- 圧縮率を調整する
- 最後に画質を確認する
という流れで進めます。
この順番なら、必要以上に画質を落とさずにファイル容量を小さくしやすくなります。
まず画像のピクセルサイズを確認する
最初に確認したいのが、画像の縦横サイズです。
デジタルカメラやスマートフォンで撮影した元画像は、
- 横4000px
- 横5000px
- 横6000px
など、大きなサイズになっていることがあります。一方、実際のECサイトでは、そこまで大きな画像を表示していない場合もあります。
例えば、商品ページ上で最大1200px程度しか表示しないのに、6000pxの画像をそのまま使用していれば、必要以上に大きなデータを読み込んでいる可能性があります。
表示サイズに合わせてリサイズする
画像容量を小さくする方法の中で、効果が大きいのがリサイズです。
例えば、6000×6000pxの画像を、1500×1500pxへ縮小すれば、画像が持つ総ピクセル数は大幅に減ります。
その結果、ファイル容量も小さくなりやすくなります。
小さくしすぎない
ただし、容量を減らすために画像サイズを小さくしすぎると、商品画像を拡大したときに粗く見えることがあります。
特に、
- 生地
- ジュエリー
- 時計
- コスメ
- 細かな柄
- ラベル
- 商品説明の文字
などを確認する画像では、一定の解像度が必要です。
実際に掲載するサイトの画像表示サイズや拡大機能を確認したうえで調整しましょう。
主要な通販サイトの商品画像サイズについては、以下の記事でも解説しています。
通販サイトの商品画像サイズガイド
JPEG・PNG・WebPを使い分ける
商品画像の容量は、ファイル形式によっても変わります。
一般的には、
JPEG→ 写真に使いやすい
PNG→ 透過画像やロゴなどに使いやすい
WebP→ Web向けに容量を抑えやすい
という特徴があります。
すべての商品画像を同じ形式にする必要はありません。画像の内容と掲載先に合わせて使い分けます。
JPEG・PNG・WebPの違いについては、新規記事公開後に以下の記事へリンクします。
JPEG・PNG・WebPの違いとは？EC商品画像に適したファイル形式の選び方
JPEGの圧縮率を調整する
JPEGは、保存時に圧縮率を調整できます。
圧縮を強くするとファイル容量は小さくなりますが、その分画質も低下します。
JPEG圧縮で確認したい部分
圧縮後は、
- 商品の輪郭
- ロゴ
- 小さな文字
- 生地の模様
- 髪
- アクセサリー
- グラデーション
- 背景との境界
などを確認しましょう。
画面全体ではきれいに見えても、拡大するとブロック状のノイズやにじみが見える場合があります。
最大画質で保存する必要はない
Web用の商品画像では、必ずしもJPEGを最高品質で保存する必要はありません。見た目の差がほとんど分からない範囲で圧縮率を調整すると、画像容量を削減できます。
ただし、適切な設定は写真によって異なります。
WebPで画像容量を抑える
WebPは、Web向け画像として利用される形式です。JPEGなどと比べて、同程度の見た目を維持しながら容量を抑えられる場合があります。
ECサイトで多数の商品画像を表示する場合は、選択肢の一つになります。
WebPを使う前に確認する
使用している、
- CMS
- ECカート
- 商品管理システム
- CDN
- 画像配信システム
などがWebPに対応しているか確認しましょう。外部ECモールへ直接アップロードする場合は、そのモールが受け付けている形式に従います。
PNG画像の容量が大きい場合
PNGは透過背景やロゴなどに便利ですが、写真をPNGで保存すると容量が大きくなる場合があります。
例えば、人物写真＋背景＋多数の色を含む画像をPNGで保存すると、JPEGやWebPより容量が大きくなる可能性があります。
本当にPNGが必要か確認する
PNGが必要になる代表例は、
- 背景透過
- ロゴ
- アイコン
- 図
- 文字中心の画像
などです。
一般的な商品写真で透明背景が不要なら、JPEGやWebPに変更できる場合があります。
画像圧縮ツールを使うときの注意点
画像圧縮ツールを利用すると、比較的簡単にファイル容量を小さくできます。
ただし、ツールによって圧縮方法や仕上がりは異なります。
圧縮後は必ず確認する
自動圧縮された画像は、
- 細部がぼやけていないか
- 色が変化していないか
- 文字が読めるか
- 商品の輪郭が崩れていないか
- グラデーションが不自然ではないか
を確認します。「容量が小さくなったから成功」ではなく、商品情報がきちんと伝わる画質を保てているかが重要です。
画像を圧縮しすぎるとどうなる？
画像の圧縮を強くしすぎると、さまざまな劣化が起こります。
輪郭がぼやける
商品と背景の境界が不鮮明になります。
特に白背景の商品写真では、商品の輪郭が甘く見える場合があります。
細かな素材感が失われる
アパレルの生地や革、木材などの細かな質感が見えにくくなることがあります。
文字が読みづらくなる
商品パッケージやラベルに小さな文字がある場合は注意が必要です。
グラデーションが崩れる
背景や商品表面の滑らかな色の変化が段階的に見える場合があります。
高級感が失われる
ジュエリーやコスメなどでは、細かなハイライトや質感が商品の印象に大きく影響します。
圧縮しすぎると、写真全体が粗く見えることがあります。
商品ごとに必要な画質は異なる
すべての商品で同じ圧縮率を使う必要はありません。
例えば、
アパレル
生地の織りや柄、縫製を確認できる画質が必要です。
アパレルの商品撮影について
ジュエリー
宝石や金属の細かな反射、形状が重要です。
ジュエリー・アクセサリーの商品撮影について
コスメ
パッケージの文字や容器の光沢、透明感などを確認できるようにします。
コスメ・化粧品の商品撮影について
食品
食材の質感やシズル感が損なわれないように注意します。
料理・食品の商品撮影について
商品ごとに「ユーザーに何を確認してもらう写真か」を考えて圧縮します。
ECサイトでは元画像をそのまま使わない
撮影した元画像を、そのままWebサイトへアップロードする運用はおすすめできません。
カメラから出力された元画像は、
- サイズが大きい
- 容量が大きい
- Web表示には過剰な解像度
になっていることがあります。
基本的には、
元画像
↓
レタッチ
↓
掲載サイズにリサイズ
↓
Web用に書き出す
↓
圧縮後の画質確認
↓
ECサイトへ掲載
という流れにします。
元画像は高品質な状態で保存する
Web用の商品画像を圧縮した場合でも、元画像まで圧縮して置き換えないようにしましょう。
商品写真は後から、
- SNS
- Web広告
- LP
- カタログ
- パンフレット
- POP
- パッケージ
- 展示会
などに使う可能性があります。Web用に小さく圧縮した画像しか残っていないと、印刷物など別の用途で使いにくくなります。
元画像または高品質な完成データは別に保存しておきましょう。
商品画像を軽くする基本的な流れ
商品画像の容量を小さくするときは、以下の順番で進めると分かりやすくなります。
1. 掲載先を確認する
まずECサイトやモールで必要な画像サイズ・形式を確認します。
2. 元画像をコピーする
元画像を直接編集せず、Web掲載用のデータを作ります。
3. 不要な部分をトリミングする
必要な構図に整えます。
4. ピクセルサイズを調整する
掲載先で必要なサイズまでリサイズします。
5. ファイル形式を選ぶ
JPEG・PNG・WebPなどから用途に合った形式を選びます。
6. 圧縮する
画像を見ながら、必要以上に画質を落とさない範囲で圧縮します。
7. PCとスマホで確認する
実際の表示環境で、
- 商品が粗く見えないか
- 文字が読めるか
- 色が不自然でないか
- 拡大したときに使えるか
を確認します。
商品画像の容量は小さいほどいい？
ファイル容量は小さいほど良い、というわけではありません。
例えば、商品画像を極端に圧縮して50KBにできたとしても、商品の質感が分からなくなればEC用写真としては不十分です。
逆に、見た目の違いがほとんどないのに数MBある画像も、Web用としては過剰な場合があります。
重要なのは、必要な画質を保てる範囲で容量を抑えることです。
固定された「○KB以下なら正解」と考えるより、掲載サイズと写真内容に合わせて判断しましょう。
商品画像の容量を減らすときによくある失敗
圧縮だけで容量を小さくしようとする
6000pxの画像をそのまま強く圧縮するより、まず必要なピクセルサイズへ縮小した方が自然に容量を減らせる場合があります。
すべて同じ圧縮率にする
写真によって情報量が異なるため、同じ設定でも劣化の見え方が変わります。
元画像を削除する
Web用に圧縮したデータしか残らなくなると、後から別用途へ展開しにくくなります。
PNGを大量に使用する
透明背景が不要な写真までPNGにすると、画像容量が大きくなる場合があります。
画像を小さくしすぎる
スマートフォンでは問題なく見えても、PCや拡大表示では粗さが目立つ場合があります。
ファイル容量だけを見る
最終的な目的は画像を小さくすることではなく、商品を分かりやすく見せながらWeb上で適切に配信することです。
画像圧縮と解像度は別のもの
「画像を圧縮すること」と「解像度を下げること」は必ずしも同じではありません。
例えば、同じ1000×1000pxのJPEGでも、保存時の品質設定によってファイル容量を変えられます。
一方、2000×2000pxを1000×1000pxに変更するのはリサイズです。
商品画像を軽くするときは、画像の大きさを変えるリサイズと、データ量を減らす圧縮を分けて考えると分かりやすくなります。
解像度については以下の記事でも詳しく解説しています。
画像の解像度とは？
まとめ
ECサイトの商品画像では、高画質な写真を掲載することと、画像容量を適切に抑えることの両方が重要です。
商品画像を軽くする場合は、
- 掲載先に必要な画像サイズを確認する
- 必要なピクセル数までリサイズする
- JPEG・PNG・WebPを使い分ける
- 過度に圧縮しない
- 圧縮後の画質を確認する
- 元画像は高品質な状態で残す
ことがポイントです。
特に商品写真では、単に容量を小さくすることよりも、商品の形・色・素材感・文字など、購入判断に必要な情報が残っているかを優先しましょう。
画像容量を小さくした結果、商品の質感が分からなくなってしまえば本末転倒です。
高品質な元画像を保存したうえで、ECサイトやSNS、広告など、それぞれの用途に合わせたサイズ・形式で書き出す運用がおすすめです。
AirPhotoでは、ECサイトや広告などの使用目的に合わせた商品撮影に対応しています。
通販サイトの商品画像サイズガイド
画像の解像度とは？
商品撮影の料金を見る
AirPhotoの商品撮影サービスを見る
AirPhotoの商品撮影実績を見る
お問い合わせはこちら
お急ぎの場合はこちら：03-6824-2695
著者情報
著者：AirPhoto編集部
AirPhotoは、商品の魅力やブランドの世界観を伝える商品写真の撮影を行う撮影チームです。
商品撮影・スタイリング・モデル撮影・動画撮影・レタッチなどの実務を通じて得た知見をもとに、ECや商品写真に関する情報を発信しています。
