JPEG・PNG・WebPの違いとは？EC商品画像に適したファイル形式の選び方
ECサイトやWebサイトで商品画像を掲載するとき、画像ファイルには「JPEG」「PNG」「WebP」など複数の形式があります。
同じ写真でも、保存形式によって、
- ファイル容量
- 画質
- 背景透過の可否
- 圧縮方法
- Webページの表示負荷
などが変わります。
そのため、「商品写真ならJPEGでいい？」「PNGの方が高画質なの？」「WebPに変えた方がいい？」と迷う方もいるでしょう。
商品画像では、単純に「最も高画質な形式」を選べばよいわけではありません。
写真なのか、透過画像なのか、Web表示用なのかなど、画像の用途に合わせてファイル形式を選ぶことが重要です。
本記事では、JPEG・PNG・WebPの違い、それぞれの特徴、EC商品画像での使い分け、画像形式を変更するときの注意点まで解説します。
目次
- 画像のファイル形式とは
- JPEG・PNG・WebPの大きな違い
- JPEGとは
- PNGとは
- WebPとは
- 商品写真にはJPEG・PNG・WebPのどれがいい？
- 白背景の商品画像に適した形式
- 背景を透明にする場合
- ロゴ・文字・図解画像に適した形式
- ECサイトでWebPを使うメリット
- JPEGからWebPに変えると画質は上がる？
- PNGをJPEGにするとどうなる？
- 画像形式とファイル容量の関係
- ECモールでは対応形式を確認する
- 元画像は高品質な状態で保存する
- 商品画像のファイル形式でよくある失敗
- まとめ
画像のファイル形式とは
画像のファイル形式とは、画像データをどのような方式で保存するかを決めるものです。
ファイル名の最後を見ると、
- .jpg
- .jpeg
- .png
- .webp
などの文字が付いています。
これを拡張子と呼びます。同じ商品写真でも、保存する形式によってデータの圧縮方法やファイル容量が異なります。
画像形式は、写真の見た目だけでなく、Webサイトの表示や画像制作の作業にも関係します。
JPEG・PNG・WebPの大きな違い
それぞれの特徴を簡単に整理すると、
JPEG→ 写真に向いている
PNG→ 透明背景やロゴ・図解に向いている
WebP→ Web上で画質と容量のバランスを取りやすい
という違いがあります。
ただし、必ずこの使い方だけに限定されるわけではありません。
実際には、
- 画像の内容
- 掲載するサイト
- 背景透過の必要性
- 必要な画質
- ファイル容量
などを考えて選びます。
JPEGとは
JPEGは、写真で広く使用されている画像形式です。
拡張子は、.jpgまたは.jpegです。
商品写真や人物写真、風景写真など、色の変化が多い画像を比較的小さなファイル容量で保存しやすい特徴があります。
JPEGのメリット
JPEGには、
- 写真との相性がよい
- ファイル容量を小さくしやすい
- 商品写真で利用しやすい
- 多くのWebサービスで扱いやすい
といった特徴があります。
ECサイトの商品写真では、JPEGが使われるケースも多くあります。
JPEGのデメリット
JPEGは、画像を圧縮して保存します。
圧縮を強くすると、
- 商品の輪郭がにじむ
- 細かな模様が崩れる
- 文字の周辺が荒れる
- グラデーションが不自然になる
ことがあります。また、JPEGは一般的に背景透過には向いていません。
JPEGは保存の繰り返しに注意する
JPEGは圧縮を伴う形式なので、編集した画像を何度もJPEGで上書き保存すると、画質が徐々に劣化することがあります。
商品写真を編集する場合は、元データを別に残しておき、最終的なWeb用画像としてJPEGを書き出す方法が使いやすいでしょう。
PNGとは
PNGは、背景を透明にできることが大きな特徴の画像形式です。
拡張子は、.pngです。
ロゴ、アイコン、図解などでよく使用されます。商品画像でも、商品だけを切り抜いて背景を透明にしたい場合に利用できます。
PNGのメリット
PNGには、
- 背景を透明にできる
- ロゴや文字をきれいに表示しやすい
- 画像を保存しても画質劣化が起きにくい
- 図やイラストと相性がよい
といった特徴があります。
PNGのデメリット
写真のように色や情報量が多い画像をPNGで保存すると、JPEGよりファイル容量が大きくなることがあります。
商品写真をすべてPNGにしたからといって、必ずしもWeb上で有利になるわけではありません。
背景透過が必要か、写真中心かなどを考えて使い分けましょう。
WebPとは
WebPは、Web上で画像を効率よく表示することを目的として利用されている画像形式です。
拡張子は、.webpです。
写真にも対応でき、背景透過にも対応できるため、JPEGやPNGの用途の一部をWebPへ置き換えることができます。
WebPのメリット
WebPには、
- 画像容量を抑えやすい
- 写真にも利用できる
- 透過画像にも対応できる
- Webページの画像配信に利用しやすい
といった特徴があります。
商品画像が大量にあるECサイトでは、画像ファイルの容量を抑えることがサイト全体のデータ量を減らすことにつながります。
WebPの注意点
WebPを使用する場合は、利用しているCMS、ECシステム、画像管理システムなどが対応しているか確認しましょう。
また、外部のECモールへ直接商品画像を登録する場合は、そのサービスが受け付けている画像形式を確認する必要があります。
商品写真にはJPEG・PNG・WebPのどれがいい？
一般的な商品写真では、JPEGまたはWebPが使いやすい場合が多くあります。
例えば、
- 商品単体写真
- モデル写真
- アパレル写真
- コスメ写真
- 食品写真
- スタイリング写真
などです。
写真は色の情報が多いため、PNGにするとファイル容量が大きくなりやすい場合があります。
一方、商品だけを切り抜き、背景を透明にする必要がある場合はPNGや透過対応のWebPを利用できます。
重要なのは、商品写真だから必ずJPEGではなく、掲載先と用途に合わせることです。
白背景の商品画像に適した形式
白背景の商品写真だからといって、PNGにする必要はありません。
背景が実際に白色で塗られている通常の商品写真なら、JPEGやWebPでも問題なく保存できます。
例えば、白背景＋商品＋自然な影という一般的なEC商品画像なら、JPEGを使用することもできます。
白背景の商品撮影については、以下の記事でも解説しています。
白背景の商品撮影について見る
背景を透明にする場合
商品以外を透明にして、掲載先の背景色をそのまま表示したい場合は、透過に対応した画像形式が必要です。
例えば、
- 商品だけを切り抜いた画像
- ロゴ
- アイコン
- Webデザイン用素材
などです。
この場合はPNGや透過対応のWebPを検討できます。
白背景と透明背景は違う
白背景と透明背景は同じではありません。
白背景画像は、背景部分にも「白」という色が入っています。
透明背景画像は、背景部分に色そのものがありません。
例えば透明背景の商品画像を黒いWebページへ配置すると、商品の周囲には黒い背景が表示されます。
用途によって使い分けましょう。
ロゴ・文字・図解画像に適した形式
商品写真だけでなく、
- ロゴ
- アイコン
- 商品説明図
- サイズ説明
- 比較画像
- 文字中心のクリエイティブ
などを使用する場合があります。
文字や線が多い画像では、強いJPEG圧縮によって輪郭がにじむことがあります。
そのため、画像内容によってはPNGなどが適している場合があります。
一方で、写真を背景に使った商品説明画像ではJPEGやWebPの方が容量を抑えやすいケースもあります。
画像の内容に合わせて選ぶことが重要です。
ECサイトでWebPを使うメリット
ECサイトでは、多くの商品画像を表示することがあります。
例えば商品一覧だけでも、20商品×複数画像という構成になれば、多数の画像データを読み込むことになります。
画像の容量が必要以上に大きいと、ページ全体で読み込むデータ量も増えます。WebPなどを利用して適切に画像容量を抑えることで、Webページを軽量化できる場合があります。
ただし、画像形式だけでWebサイトの表示速度が決まるわけではありません。
- 画像サイズ
- 画像枚数
- 圧縮率
- 配信方法
- Webサイト側の処理
なども関係します。
JPEGからWebPに変えると画質は上がる？
JPEG画像をWebPへ変換しただけで、元画像以上に高画質になるわけではありません。
例えば、すでに強く圧縮されて画質が劣化したJPEGをWebPへ変換しても、失われた情報が元に戻るわけではありません。
WebPを活用する場合は、
高品質な元画像
↓
Web用に適切なサイズへ変更
↓
WebPとして書き出す
という流れにするとよいでしょう。
これはJPEGでも同じです。
ファイル形式を変更することと、画像そのものを高画質化することは別です。
画像の画質については以下の記事も参考にしてください。
画像・写真の解像度を上げる方法
PNGをJPEGにするとどうなる？
PNG画像をJPEGへ変換すると、背景透過が失われる場合があります。
例えば透明背景の商品画像をJPEGへ変換すると、透明だった部分が白などの背景色になることがあります。
また、JPEGでは圧縮によって画像品質が変化します。
そのため、「ファイル容量を小さくしたいから、とりあえずJPEGへ変更する」のではなく、透明背景が必要か確認してから変換しましょう。
画像形式とファイル容量の関係
画像のファイル容量は、形式だけで決まるわけではありません。
主に、
- ピクセル数
- ファイル形式
- 圧縮率
- 写真の細かさ
- 色の情報量
- 透過情報
などによって変わります。
例えば同じJPEGでも、4000×4000pxの画像と、1000×1000pxの画像では容量が大きく異なります。
商品画像を軽くする場合は、ファイル形式だけでなく、画像の縦横サイズも確認しましょう。画像容量については、新規記事公開後にこちらの記事へ内部リンクを設定します。
商品画像の容量を小さくする方法｜画質を落とさず圧縮するポイント
ECモールでは対応形式を確認する
自社ECサイトではWebPなどを利用できても、外部ECモールでは登録できる画像形式や推奨仕様が異なる場合があります。
そのため、
- Amazon
- 楽天市場
- Yahoo!ショッピング
- Shopify
などへ商品画像を掲載する場合は、それぞれの最新仕様を確認してください。
AirPhotoでは各サービスの商品画像についても解説しています。
Amazonの商品画像ガイドライン
楽天市場の商品画像ガイドライン
Yahoo!ショッピングの商品画像ガイドライン
Shopifyの商品画像について
主要なECサイトの商品画像サイズについては、以下の記事でもまとめています。
通販サイトの商品画像サイズガイド
元画像は高品質な状態で保存する
商品写真をWebサイトへ掲載するときにJPEGやWebPへ圧縮しても、撮影した元画像まで同じ状態にする必要はありません。
元画像はできるだけ高品質な状態で保存しておくと、
- ECサイト
- SNS
- Web広告
- 印刷物
- カタログ
- POP
- パッケージ
など別の用途へ展開しやすくなります。例えばWeb用に1000pxへ縮小したJPEGしか残っていない場合、後から大きな印刷物へ使用するのが難しくなることがあります。
基本的には、
高品質な元データを保存する
↓
用途ごとに必要な形式・サイズへ書き出す
という運用がおすすめです。
商品画像のファイル形式でよくある失敗
「PNGの方が高画質」と考えてすべてPNGにする
PNGは画質を保ちやすい形式ですが、写真ではファイル容量が大きくなる場合があります。
写真だからPNGにすれば必ず良いというわけではありません。
JPEGを何度も上書き保存する
圧縮を繰り返すことで画質が低下する可能性があります。
元データは別に保存しましょう。
WebPに変換すれば高画質になると思う
ファイル形式をWebPへ変更しただけでは、元画像で失われた情報は戻りません。
透明背景が必要なのにJPEGで保存する
JPEGでは通常、透過背景を維持できません。
透明背景が必要な場合はPNGなどを検討します。
画像形式だけを変えて容量対策を終える
ファイル容量が大きい原因が画像サイズそのものにある場合、形式変更だけでは十分に小さくならないことがあります。
掲載先の仕様を確認しない
ECモールやCMSによって対応している形式は異なります。
画像を大量に制作する前に、掲載先の仕様を確認しておきましょう。
商品画像では「元データ」と「掲載データ」を分けて考える
商品画像では、撮影した元画像と、Webへ掲載する画像を同じものとして考えないことが重要です。
例えば、
撮影データ
↓
レタッチ
↓
高品質な完成データを保存
↓
ECサイト用にリサイズ
↓
JPEGまたはWebPへ書き出すという流れにできます。Amazon用、楽天市場用、SNS用など用途が増えた場合でも、高品質な完成データが残っていれば、そこからそれぞれに適した画像を作ることができます。商品撮影では、撮影時だけでなく、撮影後の画像管理も重要です。
まとめ
JPEG・PNG・WebPは、それぞれ特徴の異なる画像形式です。
基本的な使い分けとしては、
- JPEG：一般的な商品写真やモデル写真
- PNG：透明背景、ロゴ、図解など
- WebP：Web上で画像容量を抑えながら表示したい場合
と考えると分かりやすいでしょう。ただし、「JPEGだから低画質」「PNGだから高画質」「WebPなら必ず軽い」という単純なものではありません。
画像品質やファイル容量には、
- 元画像
- ピクセル数
- 圧縮率
- 保存設定
- 画像内容
も関係します。
EC商品画像では、
- 何を掲載するのか
- どこへ掲載するのか
- 透明背景が必要なのか
- どの程度のファイル容量にするのか
を考えてファイル形式を選びましょう。
また、撮影した高品質な元画像は残し、使用媒体に合わせてJPEG・PNG・WebPなどへ書き出す運用にすると、さまざまな用途へ展開しやすくなります。
AirPhotoでは、ECサイト、SNS、広告など、使用目的に合わせた商品撮影に対応しています。
通販サイトの商品画像サイズガイド
画像の解像度とは？
AirPhotoの商品撮影サービスを見る
AirPhotoの商品撮影実績を見る
お問い合わせはこちら
お急ぎの場合はこちら：03-6824-2695
著者情報
著者：AirPhoto編集部
AirPhotoは、商品の魅力やブランドの世界観を伝える商品写真の撮影を行う撮影チームです。
商品撮影・スタイリング・モデル撮影・動画撮影・レタッチなどの実務を通じて得た知見をもとに、ECや商品写真に関する情報を発信しています。
