こんにちは。中川瞬(@buppan_system)です。
この記事を読むことで
- 画像サイズが違うとどうなるのかがわかる
- 最適な画像の大きさがわかる
- 画像の種類を知ることができる
- 画像の圧縮方法がわかる
この記事を書かせて頂いている私は、現在、輸出・輸入・国内の転売のノウハウをお伝えしています。
時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、忙しくても副業で収入を得てもらっています。
それではShopifyで載せる最適な画像サイズについて解説していきます。
目次
画像サイズが重いとどうなる？
画像サイズが重いとサイトの読み込みが重くなり、ページの表示が遅くなります。
逆に、軽くしすぎて粗い画像になっていると、見栄えが悪くなってしまいますので、難しいと感じる人もいるかもしれません。
ページの読み込みが遅いとお客様の離脱率が上がり売上の低下につながるため、画像サイズには念入りな注意が必要です。
近年はPCよりもスマートフォンでサイトを閲覧をする人が多いため、画像も高解像度が高い画像を求める傾向があります。
適切な画像サイズを設定し、拡張子はPNGにしてあるかどうか、確認が必要です。
もしPNGでなくJPEGでも、画像容量を圧縮できるサイトで容量を小さくして少しでもページ読み込みをストレスなく行えるようにしていくかが売上にも直結してくるので、注意しましょう。
Shopifyの推奨する画像サイズとは？
Shopifyで商品画像とコレクション画像は、最大4,472×4,472ピクセルです。
または20メガピクセルまでの任意のサイズにすることができます。
画像ファイルサイズが20MB未満でない場合、Shopifyに追加できません。
20MB以上の画像ファイルサイズを用意し、追加できるように画像のプロパティーで確認するように心がけましょう。
それではShopifyでの推奨する画像サイズについて、「高さのある画面における幅の広い画像」と「幅の広い画面における高さのある画像」それぞれ推奨するサイズを紹介します。
高さのある画面における幅の広い画像
商品をスマートフォンで閲覧をする方が多いので、画像が縦長で表示するサイトも多く見られます。
日本国内最大の出店数を誇る「BASE」では、スマートフォンの方でも読み込みがスムーズになるよう1,280px×1,280px以上を推奨しています。
スマートフォンも縦表示でフルHD1,980px×1,980pxにも対応しているので、高さのある画面における幅の広い画像では、「1,280px×1,280px以上」を目安に調整するほうがいいでしょう。
幅の広い画面における高さのある画像
幅が広い画像を展開しているサイトを参考に見てみると、日本国内では「ZOZO」や「楽天アベニュー」などが、1,500px×1,800pxを採用しています。
Shopifyでは縦長や幅広い画像の推奨サイズの提示はしていませんが、正方形での商品画像の場合、「2,048px×2,048px」のサイズが最適と書かれています。
画像フォーマット
Shopifyでの画像フォーマットは以下の拡張子をサポートしています。
・JPEGまたはJPG
・プログレッシブJPEG
・PNG
・GIF
上記の拡張子をShopifyのサイトで推奨しているので、上記の4つのどれかになっているか確認をしておかなければいけません。
ちなみに、サポートされていないフォーマットの画像をアップロードすると、ShopifyによりJPEGまたはPNGに変換されます。
JPEGやPNGにしようとする場合、それぞれどのような画像で使うといいのでしょう。
それぞれの拡張子に合う画像の選定方法についてみてみます。
JPEG画像を使用する場合
JPEG画像では、複雑な色の写真や静止画像を使うときに使用しましょう。
なぜならば、JPEGは画像の品質を損なうことなく、ページの読み込み時間を高速に保つのに役立つからです。
ShopifyでJPEG画像を使うフォーマットは、以下の場合に使用するようにしてください。
・追加する
・バナー
・スライドショー
・ページ
・ブログ記事
上記のものを使用する場合はJPEGを使うようにしてください。
PNGを使用する場合
PNGは、フラットカラーとグラデーションなしのグラフィックやアイコンに使うのに最適と言われています。
また透過処理もできるので、以下の画像を使用するときに、PNGフォーマットを使用します。
・ロゴ
・アイコン
・罫線
・トリム
上記のものを使用する場合はPNGを使うようにしてください。
圧縮率
画像を圧縮することで、読み込み時間を高速にできるため、Shopifyではオンラインストアに表示された画像を圧縮しています。
画像を圧縮すると画像のフォーマットやサイズ、元の画質に応じて画質が変化することがあります。
圧縮後の画質レベルは以下のようになります。
・JPEG：65～90％
・PNG：90％
・GIF：品質に変化なし
JPEG画像の場合、元の品質と出力サイズにより変化する様子を表にまとめました。
| 元の画質 | 出力サイズ | 出力画質 |
| 86％以上 | 1,024px以上の高さまたは幅 | 85％ |
| 65～85％ | 1,024px以上の高さまたは幅 | 元の画質 |
| 64％以下 | 1,024px以上の高さまたは幅 | 65％ |
| 76％以上 | 高さと幅がともに1,024px未満 | 75％ |
| 65～75％ | 高さと幅がともに1,024px未満 | 元の画質 |
| 64％以下 | 高さと幅がともに1,024px未満 | 65％ |
上記の内容は、Shopifyに記載された内容なので、元の画質と出力サイズを参考にアップロードしてみてください。
アップロード制限
画像推奨サイズのところでも書きましたが、Shopifyでは画像ファイルサイズが20MBか20Mpx未満でない場合、Shopifyに追加できません。
これはサイト上での画像の品質を維持するために設けられた制限です。
画像ファイルサイズが20MBか20Mpx未満でない場合、Shopifyでのシステム上画像がアップロードができなくなるので、注意をしましょう。
画像サイズと拡張子を確認し、読み込みが早いサイト作成を心がけましょう
Shopifyでは最大4,472×4,472ピクセル。または20メガピクセルまでの任意のサイズにすることができます。
しかし、サイトや扱う商品によっては適切なサイズにするだけでなく、アップロードをした場合Shopify上で画像の圧縮が行われ、画像の品質の変化も出てきます。
実際にアップロードをした際、お手持ちのスマートフォンやPCで読み込み速度や表示内容や品質の確認をしっかりと行うことが重要です。
画像の読み込みが遅くなることはお客様のサイトからの離脱の原因になり、売上にも関係するので、自分の目でしっかりと確認するようにしましょう。
物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、下の記事ぜひ読んでください。
