CS-CartとMulti-Vendorでは、アップロード画像のサイズとファイル形式に厳密な制限はありませんが、ページの読み込みを高速化し、画像を正しく表示するための推奨事項はあります。
大きすぎる画像をアップロードすることは、大量のサーバ容量が必要になり、ホスティング料金が高くなります。
また、画像が大きいとページの読み込み時間が長くなりますので、ユーザーがページの読み込みを待ちきれずに離脱してしまう可能性があります。
アップロード画像の推奨サイズは、画像の種類に応じて 300 × 300 px から 600 × 600 px の範囲で、画像の最大辺が 3,000 px を超えない、ディスク上の画像サイズは、1～2 MB を超えないようにしてください。
これから外れると、管理画面で画像サイズを変更する際に、問題が発生する可能性がありますので、Web用に最適化された画像を使用することをお勧めします。
CS-CartのMarketplaceでは、多くの画像最適化アドオンも提供されています。
ECサイトやマーケットプレイスサイトで画像サイズを変更する方法
CS-CartとMulti-Vendorでは、画像を元画像のサイズでは表示をせず、商品写真はアップロードをした後、サイズを縮小して表示がされ、アップロードされた画像からサムネイルが自動的に生成されます。
管理画面の上部メニューから「基本設定 > サムネイル」をクリックすると、「基本設定: サムネイル」画面が表示されますので、様々なページ（サムネイルの背景色、サムネイルのフォーマット、JPEG圧縮画質、商品一覧のサムネイルサイズ、商品詳細のサムネイルサイズなど） を設定できます。
商品一覧の見た目を揃えるためには、サムネイルの寸法（幅または高さ）は、それぞれどちらか一方のみを指定することをお勧めします。
画像のファイル形式の選択方法
一般的な画像ファイル形式には、JPEG、GIF、PNG の3つがあります。
- JPEG (.jpg)：JPEGは、インターネット上で最も一般的な画像形式です。JPEG 画像は、画質を落とさずに大幅に圧縮ができます。
- GIF (.gif)：GIFは、JPEGよりも低品質です。この画像形式は、アイコンや装飾画像など、より単純化された画像に使用されます。GIFはアニメーションもサポートします。
- PNG (.png)：PNGは、GIF や JPEG に代わる一般的な画像形式です。PNG は GIF よりも多くの色をサポートしており、JPEG のように再保存しても劣化しません。ただし、ファイルサイズは JPEG よりもはるかに大きくなる可能性があります。
ファイル形式を選択する際に、覚えておきたいヒントを紹介します。
- ECでは、ほとんどの場合 JPEG が最適な画像形式です。
- 大きな画像に GIF を使うのは絶対にやめましょう。ファイルサイズが大幅に増加します。
- PNG には十分注意してください。PNG-24 フルカラー画像は、PNG-8 よりもファイル容量が3倍以上大きくなります。
- PNG 画像の圧縮には Tinypng というサービスを利用できます。その他の形式については、Image Optimizerをお試しください。
一般的なフォーマットの代わりになるものは？
現在、GoogleはWebサイトの最適化のために、WebP、JPEG 2000、JPEG XR形式の使用を推奨しています。
しかし、これらの画像形式は、多くのブラウザが完全にサポートしていないため、JPEG と PNG の完全な代替にはなりません。
そのため、一般的に使用されているファイル形式で画像のバックアップを常に用意する必要があります。
CS-CartのMarketplaceには、画像を WebP や JPEG 2000 形式に変換するアドオンが提供されています。
サーバで使用するグラフィックライブラリは？
サーバには、 Imagick、GDなどのさまざまなグラフィック ライブラリがあり、GD はほぼすべてのホスティング・サーバで利用ができます。
しかし、処理された画像のパフォーマンスと品質が向上するため、Imagick 使う事をお勧めします。
ロゴに最適なサイズは?
ロゴサイズは、ロゴの目的によって異なりますが、大きすぎる画像をアップロードしないでください。
CS-Cartで用意されているデモのロゴサイズは 176 × 34 pxで、ECサイトやマーケットプレイスサイトでは、ロゴサイズは配置されているブロック幅によって制限されます。
ロゴはメールにも表示されますが、デフォルトではメール内のロゴサイズは制限されていないため、適切な大きさの画像を使用することをお勧めします。
ただし、必要に応じて管理画面の上部メニューから「一般設定 > 通知 > コードスニペット」をクリックし、ヘッダーを編集することで、メールのロゴの最大サイズを制限できます。
<img src = "{{logos.mail.image.image_path}}" alt = "{{company_data.company_name}}" width = "{{logos.mail.image.image_x}}" height = "{{logos. mail.image.image_y}} "/>を以下のように書き換えてください。
<img src = "{{logos.mail.image.image_path}}" alt = "{{company_data.company_name}}" style = "max-width: 300px; max-height: 300px;" />
上のようにした場合、メールのロゴの最大サイズは 300 x 300 pxになります。