【 ECサイト 】への出品画像を寸法を変えずに「容量だけ軽く」する方法

インターネット上では、Amazonを始めeBay・楽天・ヤフオク・メルカリなどのオンラインショッピングが さかんです。

これらWebサイトの店舗は ECサイトと呼ばれ、タイプは大きく2つに分かれます。

  • 1つは自らECサイトを構築して運営する「自社型」
  • もう1つはYahoo!ショッピングやAmazonなど多くのECサイトが集結している「モール型」

特にモール型は集客力が抜群で、出店者はモールに店舗さえ設置すれば手軽に物品販売できますから、” リアル店舗 ” とは比較にならないローコスト運営が可能です。

リアル店舗の物理的コストは、家賃・光熱費等の店舗の維持費、身体的な拘束、盗難などの危機管理など多大ですが、これらを払拭したECサイトは参入障壁が低く個人でも(自宅でも)物販可能ですから、出店者は増える一方だそうです。

もちろん、購入者側からしてもネット環境さえあれば、ところ選ばず都合の良いタイミングで買い物が楽しめ便利ですから人気があるのは当然ですね。

と言う訳で、今回は「モール型」ECサイトでの出品の際に起こり得る、商品画像の サイズ制限” についてお話しさせて頂きたいと思います。

出品 画像「容量」に上限を設定しているモールの存在

近年まれに、掲載したい画像をモールにアップロードしようとしたところ「ファイル容量の制限を超えた」とされ拒否されて上手く出品できない方がおられるようです。

モールによってはアップロード画像に容量(ファイルサイズ)制限が課されていて、規定の数値を超えた画像は掲載拒否されるのです。

制限をかける理由は、対ユーザー(お客様)サイドへの利便性向上のためと考えられ、例えばECサイトに重たい画像が多数貼られていた場合、閲覧者の端末モニタへの表示速度は当然、遅くなってくるもので、これは不快なものです。

また、運営者側サーバーのデータ保管の膨らみは、維持費にも直結します。

表面上、ファイルサイズに上限が課されていないモールであっても、出品ページに重たい画像が多数掲載されている場合にその重さに連動して検索順位を下げる措置をとっているモールも中にはあるのです。

こういった現状を考えますと、販売チャンスの低下を防ぐためにも出品画像は出来るだけ軽くリサイズしておきたいものです。

画像の見た目{タテ・ヨコ寸法}を維持したまま{容量のみ軽く}リサイズする

ちなみにリサイズ(resize)とは、「記録画像のピクセル数を変更する」ことをいいます。

主に、写真を{メール添付}したり{Webサイトのブログ等}にアップする際に、撮影画像のままではファイル容量が大き過ぎる場合に小さくする目的でリサイズします。

逆パターンでは{大判プリント}に使用する際など、画素数を大きくする場合でも行われます。

リサイズの方法は、大まかに2種類あります。

  1. リサイズ機能を持った{デジタルカメラ内で直接サイズ変更}する方法
  2. 撮影画像をパソコンに取り込み{画像ソフトでサイズ変更}する方法

ここでは「撮影画像をパソコンに取り込みフォトショップで容量を軽くリサイズ」する方法を解説させて頂きます。(1.の方法は、各種カメラの取説をお読みください。)

■ Photoshop 5.5〜CS6 の場合のリサイズは【 Web用に保存

リサイズは元画像リサイズ後の画像の「見た目」の品質対比させながら、画質が荒れない程度に調整します。

【 Photoshop 5.5〜CS6の場合 】→ ファイル → Web用に保存

Web用に保存

※Photoshop 5.5 より古いバージョンのものはImageReady(現在販売・対応終了)で調整します。

Web用に保存_100%高画像

配置に適した「寸法」を入力し、「画質」の数値は 元画像(左)と見比べながら画質の品質が落ちない程度のギリギリのところまで小さくなるよう数値を下げます。※スライダーで微調整。

Web用に保存_60%

【 元ファイル 】画質100で「1,163KB」 → 【 リサイズ後 】画質60で「375KB」

上図のように画質を 任意の数値に 下げて → JPEG形式等に保存

(※「保存形式」では、GIF・JPEG・PNG・WBMPのファイル形式に対応しています。)

以上の調整は、画像データの情報量を減らして画質を落とす作業になります。
「高精細で小さなドットの集合体」の元画像を「粗く大きなドットの集合体」の画像に劣化させているわけです。

そもそも画質の品質は{濃密過ぎるほど美しくて最良}の画像という訳もありません。

実のところ、人の識別能力を既に超えた高精細なドット画像は、データが重くなるだけでムダでしかありません。よって、その余分を削ぎ落とす調整をしているわけです。

■ Photoshop CC (2015以降) の場合のリサイズは【 書き出し形式 

Photoshop CC をお使いなら、ぜひ「書き出し形式」機能でリサイズされることをお勧めします。

Adobeが従来の「Web用に保存」を約2年の歳月をかけ開発・進化させた画像の生成機能で、CC 2015から搭載されています。

従来の「Web用に保存」と比較して、JPEG圧縮の技術自体が向上し、画像が「高精細な品質」のまま「ファイルサイズ」が小さくリサイズされます。JPEGの最高画質を選択した時に、ファイルサイズが半分になる場合もあるのです。(画像によって結果は異なります。)

ファイル → 書き出し → 書き出し形式

書き出し形式

例えば、従来の「Web用に保存」では上記のような「画質100」で「1,163KB」だったものが、「書き出し形式」であれば、同じ「画質100」であっても既に「520KB」にまでリサイズされるのです。JPG形式書き出し100%

「JPEG画像」の{品質}そのものが「高品質な圧縮ファイル」に生成されているのです。

これが「画質60」であれば「216.9KB」にリサイズされ、やはり従来より軽くなっています。JPG形式書き出し60%

「画質」調整後 → 書き出し → 保存
(※「書き出し形式」では、PNG・JPEG・GIF・SVGのファイル形式に対応しています。)

それでも使い慣れた 従来の「Web用に保存」を使用したい場合は、
ファイル → 書き出し → Web用に保存(従来)と、名称変更された形で(ファイルメニューから移動され)存在はしていますので、ご留意されてお使いください。

Web用に保存_従来(表示)

また、よく使う「ファイル形式」と「保存場所」を予め登録しておきたい場合は、
ファイル → 書き出し → 環境設定を書き出し で設定可能です。

「クイック書き出し」として反映されますから、今までの「Web用に保存」で → ウィンドウもろもろ… → 保存ボタンという面倒な作業は不要となり、より便利です。

■ 複数レイヤーが保持された「PDFファイル」はPhotoshopで統合する

一般的にWebでよく使われる画像ファイルの種類は、JPG・PNG・PDFですが、中でも複数レイヤーが保持されたままの「PDFファイル」は重いので、Photoshopで「1枚に統合」しておきます。

Photoshopで開き直し →「レイヤーパレット」で複数レイヤーを統合 → 別名保存

元データを失うと後日やり直しが効かなくなりますから、ここは「上書き保存」でなく「別名保存」です。画像編集ごとに、経緯が分かるようにファイル名は変えておきます。

最終的には、画像のピクセル数やファイルサイズをプロパティなどで確認後、モールの規定範囲内であれば出品画像としてアップロードします。