見込み客があなたのサイトにたどり着いたとき Shopify ウェブサイトユーザーは画像を見て購入するかどうかを決めます。したがって、販売者としてのあなたの仕事は、画像がサイトの読み込み速度を低下させないようにし（ユーザーを遠ざけないようにし）、画像の形式とサイズを適切にすることです。
これにより、画像が引き伸ばされたり、途切れたりすることがなくなります。 私たちの究極では Shopify 画像サイズ ガイドでは、特定の画像サイズの重要性を示しています。 Shopify 写真、ロゴ、バナー画像、製品画像などに最適なサイズを提供します。
すべてを学ぶために読み続けてください Shopify 画像サイズ！
なぜあなたは気にする必要があるのですか Shopify 画像サイズ?
画像の管理とアップロードは面倒です。 それでも、サイト速度の遅さ、SEO の問題、e コマース サイトでのコンバージョン率の低さなどに関しては、彼らが主な違反者であることがよくあります。
また、すべてのウェブサイト ビルダーと e コマース プラットフォームで注意が必要な点は、画像が最適化され、見栄えがよくなるように、特定の画像サイズに固執する必要があることです。
その理由をまとめると、 Shopify 画像サイズが重要:
- の各画像タイプ Shopify ロゴはバナー画像とは異なるサイズにする必要があるなど、一意のサイズが必要です。
- 適切な形式で画像をはっきりと確認できると、ユーザーが有料顧客になる可能性が高くなります。
- 適切なサイズの画像と最適化された画像は、SEO の可能性を高めることができます。
- 写真のサイズが小さすぎると、画像が引き伸ばされたり、トリミングされたりして、見苦しい Web サイトにつながる可能性があります。
- 画像のサイズが間違っていると、サイトの速度が低下したり、顧客が待ちきれなくなったりすることがあります。
これらの点に加えて、鮮明で適切なサイズの画像は、一定レベルのプロフェッショナリズムを示し、信頼できるビジネスであり、製品が最高品質であるという感情的な反応を顧客に提供します. 悪い写真は、製品や表示方法に関心がないように見えます。 顧客は、「他に手抜きをしているところはありますか?」と尋ねる場合があります。
そうは言っても、最高のクイックリファレンスガイドをご覧ください Shopify 製品ページ、バナー画像、ロゴなどの領域の画像サイズ。
最高 Shopify 画像サイズ (画像が使用される場所に基づく)
これらはすべて厳格なルールではありませんが、可能な限り「理想的なサイズ」に従うのが最善です。テーマには独自の画像基準がある場合があるので、それに注意してください。それ以外の場合は、寸法に関して余裕がある場合に説明します。
全体で使用する頼りになる画像サイズはありますか Shopify?
いいえ。ただし、そのアプローチを取る予定がある場合は、次のことをお勧めします。
- すべての画像が、商品の複雑な詳細を示すのに十分な大きさであることを確認してください。
- ただし、サイトのパフォーマンスを妨げないように、画像を十分に小さくしてください。
- 正方形の画像の場合は、2048 × 2048 ピクセルに抑えるのがよいでしょう。
- 正方形の画像の場合、800 × 800 ピクセル未満のものは避けてください。
- 正方形の画像の場合、4472 × 4472 より大きいサイズは避けてください。
正方形以外の画像の場合は、以下のガイドを使用することを強くお勧めします。また、テーマによっては画像の切り抜き方法が異なるため、オンライン ストアに最適な画像サイズを推測して確認する必要がある場合があります。
最良のガイダンスについては、理想を見てください Shopify 以下の画像サイズは、すべて画像タイプに基づいて分類されています。
1. Shopify 商品画像サイズ（理想サイズ：2048×2048ピクセル）
製品画像は、販売を行うための主要なメディアとして機能します。 Shopify.
この 製品画像の推奨寸法 Shopify 2048 x 2048 ピクセルです.
これは、画像がページの速度を低下させないようにすると同時に、顧客が元の写真の豊かさを詳細に確認できるようにするための素晴らしい場所です.
商品写真には不要な切り抜きを避けるため、正方形の画像をお勧めします。 Shopify テーマ。
以下のスクリーンショットは、2048 × 2048 ピクセルとしてアップロードされた画像を示しており、トリミングされていません。
長くて幅の広い画像も商品写真には使えますが、テーマが画像に及ぼす影響を制御できる範囲は狭くなります。横長の写真は縦長の写真に比べてサイズが小さくなることがあります。
2. Shopify コレクション画像サイズ（理想サイズ：2048×2048ピクセル）
コレクションを追加するのに画像は必ずしも必要ではありませんが、そうすることで、そのコレクション用に個別のページを作成できます。これは、製品の小さなサブセット用に作成されたランディング ページとほとんど同じです。
の下にコレクション画像がアップロードされます コレクションの作成 のセクション Shopify.
その後、製品をそのコレクションに追加して、ホームページのコンテンツ ブロックに表示したり、独自のページとして表示したりできます。
あなたが去ったら 画像 コレクション ページのフィールドが空白の場合、そのコレクションの注目の製品画像の XNUMX つがデフォルトとして使用されます。
推奨される Shopify コレクションの画像サイズは 2048 × 2048 ピクセルです。
正方形の寸法は、特にコレクションを並べて表示する場合、すべてのコレクションにわたって標準化された形式を確立するのに役立ちます。
また、コレクションを紹介するコンテンツ ブロックを利用すると、正方形の画像の方が扱いやすくなることがわかります。
いつものように、結果は使用するテーマによって異なる場合があります。 実際、一部のテーマは、コレクション画像にさらに機能を提供し、別のコレクション ページでバナーのように画像を共有できます。 この場合、コレクション画像の最適なサイズは、ここで説明したものとはまったく異なる場合があります。 全体として、最善の行動計画は、テーマでテストを行うことです。 独自のサイズの複数の画像をコレクションにアップロードします。 機能するものを書き留めてから、常にそれらのディメンションを使用してください。 画像が大きすぎたり小さすぎたりしないことを確認してください。
3. Shopify ロゴ画像サイズ（理想サイズ：横450×縦250ピクセル）
ロゴは、e コマース ストアのマーキーとして際立っています。 通常はヘッダー領域内に表示されることを考慮して、誰かがあなたのホームページにアクセスしたときにすぐに表示され、Web サイト全体に表示されます。
Shopify ロゴのサイズに問題があるユーザーは、ロゴが十分に大きくないか、何らかの形でナビゲーション メニューが変形することがあります。 または、ロゴの下または上に多くの余白が残っている場合があります。
これらの問題のほとんどを解決するには、高さ 250 ピクセル、幅 450 ピクセルのロゴのサイズを使用することをお勧めします。
実際には、 Shopify 幅と高さをこれらの寸法より高くしないことをお勧めします。 そうは言っても、テーマが許す限り、小さくすることができます。
サイドバーの表示がおかしくなったり、ナビゲーション メニューの要素が多すぎて、ロゴをおかしな方向に動かしてしまうことがよくあります。 とにかく、ロゴのサイズとサイトの設定をいじって、最高の外観を実現することをお勧めします.
代わりに、一部のテーマでは正方形のロゴが見栄えがしますが、スペースを取りすぎないように 250 x 250 ピクセル未満に抑えてください。
最も汎用性がある場合は、次の場所に移動してください。 設定 > ブランド in Shopify 追加する デフォルト と Square 画像。 このように、状況に応じてどちらでもアップロードできます。
4. Shopify バナー画像サイズ（理想サイズ：横2000×縦600ピクセル）
通常、ヒーロー画像または画像バナーと呼ばれるこれらは、ホームページの上部に配置して、新製品を紹介し、ボタン付きのテキストを含めることができる大きな画像です. サイズ変更後、およびさまざまなデバイスで表示したときに粒子が粗くなるのを防ぐために、バナー画像は高解像度であることが不可欠です。
Shopify また、持って ヘッダ と同様に機能する content セクション バナー画像 コンテンツセクション。
どちらを選択する場合でも、バナーとヒーロー画像は幅 1200 ピクセル x 高さ 600 ピクセルのサイズに固執することをお勧めします。
そうは言っても、多くの場合、幅は 1200 ～ 2000 ピクセル、高さは 400 ～ 600 ピクセルで十分です。 そしていつものように、それはあなたのテーマに依存します。
最後に、すべての画像バナーとヒーロー画像の設定を調整することも賢明です。ほとんどのテーマでバナーの高さを変更し、 Shopify コンテンツの背後にある画像がよく見えるように、右下隅や上部など、バナー コンテンツを配置したい場所に配置します。
5. Shopify スライドショーの画像サイズ（理想サイズ：横2000×縦600ピクセル）
バナーと同じように、スライドショーでは高解像度の画像を使用する必要があります。 これらのコンテンツ セクションを使用すると、ページの XNUMX つの領域に複数の写真を表示できます。 次に、次の画像に連続してスライドします。
これらはバナーに非常に似ているため、実際には、ヒーローまたはバナー イメージと同じ幅と高さを維持します。 推奨は、幅 2000 ピクセル、高さ 600 ピクセルです。 ただし、高さは 400 ～ 600 ピクセル、幅は 1200 ～ 2000 ピクセルの範囲で指定できます。
スライドショーのすべての設定を管理して、スライドショーに最適な書式を設定するようにしてください。コンテンツ ボックスを別の場所に移動する必要がある場合や、高さを少し拡張するとスライドショーの見栄えが良くなる場合があります。
スライドショーの主なルールの XNUMX つは、同じスライドショーに対して常に同じサイズの画像をアップロードすることです。 別のスライドショーを作成するときにサイズを調整することは大歓迎ですが、継続性とユーザー エクスペリエンスのために、XNUMX つのスライドショーにまとめられた画像がすべて同じサイズであることを確認してください。
最適化する方法 Shopify 画像
画像を最適化すると、e コマース ストアでの写真の読み込み方法が改善されます。 また、画像がショッピング体験を圧倒するのではなく、どのように補完するべきかを見て、ウェブサイトでよりユーザーフレンドリーな体験を作成するのにも役立ちます.
画像を最適化する際に考慮すべき点がいくつかあります。 Shopifyこれらの領域には、最適な画像形式、圧縮、画像ソース、スタイルなどが含まれます。画像を最適化するためのベストプラクティスと手順について詳しくは、以下をお読みください。 Shopify.
ステップ 1: 最適な画像を選択する Format
Shopify 画像のサイズは重要ですが、写真の最適化の最初のステップは、最適な画像形式を選択することです。
画像形式は数多くあり、 Shopify 許可する。
それらが特別な理由は次のとおりです。
- JPEG/JPG: おそらく最も一般的な画像ファイル形式です。JPEG は圧縮率が高く、優れた品質を提供します。特に写真に細かいディテールがある場合は、製品ページに JPEG をお勧めします。
- PNG: このファイル タイプは、画像サイズを縮小した後の品質維持において、実際には JPEG よりも優れています。 ただし、PNG はあまり圧縮されないことがあります。 透明な背景 (JPEG ではサポートされていません) が必要な場合に最適なので、ロゴや一部のバナー画像に適しています。
- GIF: GIF はアニメーション用の画像形式です。基本的には短いビデオを動画に変換するようなもので、ビデオほどの大きさで製品を簡単に説明するのに役立ちます。ホームページ、製品ページ、ブログ投稿などでの使用が適しています。ただし、JPEG、TIFF、PNG などの他の形式のような豊かな色彩品質がないため、GIF を使いすぎないようにしてください。
- WebP: おそらくすべての画像形式の中で最も汎用性の高いWebPは、JPEGやPNGよりも圧縮率と品質が高く、PNGの透明性の利点も備えているため、ますます普及しています。言うまでもなく、WebPでアニメーションを作成することもできます。WebPは、あらゆる種類の画像に使用できます。 Shopify. 将来的には、WebP がインターネット全体でより頻繁に使用されることが予想されます。
それ以外、 Shopify HEIC、プログレッシブ JPEG、AVIF などの形式をサポートしています。HEIC は、Apple デバイス全体で使用されている画像形式の標準です。非常にコンパクトで、1 つの画像に複数の画像を含めることができ、優れた品質を提供します。ただし、ほとんどの非 Apple デバイスとは互換性がないため、推奨するのは困難です。AVIF 画像形式は、その高品質と劇的な圧縮率により、かなり大きな利点があります。つまり、AVIF のパフォーマンスは、JPEG や WebP 画像よりも優れているはずです。ただし、デスクトップ ブラウザーとモバイル ブラウザーがファイル形式の標準として採用するには、しばらく時間がかかります。そのため、現時点では推奨できません。インターネットに接続できるほぼすべての人が実際に画像をオンラインで表示できるようになるまでは推奨できません。
画像の使用目的に応じて、上記から適切な形式を選択します。次に、次のステップに進み、Web サイト全体で画像のスタイルが同じになるようにします。
ステップ 2: すべての写真で同じスタイルで撮影する
継続性は、e コマースの写真にとって重要です。 ブランドの全体的な外観を確立し、Web サイト全体で標準化された雰囲気を作り出します。
たとえば、ブランドがすべての製品画像に XNUMX つの背景色を使用するのは一般的です。
これは、画像のサイズとスタイルにも当てはまります。 ほとんどの製品画像が横向きである場合は、横向きの写真をいくつか混在させないでください。 ライフスタイルと製品の両方の写真をミックスに組み込むことは大歓迎ですが、ほとんどの撮影で XNUMX つのスタイルに固執することをお勧めします。
ステップ 3: 製品写真とライフスタイル写真の両方を組み合わせて作成する
前述のように、ほとんどの場合、製品写真の大部分に XNUMX 種類の写真スタイルを使用することをお勧めします。 ただし、モノカラーの背景と製品の異なるビューを使用した標準の製品写真を補完するために、いくつかのライフスタイルの写真を含めることが不可欠です.
eコマースビジネスには、顧客がその場で商品を試着したり、触れたりできないという欠点があります。 そこで活躍するのがライフスタイルフォトです。 ユーザーは、実際に製品がどのように見えるかを見ることができます。 シャツが体を覆う様子や、実際に誰かが立っているスケートボードのサイズ。
ステップ 4: 適切なファイル名とタイトルを選択する
すべての画像ファイルには名前があり、 Shopify はそのファイル名を取得し、Web サイトのメタデータで公開します (すべての e コマース プラットフォームがこれを行います)。
したがって、写真を次のように保存すると、 新しい写真(1).jpg コンピュータに保存してストアにアップロードすると、検索エンジンは写真の内容に関する情報を取得できなくなります。これにより SEO に悪影響が出る可能性があります。
画像を最適化するときは、次の手順を実行して、検索エンジン (および視覚障害のあるもの) が画像で何が起こっているかを理解できるようにします。
- 画像の内容を連想させるファイル名を追加します。
- 一般的なファイル名をアップロードした場合は、画像を変更してください イベントタイトル in Shopify. これはデフォルトを置き換えます。
- 画像に表示されているものをより強力に表現するには、alt タグを使用します。 これらは、視覚障害者にとってユーザー エクスペリエンスが改善されていることを示すため、検索エンジンが注目する主な要素です。
ステップ 5: アップロード前またはアップロード中に画像を圧縮する
Shopify サーバーにアップロードされたすべての画像の自動圧縮を提供しますが、それに完全に依存するべきではありません。
あなたの最善の策は、アップロードする前にサードパーティのツールを使用して画像を圧縮することです Shopify、またはインストール Shopify plugin アップロード時に写真を自動的に圧縮します。
アプリのルートに行く方がはるかに簡単ですが、それらのほとんどはサブスクリプションを必要とするため、予算を維持する必要があるかどうかは理解しています.
画像圧縮に適したアプリには次のものがあります。
無料試用版でこれらのアプリをテストして、画像の圧縮率とプロセスの自動化方法を理解してください。 その後、サブスクリプションにコミットできます。 サードパーティのツールについては、 TinyPNG と 画像のリサイズ.
ステップ 6: 無料の画像検索アプリを検討する
e コマース ブランドは (無料の代替品を見つけたり、製造元の Web サイトから写真を取得したりするのではなく) 独自の写真を撮影することを強くお勧めしますが、無料の画像を使用するのに適したオンライン ストアの領域がいくつかあります。
たとえば、ブログの投稿を補完するために、峡谷を見渡す人物の風景写真が必要になる場合があります。 一方、写真をヒーロー画像の背景として使用すると、実際の製品画像と説明を背景の上にドロップできます。
このような状況では、次のクリエイティブ コモンズ ライセンスの画像サイトを使用することをお勧めします。
クリエイティブ コモンズ ライセンスは、画像を無料で取得して Web サイトに掲載できるという意味ではないことに注意してください。 そのような場合もありますが、各画像をチェックして、その使用に対してどのような権利があるかを確認する必要があります。
たとえば、クリエイティブ コモンズ ライセンスでは次のように説明されています。
- 商用・非商用を問わず画像を使用できる場合
- 作成者のクレジットを表示する必要がある場合、または単に推奨されている場合
- 何らかの方法で画像を変更することが許可されている場合
さらに、XNUMXセント硬貨を支払うことなく、サイズ変更、フィルター、トリミングを制御できる無料の画像編集アプリがたくさんあります。
私たちは提案します:
ステップ 7: A/B テストを実行して、最適な画像と Formats
写真に適切なファイル名を付け、サイズを変更し、トリミングし、最適な形式とサイズを決定したら、ストアでどのように表示されるかを確認します。
幸いなことに、指を交差させて、画像が変換に最適であることを願ってはいけません. 商品ページ、ランディング ページ、ホームページに同じ画像の複数のバリエーションをアップロードして、コンバージョンの点で最も優れたものを確認できます。
両方 テーマサイエンティスト と 将軍 のいくつかの部分に A/B テスト機能を提供する Shopify のあるサウンドを提供します。
A/B テストの優れている点は、実験に終わりがないことです。 これにより、Web サイトのあらゆる側面を監視できます。 時間の経過とともに勢いを失った画像を交換し、XNUMX つの期間中に複数のテストを実行できます。
Shopify 画像サイズ ガイド: 結論
正方形の画像を使用することは、eコマースの写真が切り取られないようにするための1つの方法です。しかし、このルールがeコマースの場合に常に当てはまるとは限りません。 Shopify テーマ.
そのため、製品、コレクション、バナー用に複数の画像サイズをアップロードして、テーマがどのサイズを最もうまく処理できるかを把握することをお勧めします。それ以外の場合は、2046 × 2046 ピクセルの標準が適しています。ただし、バナー、ロゴ、スライドショーの場合は、この記事で前述したより具体的な寸法を使用する必要があります。
説明が必要な場合は、以下のコメントでお知らせください。 Shopify 画像サイズ！
コメント 0応答